Skip to content

Commit a5be400

Browse files
agcolomagcolom
committed
api docs: code indentation and formatting (m entries)
1 parent cdbe2db commit a5be400

File tree

10 files changed

+432
-303
lines changed

10 files changed

+432
-303
lines changed

‎entries/map.xml

Lines changed: 76 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -33,103 +33,120 @@
3333
</div>
3434
</fieldset>
3535
</form>
36-
</code></pre>
36+
</code></pre>
3737
<p>To get a comma-separated list of checkbox <code>ID</code>s:</p>
38-
<pre><code>$(':checkbox').map(function() {
39-
return this.id;
40-
}).get().join();</code></pre>
38+
<pre><code>
39+
$( ":checkbox" )
40+
.map(function() {
41+
return this.id;
42+
})
43+
.get()
44+
.join();
45+
</code></pre>
4146
<p>The result of this call is the string, <code>"two,four,six,eight"</code>.</p>
4247
<p>Within the callback function, <code>this</code> refers to the current DOM element for each iteration. The function can return an individual data item or an array of data items to be inserted into the resulting set. If an array is returned, the elements inside the array are inserted into the set. If the function returns <code>null</code> or <code>undefined</code>, no element will be inserted.</p>
4348
</longdesc>
4449
<example>
4550
<desc>Build a list of all the values within a form.</desc>
4651
<code><![CDATA[
47-
$("p").append( $("input").map(function(){
48-
return $(this).val();
49-
}).get().join(", ") );
52+
$( "p" )
53+
.append( $( "input" ).map(function() {
54+
return $( this ).val();
55+
})
56+
.get()
57+
.join( ", " ) );
5058
]]></code>
5159
<css><![CDATA[
52-
p { color:red; }
53-
]]></css>
54-
<html><![CDATA[<p><b>Values: </b></p>
55-
<form>
56-
<input type="text" name="name" value="John"/>
57-
58-
<input type="text" name="password" value="password"/>
59-
<input type="text" name="url" value="http://ejohn.org/"/>
60-
61-
</form>]]></html>
60+
p {
61+
color: red;
62+
}
63+
]]></css>
64+
<html><![CDATA[
65+
<p><b>Values: </b></p>
66+
<form>
67+
<input type="text" name="name" value="John">
68+
<input type="text" name="password" value="password">
69+
<input type="text" name="url" value="http://ejohn.org/">
70+
</form>
71+
]]></html>
6272
</example>
6373
<example>
6474
<desc>A contrived example to show some functionality.</desc>
6575
<code><![CDATA[
66-
var mappedItems = $("li").map(function (index) {
67-
var replacement = $("<li>").text($(this).text()).get(0);
76+
var mappedItems = $( "li" ).map(function( index ) {
77+
var replacement = $( "<li>" ).text( $( this ).text() ).get( 0 );
6878
if (index == 0) {
69-
/* make the first item all caps */
70-
$(replacement).text($(replacement).text().toUpperCase());
71-
} else if (index == 1 || index == 3) {
72-
/* delete the second and fourth items */
79+
// Make the first item all caps
80+
$( replacement ).text( $( replacement ).text().toUpperCase() );
81+
} else if ( index == 1 || index == 3 ) {
82+
// Delete the second and fourth items
7383
replacement = null;
74-
} else if (index == 2) {
75-
/* make two of the third item and add some text */
76-
replacement = [replacement,$("<li>").get(0)];
77-
$(replacement[0]).append("<b> - A</b>");
78-
$(replacement[1]).append("Extra <b> - B</b>");
84+
} else if ( index == 2 ) {
85+
// Make two of the third item and add some text
86+
replacement = [ replacement, $( "<li>" ).get( 0 ) ];
87+
$( replacement[ 0 ] ).append( "<b> - A</b>" );
88+
$( replacement[ 1 ] ).append( "Extra <b> - B</b>" );
7989
}
8090
81-
/* replacement will be a dom element, null,
82-
or an array of dom elements */
91+
// Replacement will be a dom element, null,
92+
// or an array of dom elements
8393
return replacement;
8494
});
85-
$("#results").append(mappedItems);
86-
95+
$( "#results" ).append( mappedItems );
8796
]]></code>
8897
<css><![CDATA[
89-
body { font-size:16px; }
90-
ul { float:left; margin:0 30px; color:blue; }
91-
#results { color:red; }
92-
]]></css>
93-
<html><![CDATA[<ul>
94-
<li>First</li>
95-
<li>Second</li>
96-
<li>Third</li>
97-
98-
<li>Fourth</li>
99-
<li>Fifth</li>
100-
</ul>
101-
<ul id="results">
102-
103-
</ul>]]></html>
98+
body {
99+
font-size: 16px;
100+
}
101+
ul {
102+
float: left;
103+
margin: 0 30px;
104+
color: blue;
105+
}
106+
#results {
107+
color: red;
108+
}
109+
]]></css>
110+
<html><![CDATA[
111+
<ul>
112+
<li>First</li>
113+
<li>Second</li>
114+
<li>Third</li>
115+
<li>Fourth</li>
116+
<li>Fifth</li>
117+
</ul>
118+
<ul id="results">
119+
</ul>
120+
]]></html>
104121
</example>
105122
<example>
106123
<desc>Equalize the heights of the divs.</desc>
107124
<code><![CDATA[
108125
$.fn.equalizeHeights = function() {
109-
var maxHeight = this.map(function(i,e) {
110-
return $(e).height();
126+
var maxHeight = this.map(function( i, e ) {
127+
return $( e ).height();
111128
}).get();
112-
113129
return this.height( Math.max.apply(this, maxHeight) );
114130
};
115131
116-
$('input').click(function(){
117-
$('div').equalizeHeights();
132+
$( "input" ).click(function() {
133+
$( "div" ).equalizeHeights();
118134
});
119-
120135
]]></code>
121136
<css><![CDATA[
122-
div { width: 40px; float:left; }
123-
input { clear:left}
124-
]]></css>
137+
div {
138+
width: 40px;
139+
float: left;
140+
}
141+
input {
142+
clear: left;
143+
}
144+
]]></css>
125145
<html><![CDATA[
126-
127146
<input type="button" value="equalize div heights">
128-
129147
<div style="background:red; height: 40px; "></div>
130148
<div style="background:green; height: 70px;"></div>
131149
<div style="background:blue; height: 50px; "></div>
132-
133150
]]></html>
134151
</example>
135152
<category slug="traversing/filtering"/>

‎entries/mousedown.xml

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,35 @@
2121
<added>1.0</added>
2222
</signature>
2323
<longdesc>
24-
<p>This method is a shortcut for <code>.on('mousedown', handler)</code> in the first variation, and <code>.trigger('mousedown')</code> in the second.</p>
24+
<p>This method is a shortcut for <code>.on( "mousedown", handler)</code> in the first variation, and <code>.trigger( "mousedown" )</code> in the second.</p>
2525
<p>The <code>mousedown</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. Any HTML element can receive this event.</p>
2626
<p>For example, consider the HTML:</p>
2727
<pre><code>&lt;div id="target"&gt;
2828
Click here
2929
&lt;/div&gt;
3030
&lt;div id="other"&gt;
3131
Trigger the handler
32-
&lt;/div&gt;</code></pre>
32+
&lt;/div&gt;
33+
</code></pre>
3334
<p class="image">
3435
<img src="/resources/0042_05_01.png" alt=""/>
3536
</p>
3637
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
37-
<pre><code>$('#target').mousedown(function() {
38-
alert('Handler for .mousedown() called.');
39-
});</code></pre>
38+
<pre><code>
39+
$( "#target" ).mousedown(function() {
40+
alert( "Handler for .mousedown() called." );
41+
});
42+
</code></pre>
4043
<p>Now if we click on this element, the alert is displayed:</p>
4144
<p>
4245
<samp>Handler for .mousedown() called.</samp>
4346
</p>
4447
<p>We can also trigger the event when a different element is clicked:</p>
45-
<pre><code>$('#other').click(function() {
46-
$('#target').mousedown();
47-
});</code></pre>
48+
<pre><code>
49+
$( "#other" ).click(function() {
50+
$( "#target" ).mousedown();
51+
});
52+
</code></pre>
4853
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
4954
<p>The <code>mousedown</code> event is sent when any mouse button is clicked. To act only on specific buttons, we can use the event object's <code>which </code>property. Not all browsers support this property (Internet Explorer uses button instead), but jQuery normalizes the property so that it is safe to use in any browser. The value of <code>which</code> will be 1 for the left button, 2 for the middle button, or 3 for the right button.</p>
5055
<p>This event is primarily useful for ensuring that the primary button was used to begin a drag operation; if ignored, strange results can occur when the user attempts to use a context menu. While the middle and right buttons can be detected with these properties, this is not reliable. In Opera and Safari, for example, right mouse button clicks are not detectable by default.</p>
@@ -53,14 +58,16 @@
5358
<example>
5459
<desc>Show texts when mouseup and mousedown event triggering.</desc>
5560
<code><![CDATA[
56-
$("p").mouseup(function(){
57-
$(this).append('<span style="color:#F00;">Mouse up.</span>');
58-
}).mousedown(function(){
59-
$(this).append('<span style="color:#00F;">Mouse down.</span>');
60-
});
61-
61+
$( "p" )
62+
.mouseup(function() {
63+
$( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
64+
})
65+
.mousedown(function() {
66+
$( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
67+
});
6268
]]></code>
63-
<html><![CDATA[<p>Press mouse and release here.</p>
69+
<html><![CDATA[
70+
<p>Press mouse and release here.</p>
6471
]]></html>
6572
</example>
6673
<category slug="events/mouse-events"/>

‎entries/mouseenter.xml

Lines changed: 57 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<added>1.0</added>
2222
</signature>
2323
<longdesc>
24-
<p>This method is a shortcut for <code>.on('mouseenter', handler)</code> in the first two variations, and <code>.trigger('mouseenter')</code> in the third.</p>
24+
<p>This method is a shortcut for <code>.on( "mouseenter", handler )</code> in the first two variations, and <code>.trigger( "mouseenter" )</code> in the third.</p>
2525
<p>The <code>mouseenter</code> JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.</p>
2626
<p>For example, consider the HTML:</p>
2727
<pre><code>&lt;div id="outer"&gt;
@@ -38,62 +38,76 @@
3838
<img src="/resources/0042_05_08.png" alt=""/>
3939
</p>
4040
<p>The event handler can be bound to any element:</p>
41-
<pre><code>$('#outer').mouseenter(function() {
42-
$('#log').append('&lt;div&gt;Handler for .mouseenter() called.&lt;/div&gt;');
43-
});</code></pre>
41+
<pre><code>
42+
$( "#outer" ).mouseenter(function() {
43+
$( "#log" ).append( "&lt;div&gt;Handler for .mouseenter() called.&lt;/div&gt;" );
44+
});
45+
</code></pre>
4446
<p>Now when the mouse pointer moves over the <samp>Outer</samp> <code>&lt;div&gt;</code>, the message is appended to <code>&lt;div id="log"&gt;</code>. You can also trigger the event when another element is clicked:</p>
45-
<pre><code>$('#other').click(function() {
46-
$('#outer').mouseenter();
47-
});</code></pre>
47+
<pre><code>
48+
$( "#other" ).click(function() {
49+
$( "#outer" ).mouseenter();
50+
});
51+
</code></pre>
4852
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>
4953
<p>The <code>mouseenter</code> event differs from <code>mouseover</code> in the way it handles event bubbling. If <code>mouseover</code> were used in this example, then when the mouse pointer moved over the <samp>Inner</samp> element, the handler would be triggered. This is usually undesirable behavior. The <code>mouseenter</code> event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the <samp>Outer</samp> element, but not the <samp>Inner</samp> element.</p>
5054
</longdesc>
5155
<example>
5256
<desc>Show texts when mouseenter and mouseout event triggering.
5357
<code>mouseover</code> fires when the pointer moves into the child element as well, while <code>mouseenter</code> fires only when the pointer moves into the bound element.</desc>
5458
<css><![CDATA[
55-
div.out {
56-
width:40%;
57-
height:120px;
58-
margin:0 15px;
59-
background-color:#D6EDFC;
60-
float:left;
61-
}
62-
div.in {
63-
width:60%;
64-
height:60%;
65-
background-color:#FFCC00;
66-
margin:10px auto;
67-
}
68-
p {
69-
line-height:1em;
70-
margin:0;
71-
padding:0;
72-
}
59+
div.out {
60+
width: 40%;
61+
height: 120px;
62+
margin: 0 15px;
63+
background-color: #d6edfc;
64+
float: left;
65+
}
66+
div.in {
67+
width: 60%;
68+
height: 60%;
69+
background-color: #fc0;
70+
margin: 10px auto;
71+
}
72+
p {
73+
line-height: 1em;
74+
margin: 0;
75+
padding: 0;
76+
}
7377
]]></css>
7478
<code><![CDATA[
75-
var i = 0;
76-
$("div.overout").mouseover(function(){
77-
$("p:first",this).text("mouse over");
78-
$("p:last",this).text(++i);
79-
}).mouseout(function(){
80-
$("p:first",this).text("mouse out");
81-
});
82-
83-
var n = 0;
84-
$("div.enterleave").mouseenter(function(){
85-
$("p:first",this).text("mouse enter");
86-
$("p:last",this).text(++n);
87-
}).mouseleave(function(){
88-
$("p:first",this).text("mouse leave");
89-
});
79+
var i = 0;
80+
$( "div.overout" )
81+
.mouseover(function() {
82+
$( "p:first", this ).text( "mouse over" );
83+
$( "p:last", this ).text( ++i );
84+
})
85+
.mouseout(function() {
86+
$( "p:first", this ).text( "mouse out" );
87+
});
9088
89+
var n = 0;
90+
$( "div.enterleave" )
91+
.mouseenter(function() {
92+
$( "p:first", this ).text( "mouse enter" );
93+
$( "p:last", this ).text( ++n );
94+
})
95+
.mouseleave(function() {
96+
$( "p:first", this ).text( "mouse leave" );
97+
});
9198
]]></code>
9299
<html><![CDATA[
93-
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
94-
95-
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>
100+
<div class="out overout">
101+
<p>move your mouse</p>
102+
<div class="in overout"><p>move your mouse</p><p>0</p></div>
103+
<p>0</p>
104+
</div>
96105
106+
<div class="out enterleave">
107+
<p>move your mouse</p>
108+
<div class="in enterleave"><p>move your mouse</p><p>0</p></div>
109+
<p>0</p>
110+
</div>
97111
]]></html>
98112
</example>
99113
<category slug="events/mouse-events"/>

0 commit comments

Comments
 (0)