《jQuery网页开发实例精解》源代码

<ul class="UIAPIPlugin-toc"> <li><a href="#overview">Overview</a></li> <li><a href="#options">Options</a></li> <li><a href="#events">Events</a></li> <li><a href="#methods">Methods</a></li> <li><a href="#theming">Theming</a></li> </ul> <div class="UIAPIPlugin"> <h1>jQuery UI Datepicker</h1> <div id="overview"> <h2 class="top-header">Overview</h2> <div id="overview-main"> <p>The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.</p> <p>By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span. </p><p>You can use keyboard shortcuts to drive the datepicker: </p> <ul> <li>page up/down - previous/next month</li> <li>ctrl+page up/down - previous/next year</li> <li>ctrl+home - current month or open when closed</li> <li>ctrl+left/right - previous/next day</li> <li>ctrl+up/down - previous/next week</li> <li>enter - accept the selected date</li> <li>ctrl+end - close and erase the date</li> <li>escape - close the datepicker without selection</li> </ul> <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=1" title="Edit section: Utility functions">edit</a>]</div><a name="Utility_functions"></a><h3 id="utility-functions">Utility functions</h3> <ul> <li><a href="http://docs.jquery.com/UI/Datepicker/setDefaults" title="UI/Datepicker/setDefaults">$.datepicker.setDefaults( settings )</a> - Set settings for all datepicker instances.</li> <li><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">$.datepicker.formatDate( format, date, settings )</a> - Format a date into a string value with a specified format.</li> <li><a href="http://docs.jquery.com/UI/Datepicker/parseDate" title="UI/Datepicker/parseDate">$.datepicker.parseDate( format, value, settings ) </a> - Extract a date from a string value with a specified format.</li> <li><a href="http://docs.jquery.com/UI/Datepicker/iso8601Week" title="UI/Datepicker/iso8601Week">$.datepicker.iso8601Week( date )</a> - Determine the week of the year for a given date: 1 to 53.</li> <li><a href="http://docs.jquery.com/UI/Datepicker/noWeekends" title="UI/Datepicker/noWeekends">$.datepicker.noWeekends</a> - Set as beforeShowDay function to prevent selection of weekends.</li> </ul> <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=2" title="Edit section: Localization">edit</a>]</div><a name="Localization"></a><h3>Localization</h3> <p>Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. <code>jquery.ui.datepicker-fr.js</code> for French. The desired localization file should be included after the main datepicker code. They add their settings to the set of available localizations and automatically apply them as defaults for all instances.</p> <p>The <code>$.datepicker.regional</code> attribute holds an array of localizations, indexed by language code, with '' referring to the default (English). Each entry is an object with the following attributes: <code>closeText</code>, <code>prevText</code>, <code>nextText</code>, <code>currentText</code>, <code>monthNames</code>, <code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>, <code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>, <code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>, and <code>yearSuffix</code>.</p> <p>You can restore the default localizations with:</p> <p><code>$.datepicker.setDefaults($.datepicker.regional['']);</code> </p> <p>And can then override an individual datepicker for a specific locale:</p> <p><code>$(selector).datepicker($.datepicker.regional['fr']);</code> </p> The localization files are also available in the UI svn: <a href="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/" class="external free" title="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/">http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/</a> </div> <div id="overview-dependencies"> <h3>Dependencies</h3> <ul> <li>UI Core</li> </ul> </div> <div id="overview-example"> <h3>Example</h3> <div id="overview-example" class="example"> <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> <p><div id="demo" class="tabs-container" rel="220"> A simple jQuery UI Datepicker.<br /> </p> <pre>$(&quot;#datepicker&quot;).datepicker(); </pre> <p></div><div id="source" class="tabs-container"> </p> <pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt; &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $(&quot;#datepicker&quot;).datepicker(); }); &lt;/script&gt; &lt;/head&gt; &lt;body style="font-size:62.5%;"&gt; &lt;div id=&quot;datepicker&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p></div> </p><p></div> </div> </div> <div id="options"> <h2 class="top-header">Options</h2> <ul class="options-list"> <li class="option" id="option-disabled"> <div class="option-header"> <h3 class="option-name"><a href="#option-disabled">disabled</a></h3> <dl> <dt class="option-type-label">Type:</dt> <dd class="option-type">Boolean</dd> <dt class="option-default-label">Default:</dt> <dd class="option-default">false</dd> </dl> </div> <div class="option-description"> <p>Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.</p> </div> <div class="option-examples"> <h4>Code examples</h4> <dl class="option-examples-list"> <dt> Initialize a datepicker with the <code>disabled</code> option specified. </dt> <dd> <pre><code>$( ".selector" ).datepicker({ disabled: true });</code></pre> </dd> <dt> Get or set the <code>disabled</code> option, after init. </dt> <dd> <pre><code>//getter var disabled = $( ".selector" ).datepicker( "option", "disabled" ); //setter $( ".selector" ).datepicker( "option", "disabled", true );</code></pre> </dd> </dl> </div> </li> <li class="option" id="option-altField"> <div class="option-header"> <h3 class="option-name"><a href="#option-altField">altField</a></h3> <dl> <dt class="option-type-label">Type:</dt> <dd class="option-type">Selector, jQuery, Element</dd> <dt class="option-default-label">Default:</dt> <dd class="option-default">''</dd> </dl> </div> <div class="option-description"> <p>The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-altFormat" title="UI/Datepicker">altFormat</a></code> setting to change the format of the date within this field. Leave as blank for no alternate field.</p> </div> <div class="option-examples"> <h4>Code examples</h4> <dl class="option-examples-list"> <dt> Initialize a datepicker with the <code>altField</code> option specified. </dt> <dd> <pre><code>$( ".selector" ).datepicker({ altField: '#actualDate' });</c