Navigation Menu

Skip to content

Commit

Permalink
Code indentation and formatting (q and r entries plus password-selector)
Browse files Browse the repository at this point in the history
  • Loading branch information
@agcolom @scottgonzalez
agcolom authored and scottgonzalez committed Sep 14, 2013
1 parent 0526923 commit 8c3a3fa
Show file tree
Hide file tree
Showing 14 changed files with 521 additions and 319 deletions.
3 changes: 1 addition & 2 deletions entries/password-selector.xml
View file
Expand Up @@ -7,7 +7,7 @@
</signature>
<desc>Selects all elements of type password.</desc>
<longdesc>
<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>
<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>
</longdesc>
<note id="jquery-selector-extension-alt" type="additional" data-selector=":password" data-alt="[type=&quot;password&quot;]"/>
<example>
Expand All @@ -17,7 +17,6 @@ var input = $( "input:password" ).css({
background: "yellow",
border: "3px red solid"
});
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
Expand Down
202 changes: 125 additions & 77 deletions entries/queue.xml
View file
Expand Up @@ -14,36 +14,50 @@
<example>
<desc>Show the length of the queue.</desc>
<code><![CDATA[
var div = $("div");
var div = $( "div" );
function runIt() {
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
div.hide("slow");
div.show(1200);
div.slideUp("normal", runIt);
div.show( "slow" );
div.animate({ left: "+=200" }, 2000 );
div.slideToggle( 1000 );
div.slideToggle( "fast" );
div.animate({ left: "-=200" }, 1500 );
div.hide( "slow" );
div.show( 1200 );
div.slideUp( "normal", runIt );
}
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout(showIt, 100);
var n = div.queue( "fx" );
$( "span" ).text( n.length );
setTimeout( showIt, 100 );
}
runIt();
showIt();
]]></code>
<css><![CDATA[div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:60px;
background:green; display:none; }
div.newcolor { background:blue; }
p { color:red; } ]]></css>
<css><![CDATA[
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 60px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
p {
color: red;
}
]]></css>
<html><![CDATA[
<p>The queue length is: <span></span></p>
<div></div>]]></html>
<p>The queue length is: <span></span></p>
<div></div>
]]></html>
</example>
<category slug="effects/custom-effects"/>
<category slug="data"/>
Expand Down Expand Up @@ -72,80 +86,114 @@ showIt();
<desc>Manipulate the queue of functions to be executed, once for each matched element.</desc>
<longdesc>
<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>
<pre><code>$('#foo').slideUp().fadeIn();</code></pre>
<pre><code>
$( "#foo" ).slideUp().fadeIn();
</code></pre>
<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>
<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>
<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>
<pre><code>$('#foo').slideUp();
$('#foo').queue(function() {
alert('Animation complete.');
$(this).dequeue();
});</code></pre>
<pre><code>
$( "#foo" ).slideUp();
$( "#foo" ).queue(function() {
alert( "Animation complete." );
$( this ).dequeue();
});
</code></pre>
<p>This is equivalent to:</p>
<pre><code>$('#foo').slideUp(function() {
alert('Animation complete.');
});</code></pre>
<pre><code>
$( "#foo" ).slideUp(function() {
alert( "Animation complete." );
});
</code></pre>
<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>
<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>
<pre><code>$("#test").queue(function(next) {
<pre><code>
$( "#test" ).queue(function( next ) {
// Do some stuff...
next();
});</code></pre>
});
</code></pre>
</longdesc>
<example>
<desc>Queue a custom function.</desc>
<code><![CDATA[$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});]]></code>
<code><![CDATA[
$( document.body ).click(function() {
$( "div" ).show( "slow" );
$( "div" ).animate({ left: "+=200" }, 2000 );
$( "div" ).queue(function() {
$( this ).addClass( "newcolor" );
$( this ).dequeue();
});
$ ( "div" ).animate({ left: "-=200" }, 500 );
$( "div" ).queue(function() {
$( this ).removeClass( "newcolor" );
$( this ).dequeue();
});
$( "div" ).slideUp();
});
]]></code>
<css><![CDATA[
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
]]></css>
<html><![CDATA[Click here...
<div></div>]]></html>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
]]></css>
<html><![CDATA[
Click here...
<div></div>
]]></html>
</example>
<example>
<desc>Set a queue array to delete the queue.</desc>
<code><![CDATA[$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);
$("div").stop();
});]]></code>
<code><![CDATA[
$( "#start" ).click(function() {
$( "div" ).show( "slow ");
$( "div" ).animate({ left: "+=200" }, 5000 );
$( "div" ).queue(function() {
$( this ).addClass( "newcolor" );
$( this ).dequeue();
});
$( "div" ).animate({ left: '-=200' }, 1500 );
$( "div" ).queue(function() {
$( this ).removeClass( "newcolor" );
$( this ).dequeue();
});
$( "div" ).slideUp();
});
$( "#stop" ).click(function() {
$( "div" ).queue( "fx", [] );
$( "div" ).stop();
});
]]></code>
<css><![CDATA[
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
]]></css>
<html><![CDATA[<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>]]></html>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
]]></css>
<html><![CDATA[
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
]]></html>
</example>
<category slug="effects/custom-effects"/>
<category slug="data"/>
Expand Down
69 changes: 37 additions & 32 deletions entries/radio-selector.xml
View file
Expand Up @@ -7,50 +7,55 @@
</signature>
<desc>Selects all elements of type radio.</desc>
<longdesc>
<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>
<p>To select a set of associated radio buttons, you might use: <code>$('input[name=gender]:radio')</code></p>
<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>
<p>To select a set of associated radio buttons, you might use: <code>$( "input[name=gender]:radio" )</code></p>
</longdesc>
<note id="jquery-selector-extension-alt" type="additional" data-selector=":radio" data-alt="[type=&quot;radio&quot;]"/>
<example>
<desc>Finds all radio inputs.</desc>
<code><![CDATA[
var input = $("form input:radio")
.wrap('<span></span>')
.parent()
.css({background:"yellow", border:"3px red solid"});
var input = $( "form input:radio" )
.wrap( "<span></span>" )
.parent()
.css({
background: "yellow",
border: "3px red solid"
});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
$("div").text( "For this type jQuery found " + input.length + "." )
.css("color", "red");
$( "form" ).submit(function() {
return false;
}); // So it won't submit
]]></code>
<css><![CDATA[
textarea { height:25px; }
]]></css>
<html><![CDATA[<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" name="asdf" />
<input type="radio" name="asdf" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
textarea {
height: 25px;
}
]]></css>
<html><![CDATA[
<form>
<input type="button" value="Input Button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio" name="asdf">
<input type="radio" name="asdf">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
</form>
<div>
</div>]]></html>
<div></div>
]]></html>
</example>
<category slug="selectors/form-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
</entry>
</entry>

0 comments on commit 8c3a3fa

Please sign in to comment.