Skip to content

Commit 8c3a3fa

Browse files
agcolomscottgonzalez
agcolom
authored and
scottgonzalez
committed
Code indentation and formatting (q and r entries plus password-selector)
1 parent 0526923 commit 8c3a3fa

14 files changed

+521
-319
lines changed

‎entries/password-selector.xml

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</signature>
88
<desc>Selects all elements of type password.</desc>
99
<longdesc>
10-
<p><code>$( ":password" )</code> is equivalent to <code>$( "[type=password]" )</code>. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$( ":password" )</code> is equivalent to <code>$( "*:password" )</code>, so <code>$( "input:password" )</code> should be used instead. </p>
10+
<p><code>$( ":password" )</code> is equivalent to <code>$( "[type=password]" )</code>. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ( "*" ) is implied. In other words, the bare <code>$( ":password" )</code> is equivalent to <code>$( "*:password" )</code>, so <code>$( "input:password" )</code> should be used instead. </p>
1111
</longdesc>
1212
<note id="jquery-selector-extension-alt" type="additional" data-selector=":password" data-alt="[type=&quot;password&quot;]"/>
1313
<example>
@@ -17,7 +17,6 @@ var input = $( "input:password" ).css({
1717
background: "yellow",
1818
border: "3px red solid"
1919
});
20-
2120
$( "div" )
2221
.text( "For this type jQuery found " + input.length + "." )
2322
.css( "color", "red" );

‎entries/queue.xml

+125-77
Original file line numberDiff line numberDiff line change
@@ -14,36 +14,50 @@
1414
<example>
1515
<desc>Show the length of the queue.</desc>
1616
<code><![CDATA[
17-
var div = $("div");
17+
var div = $( "div" );
1818
1919
function runIt() {
20-
div.show("slow");
21-
div.animate({left:'+=200'},2000);
22-
div.slideToggle(1000);
23-
div.slideToggle("fast");
24-
div.animate({left:'-=200'},1500);
25-
div.hide("slow");
26-
div.show(1200);
27-
div.slideUp("normal", runIt);
20+
div.show( "slow" );
21+
div.animate({ left: "+=200" }, 2000 );
22+
div.slideToggle( 1000 );
23+
div.slideToggle( "fast" );
24+
div.animate({ left: "-=200" }, 1500 );
25+
div.hide( "slow" );
26+
div.show( 1200 );
27+
div.slideUp( "normal", runIt );
2828
}
2929
3030
function showIt() {
31-
var n = div.queue("fx");
32-
$("span").text( n.length );
33-
setTimeout(showIt, 100);
31+
var n = div.queue( "fx" );
32+
$( "span" ).text( n.length );
33+
setTimeout( showIt, 100 );
3434
}
3535
3636
runIt();
3737
showIt();
3838
]]></code>
39-
<css><![CDATA[div { margin:3px; width:40px; height:40px;
40-
position:absolute; left:0px; top:60px;
41-
background:green; display:none; }
42-
div.newcolor { background:blue; }
43-
p { color:red; } ]]></css>
39+
<css><![CDATA[
40+
div {
41+
margin: 3px;
42+
width: 40px;
43+
height: 40px;
44+
position: absolute;
45+
left: 0px;
46+
top: 60px;
47+
background: green;
48+
display: none;
49+
}
50+
div.newcolor {
51+
background: blue;
52+
}
53+
p {
54+
color: red;
55+
}
56+
]]></css>
4457
<html><![CDATA[
45-
<p>The queue length is: <span></span></p>
46-
<div></div>]]></html>
58+
<p>The queue length is: <span></span></p>
59+
<div></div>
60+
]]></html>
4761
</example>
4862
<category slug="effects/custom-effects"/>
4963
<category slug="data"/>
@@ -72,80 +86,114 @@ showIt();
7286
<desc>Manipulate the queue of functions to be executed, once for each matched element.</desc>
7387
<longdesc>
7488
<p>Every element can have one to many queues of functions attached to it by jQuery. In most applications, only one queue (called <code>fx</code>) is used. Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. The typical example of this is calling multiple animation methods on an element. For example:</p>
75-
<pre><code>$('#foo').slideUp().fadeIn();</code></pre>
89+
<pre><code>
90+
$( "#foo" ).slideUp().fadeIn();
91+
</code></pre>
7692
<p>When this statement is executed, the element begins its sliding animation immediately, but the fading transition is placed on the <code>fx</code> queue to be called only once the sliding transition is complete.</p>
7793
<p>The <code>.queue()</code> method allows us to directly manipulate this queue of functions. Calling <code>.queue()</code> with a callback is particularly useful; it allows us to place a new function at the end of the queue. The callback function is executed once for each element in the jQuery set.</p>
7894
<p>This feature is similar to providing a callback function with an animation method, but does not require the callback to be given at the time the animation is performed.</p>
79-
<pre><code>$('#foo').slideUp();
80-
$('#foo').queue(function() {
81-
alert('Animation complete.');
82-
$(this).dequeue();
83-
});</code></pre>
95+
<pre><code>
96+
$( "#foo" ).slideUp();
97+
$( "#foo" ).queue(function() {
98+
alert( "Animation complete." );
99+
$( this ).dequeue();
100+
});
101+
</code></pre>
84102
<p>This is equivalent to:</p>
85-
<pre><code>$('#foo').slideUp(function() {
86-
alert('Animation complete.');
87-
});</code></pre>
103+
<pre><code>
104+
$( "#foo" ).slideUp(function() {
105+
alert( "Animation complete." );
106+
});
107+
</code></pre>
88108
<p>Note that when adding a function with <code>.queue()</code>, we should ensure that <code>.dequeue()</code> is eventually called so that the next function in line executes.</p>
89109
<p><strong>As of jQuery 1.4</strong>, the function that's called is passed another function as the first argument. When called, this automatically dequeues the next item and keeps the queue moving. We use it as follows:</p>
90-
<pre><code>$("#test").queue(function(next) {
110+
<pre><code>
111+
$( "#test" ).queue(function( next ) {
91112
// Do some stuff...
92113
next();
93-
});</code></pre>
114+
});
115+
</code></pre>
94116
</longdesc>
95117
<example>
96118
<desc>Queue a custom function.</desc>
97-
<code><![CDATA[$(document.body).click(function () {
98-
$("div").show("slow");
99-
$("div").animate({left:'+=200'},2000);
100-
$("div").queue(function () {
101-
$(this).addClass("newcolor");
102-
$(this).dequeue();
103-
});
104-
$("div").animate({left:'-=200'},500);
105-
$("div").queue(function () {
106-
$(this).removeClass("newcolor");
107-
$(this).dequeue();
108-
});
109-
$("div").slideUp();
110-
});]]></code>
119+
<code><![CDATA[
120+
$( document.body ).click(function() {
121+
$( "div" ).show( "slow" );
122+
$( "div" ).animate({ left: "+=200" }, 2000 );
123+
$( "div" ).queue(function() {
124+
$( this ).addClass( "newcolor" );
125+
$( this ).dequeue();
126+
});
127+
$ ( "div" ).animate({ left: "-=200" }, 500 );
128+
$( "div" ).queue(function() {
129+
$( this ).removeClass( "newcolor" );
130+
$( this ).dequeue();
131+
});
132+
$( "div" ).slideUp();
133+
});
134+
]]></code>
111135
<css><![CDATA[
112-
div { margin:3px; width:40px; height:40px;
113-
position:absolute; left:0px; top:30px;
114-
background:green; display:none; }
115-
div.newcolor { background:blue; }
116-
]]></css>
117-
<html><![CDATA[Click here...
118-
<div></div>]]></html>
136+
div {
137+
margin: 3px;
138+
width: 40px;
139+
height: 40px;
140+
position: absolute;
141+
left: 0px;
142+
top: 30px;
143+
background: green;
144+
display: none;
145+
}
146+
div.newcolor {
147+
background: blue;
148+
}
149+
]]></css>
150+
<html><![CDATA[
151+
Click here...
152+
<div></div>
153+
]]></html>
119154
</example>
120155
<example>
121156
<desc>Set a queue array to delete the queue.</desc>
122-
<code><![CDATA[$("#start").click(function () {
123-
$("div").show("slow");
124-
$("div").animate({left:'+=200'},5000);
125-
$("div").queue(function () {
126-
$(this).addClass("newcolor");
127-
$(this).dequeue();
128-
});
129-
$("div").animate({left:'-=200'},1500);
130-
$("div").queue(function () {
131-
$(this).removeClass("newcolor");
132-
$(this).dequeue();
133-
});
134-
$("div").slideUp();
135-
});
136-
$("#stop").click(function () {
137-
$("div").queue("fx", []);
138-
$("div").stop();
139-
});]]></code>
157+
<code><![CDATA[
158+
$( "#start" ).click(function() {
159+
$( "div" ).show( "slow ");
160+
$( "div" ).animate({ left: "+=200" }, 5000 );
161+
$( "div" ).queue(function() {
162+
$( this ).addClass( "newcolor" );
163+
$( this ).dequeue();
164+
});
165+
$( "div" ).animate({ left: '-=200' }, 1500 );
166+
$( "div" ).queue(function() {
167+
$( this ).removeClass( "newcolor" );
168+
$( this ).dequeue();
169+
});
170+
$( "div" ).slideUp();
171+
});
172+
$( "#stop" ).click(function() {
173+
$( "div" ).queue( "fx", [] );
174+
$( "div" ).stop();
175+
});
176+
]]></code>
140177
<css><![CDATA[
141-
div { margin:3px; width:40px; height:40px;
142-
position:absolute; left:0px; top:30px;
143-
background:green; display:none; }
144-
div.newcolor { background:blue; }
145-
]]></css>
146-
<html><![CDATA[<button id="start">Start</button>
147-
<button id="stop">Stop</button>
148-
<div></div>]]></html>
178+
div {
179+
margin: 3px;
180+
width: 40px;
181+
height: 40px;
182+
position: absolute;
183+
left: 0px;
184+
top: 30px;
185+
background: green;
186+
display: none;
187+
}
188+
div.newcolor {
189+
background: blue;
190+
}
191+
]]></css>
192+
<html><![CDATA[
193+
<button id="start">Start</button>
194+
<button id="stop">Stop</button>
195+
<div></div>
196+
]]></html>
149197
</example>
150198
<category slug="effects/custom-effects"/>
151199
<category slug="data"/>

‎entries/radio-selector.xml

+37-32
Original file line numberDiff line numberDiff line change
@@ -7,50 +7,55 @@
77
</signature>
88
<desc>Selects all elements of type radio.</desc>
99
<longdesc>
10-
<p><code>$(':radio')</code> is equivalent to <code>$('[type=radio]')</code>. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':radio')</code> is equivalent to <code>$('*:radio')</code>, so <code>$('input:radio')</code> should be used instead. </p>
11-
<p>To select a set of associated radio buttons, you might use: <code>$('input[name=gender]:radio')</code></p>
10+
<p><code>$( ":radio" )</code> is equivalent to <code>$( "[type=radio]" )</code>. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$( ":radio" )</code> is equivalent to <code>$( "*:radio" )</code>, so <code>$( "input:radio" )</code> should be used instead. </p>
11+
<p>To select a set of associated radio buttons, you might use: <code>$( "input[name=gender]:radio" )</code></p>
1212
</longdesc>
1313
<note id="jquery-selector-extension-alt" type="additional" data-selector=":radio" data-alt="[type=&quot;radio&quot;]"/>
1414
<example>
1515
<desc>Finds all radio inputs.</desc>
1616
<code><![CDATA[
17-
var input = $("form input:radio")
18-
.wrap('<span></span>')
19-
.parent()
20-
.css({background:"yellow", border:"3px red solid"});
17+
var input = $( "form input:radio" )
18+
.wrap( "<span></span>" )
19+
.parent()
20+
.css({
21+
background: "yellow",
22+
border: "3px red solid"
23+
});
2124
22-
$("div").text("For this type jQuery found " + input.length + ".")
23-
.css("color", "red");
24-
$("form").submit(function () { return false; }); // so it won't submit
25+
$("div").text( "For this type jQuery found " + input.length + "." )
26+
.css("color", "red");
27+
$( "form" ).submit(function() {
28+
return false;
29+
}); // So it won't submit
2530
]]></code>
2631
<css><![CDATA[
27-
textarea { height:25px; }
28-
]]></css>
29-
<html><![CDATA[<form>
30-
<input type="button" value="Input Button"/>
31-
<input type="checkbox" />
32-
33-
<input type="file" />
34-
<input type="hidden" />
35-
<input type="image" />
36-
37-
<input type="password" />
38-
<input type="radio" name="asdf" />
39-
<input type="radio" name="asdf" />
40-
41-
<input type="reset" />
42-
<input type="submit" />
43-
<input type="text" />
44-
45-
<select><option>Option<option/></select>
32+
textarea {
33+
height: 25px;
34+
}
35+
]]></css>
36+
<html><![CDATA[
37+
<form>
38+
<input type="button" value="Input Button">
39+
<input type="checkbox">
40+
<input type="file">
41+
<input type="hidden">
42+
<input type="image">
43+
<input type="password">
44+
<input type="radio" name="asdf">
45+
<input type="radio" name="asdf">
46+
<input type="reset">
47+
<input type="submit">
48+
<input type="text">
49+
<select>
50+
<option>Option</option>
51+
</select>
4652
<textarea></textarea>
4753
<button>Button</button>
4854
</form>
49-
50-
<div>
51-
</div>]]></html>
55+
<div></div>
56+
]]></html>
5257
</example>
5358
<category slug="selectors/form-selectors"/>
5459
<category slug="selectors/jquery-selector-extensions"/>
5560
<category slug="version/1.0"/>
56-
</entry>
61+
</entry>

0 commit comments

Comments
 (0)