reinit
This commit is contained in:
Denis Knauf
commit
ced6c67fcc
664 changed files with 115177 additions and 0 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
272
html/jquery-ui-1.10.3.custom/development-bundle/docs/button.html
Normal file
272
html/jquery-ui-1.10.3.custom/development-bundle/docs/button.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,946 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI datepicker documentation</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>{
|
||||
"title":
|
||||
"Datepicker Widget",
|
||||
"excerpt":
|
||||
"Select a date from a popup or inline calendar",
|
||||
"termSlugs": {
|
||||
"category": [
|
||||
"widgets"
|
||||
]
|
||||
}
|
||||
}</script><article id="datepicker1" class="entry widget"><h2 class="section-title">
|
||||
<span>Datepicker Widget</span><span class="version-details">version added: 1.0</span>
|
||||
</h2>
|
||||
<div class="entry-wrapper">
|
||||
<p class="desc"><strong>Description: </strong>Select a date from a popup or inline calendar</p>
|
||||
<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
|
||||
</h2></header><div class="quick-nav-section">
|
||||
<h3>Options</h3>
|
||||
<div><a href="#option-altField">altField</a></div>
|
||||
<div><a href="#option-altFormat">altFormat</a></div>
|
||||
<div><a href="#option-appendText">appendText</a></div>
|
||||
<div><a href="#option-autoSize">autoSize</a></div>
|
||||
<div><a href="#option-buttonImage">buttonImage</a></div>
|
||||
<div><a href="#option-buttonImageOnly">buttonImageOnly</a></div>
|
||||
<div><a href="#option-buttonText">buttonText</a></div>
|
||||
<div><a href="#option-calculateWeek">calculateWeek</a></div>
|
||||
<div><a href="#option-changeMonth">changeMonth</a></div>
|
||||
<div><a href="#option-changeYear">changeYear</a></div>
|
||||
<div><a href="#option-closeText">closeText</a></div>
|
||||
<div><a href="#option-constrainInput">constrainInput</a></div>
|
||||
<div><a href="#option-currentText">currentText</a></div>
|
||||
<div><a href="#option-dateFormat">dateFormat</a></div>
|
||||
<div><a href="#option-dayNames">dayNames</a></div>
|
||||
<div><a href="#option-dayNamesMin">dayNamesMin</a></div>
|
||||
<div><a href="#option-dayNamesShort">dayNamesShort</a></div>
|
||||
<div><a href="#option-defaultDate">defaultDate</a></div>
|
||||
<div><a href="#option-duration">duration</a></div>
|
||||
<div><a href="#option-firstDay">firstDay</a></div>
|
||||
<div><a href="#option-gotoCurrent">gotoCurrent</a></div>
|
||||
<div><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></div>
|
||||
<div><a href="#option-isRTL">isRTL</a></div>
|
||||
<div><a href="#option-maxDate">maxDate</a></div>
|
||||
<div><a href="#option-minDate">minDate</a></div>
|
||||
<div><a href="#option-monthNames">monthNames</a></div>
|
||||
<div><a href="#option-monthNamesShort">monthNamesShort</a></div>
|
||||
<div><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></div>
|
||||
<div><a href="#option-nextText">nextText</a></div>
|
||||
<div><a href="#option-numberOfMonths">numberOfMonths</a></div>
|
||||
<div><a href="#option-prevText">prevText</a></div>
|
||||
<div><a href="#option-selectOtherMonths">selectOtherMonths</a></div>
|
||||
<div><a href="#option-shortYearCutoff">shortYearCutoff</a></div>
|
||||
<div><a href="#option-showAnim">showAnim</a></div>
|
||||
<div><a href="#option-showButtonPanel">showButtonPanel</a></div>
|
||||
<div><a href="#option-showCurrentAtPos">showCurrentAtPos</a></div>
|
||||
<div><a href="#option-showMonthAfterYear">showMonthAfterYear</a></div>
|
||||
<div><a href="#option-showOn">showOn</a></div>
|
||||
<div><a href="#option-showOptions">showOptions</a></div>
|
||||
<div><a href="#option-showOtherMonths">showOtherMonths</a></div>
|
||||
<div><a href="#option-showWeek">showWeek</a></div>
|
||||
<div><a href="#option-stepMonths">stepMonths</a></div>
|
||||
<div><a href="#option-weekHeader">weekHeader</a></div>
|
||||
<div><a href="#option-yearRange">yearRange</a></div>
|
||||
<div><a href="#option-yearSuffix">yearSuffix</a></div>
|
||||
<div><a href="#option-beforeShow">beforeShow</a></div>
|
||||
<div><a href="#option-beforeShowDay">beforeShowDay</a></div>
|
||||
<div><a href="#option-onChangeMonthYear">onChangeMonthYear</a></div>
|
||||
<div><a href="#option-onClose">onClose</a></div>
|
||||
<div><a href="#option-onSelect">onSelect</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section">
|
||||
<h3>Methods</h3>
|
||||
<div><a href="#method-destroy">destroy</a></div>
|
||||
<div><a href="#method-dialog">dialog</a></div>
|
||||
<div><a href="#method-isDisabled">isDisabled</a></div>
|
||||
<div><a href="#method-hide">hide</a></div>
|
||||
<div><a href="#method-show">show</a></div>
|
||||
<div><a href="#method-refresh">refresh</a></div>
|
||||
<div><a href="#method-getDate">getDate</a></div>
|
||||
<div><a href="#method-setDate">setDate</a></div>
|
||||
<div><a href="#method-option">option</a></div>
|
||||
<div><a href="#method-widget">widget</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section"><h3>Events</h3></div></section><div class="longdesc" id="entry-longdesc">
|
||||
<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 when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.</p>
|
||||
|
||||
<h3>Keyboard interaction</h3>
|
||||
<p>While the datepicker is open, the following key commands are available:</p>
|
||||
<ul>
|
||||
<li>PAGE UP: Move to the previous month.</li>
|
||||
<li>PAGE DOWN: Move to the next month.</li>
|
||||
<li>CTRL+PAGE UP: Move to the previous year.</li>
|
||||
<li>CTRL+PAGE DOWN: Move to the next year.</li>
|
||||
<li>CTRL+HOME: Move to the current month. Open the datepicker if closed.</li>
|
||||
<li>CTRL+LEFT: Move to the previous day.</li>
|
||||
<li>CTRL+RIGHT: Move to the next day.</li>
|
||||
<li>CTRL+UP: Move to the previous week.</li>
|
||||
<li>CTRL+DOWN: Move the next week.</li>
|
||||
<li>ENTER: Select the focused date.</li>
|
||||
<li>CTRL+END: Close the datepicker and erase the date.</li>
|
||||
<li>ESCAPE: Close the datepicker without selection.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="utility-functions">Utility functions</h3>
|
||||
<ul>
|
||||
<li>$.datepicker.setDefaults( settings ) - Set settings for all datepicker instances.</li>
|
||||
<li>$.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.</li>
|
||||
<li>$.datepicker.parseDate( format, value, settings ) - Extract a date from a string value with a specified format.</li>
|
||||
<li>$.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53.</li>
|
||||
<li>$.datepicker.noWeekends - Set as beforeShowDay function to prevent selection of weekends.</li>
|
||||
</ul>
|
||||
|
||||
<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. Each localization file adds its settings to the set of available localizations and automatically applies them as defaults for all instances.</p>
|
||||
<p>The <code>$.datepicker.regional</code> attribute holds an array of localizations, indexed by language code, with <code>""</code> 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>
|
||||
<code>$.datepicker.setDefaults( $.datepicker.regional[ "" ] );</code>
|
||||
<p>And can then override an individual datepicker for a specific locale:</p>
|
||||
<code>$( selector ).datepicker( $.datepicker.regional[ "fr" ] );</code>
|
||||
</div>
|
||||
<h3>Additional Notes:</h3>
|
||||
<div class="longdesc"><ul><li>
|
||||
This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
|
||||
</li></ul></div>
|
||||
<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-altField" class="api-item first-item">
|
||||
<h3>altField<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types#Element">Element</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>""</code>
|
||||
</div>
|
||||
<div>An input element that is to be updated with the selected date from the datepicker. Use the <a href="#option-altFormat"><code>altFormat</code></a> option to change the format of the date within this field. Leave as blank for no alternate field.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the altField option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ altField: </code><code class="string">"#actualDate"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the altField option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">altField = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"altField"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"altField"</code><code class="plain">, </code><code class="string">"#actualDate"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-altFormat" class="api-item">
|
||||
<h3>altFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>""</code>
|
||||
</div>
|
||||
<div>The <a href="#option-dateFormat"><code>dateFormat</code></a> to be used for the <a href="#option-altField"><code>altField</code></a> option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the [[UI/Datepicker/formatDate|formatDate]] function</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the altFormat option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ altFormat: </code><code class="string">"yy-mm-dd"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the altFormat option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">altFormat = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"altFormat"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"altFormat"</code><code class="plain">, </code><code class="string">"yy-mm-dd"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-appendText" class="api-item">
|
||||
<h3>appendText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>""</code>
|
||||
</div>
|
||||
<div>The text to display after each date field, e.g., to show the required format.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the appendText option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ appendText: </code><code class="string">"(yyyy-mm-dd)"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the appendText option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">appendText = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"appendText"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"appendText"</code><code class="plain">, </code><code class="string">"(yyyy-mm-dd)"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-autoSize" class="api-item">
|
||||
<h3>autoSize<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Set to <code>true</code> to automatically resize the input field to accommodate dates in the current <a href="#option-dateFormat"><code>dateFormat</code></a>.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the autoSize option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ autoSize: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the autoSize option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">autoSize = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"autoSize"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"autoSize"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-beforeShow" class="api-item">
|
||||
<h3>beforeShow<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Element">Element</a> input, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>A function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.</div>
|
||||
</div>
|
||||
<div id="option-beforeShowDay" class="api-item">
|
||||
<h3>beforeShowDay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Date">Date</a> date )</span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>A function takes a date as a parameter and must return an array with <code>[0]</code> equal to <code>true</code>/<code>false</code> indicating whether or not this date is selectable, <code>[1]</code> equal to a CSS class name or <code>""</code> for the default presentation, and <code>[2]</code> an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.</div>
|
||||
</div>
|
||||
<div id="option-buttonImage" class="api-item">
|
||||
<h3>buttonImage<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>""</code>
|
||||
</div>
|
||||
<div>The URL for the popup button image. If set, the <a href="#option-buttonText"><code>buttonText</code></a> option becomes the <code>alt</code> value and is not directly displayed.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the buttonImage option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ buttonImage: </code><code class="string">"/images/datepicker.gif"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the buttonImage option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">buttonImage = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"buttonImage"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"buttonImage"</code><code class="plain">, </code><code class="string">"/images/datepicker.gif"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-buttonImageOnly" class="api-item">
|
||||
<h3>buttonImageOnly<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether the button image should be rendered by itself instead of inside a button element.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the buttonImageOnly option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ buttonImageOnly: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the buttonImageOnly option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">buttonImageOnly = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"buttonImageOnly"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"buttonImageOnly"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-buttonText" class="api-item">
|
||||
<h3>buttonText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"..."</code>
|
||||
</div>
|
||||
<div>The text to display on the trigger button. Use in conjunction with the <a href="#option-showOn"><code>showOn</code></a> option set to <code>"button"</code> or <code>"both"</code>.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the buttonText option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ buttonText: </code><code class="string">"Choose"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the buttonText option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">buttonText = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"buttonText"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"buttonText"</code><code class="plain">, </code><code class="string">"Choose"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-calculateWeek" class="api-item">
|
||||
<h3>calculateWeek<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>jQuery.datepicker.iso8601Week</code>
|
||||
</div>
|
||||
<div>A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the calculateWeek option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ calculateWeek: myWeekCalc });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the calculateWeek option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">calculateWeek = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"calculateWeek"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"calculateWeek"</code><code class="plain">, myWeekCalc );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-changeMonth" class="api-item">
|
||||
<h3>changeMonth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether the month should be rendered as a dropdown instead of text.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the changeMonth option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ changeMonth: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the changeMonth option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">changeMonth = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"changeMonth"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"changeMonth"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-changeYear" class="api-item">
|
||||
<h3>changeYear<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether the year should be rendered as a dropdown instead of text. Use the <a href="#option-yearRange"><code>yearRange</code></a> option to control which years are made available for selection.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the changeYear option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ changeYear: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the changeYear option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">changeYear = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"changeYear"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"changeYear"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-closeText" class="api-item">
|
||||
<h3>closeText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"Done"</code>
|
||||
</div>
|
||||
<div>The text to display for the close link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the closeText option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ closeText: </code><code class="string">"Close"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the closeText option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">closeText = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"closeText"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"closeText"</code><code class="plain">, </code><code class="string">"Close"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-constrainInput" class="api-item">
|
||||
<h3>constrainInput<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>true</code>
|
||||
</div>
|
||||
<div>When <code>true</code>, entry in the input field is constrained to those characters allowed by the current <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the constrainInput option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ constrainInput: </code><code class="keyword">false</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the constrainInput option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">constrainInput = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"constrainInput"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"constrainInput"</code><code class="plain">, </code><code class="keyword">false</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-currentText" class="api-item">
|
||||
<h3>currentText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"Today"</code>
|
||||
</div>
|
||||
<div>The text to display for the current day link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the currentText option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ currentText: </code><code class="string">"Now"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the currentText option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">currentText = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"currentText"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"currentText"</code><code class="plain">, </code><code class="string">"Now"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-dateFormat" class="api-item">
|
||||
<h3>dateFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"mm/dd/yy"</code>
|
||||
</div>
|
||||
<div>The format for parsed and displayed dates. For a full list of the possible formats see the <code>[[UI/Datepicker/formatDate|formatDate]]</code> function.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the dateFormat option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ dateFormat: </code><code class="string">"yy-mm-dd"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the dateFormat option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">dateFormat = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dateFormat"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dateFormat"</code><code class="plain">, </code><code class="string">"yy-mm-dd"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-dayNames" class="api-item">
|
||||
<h3>dayNames<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</code>
|
||||
</div>
|
||||
<div>The list of long day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the dayNames option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ dayNames: [ </code><code class="string">"Dimanche"</code><code class="plain">, </code><code class="string">"Lundi"</code><code class="plain">, </code><code class="string">"Mardi"</code><code class="plain">, </code><code class="string">"Mercredi"</code><code class="plain">, </code><code class="string">"Jeudi"</code><code class="plain">, </code><code class="string">"Vendredi"</code><code class="plain">, </code><code class="string">"Samedi"</code> <code class="plain">] });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the dayNames option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">dayNames = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dayNames"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dayNames"</code><code class="plain">, [ </code><code class="string">"Dimanche"</code><code class="plain">, </code><code class="string">"Lundi"</code><code class="plain">, </code><code class="string">"Mardi"</code><code class="plain">, </code><code class="string">"Mercredi"</code><code class="plain">, </code><code class="string">"Jeudi"</code><code class="plain">, </code><code class="string">"Vendredi"</code><code class="plain">, </code><code class="string">"Samedi"</code> <code class="plain">] );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-dayNamesMin" class="api-item">
|
||||
<h3>dayNamesMin<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]</code>
|
||||
</div>
|
||||
<div>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the dayNamesMin option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ dayNamesMin: [ </code><code class="string">"Di"</code><code class="plain">, </code><code class="string">"Lu"</code><code class="plain">, </code><code class="string">"Ma"</code><code class="plain">, </code><code class="string">"Me"</code><code class="plain">, </code><code class="string">"Je"</code><code class="plain">, </code><code class="string">"Ve"</code><code class="plain">, </code><code class="string">"Sa"</code> <code class="plain">] });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the dayNamesMin option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">dayNamesMin = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dayNamesMin"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dayNamesMin"</code><code class="plain">, [ </code><code class="string">"Di"</code><code class="plain">, </code><code class="string">"Lu"</code><code class="plain">, </code><code class="string">"Ma"</code><code class="plain">, </code><code class="string">"Me"</code><code class="plain">, </code><code class="string">"Je"</code><code class="plain">, </code><code class="string">"Ve"</code><code class="plain">, </code><code class="string">"Sa"</code> <code class="plain">] );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-dayNamesShort" class="api-item">
|
||||
<h3>dayNamesShort<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]</code>
|
||||
</div>
|
||||
<div>The list of abbreviated day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the dayNamesShort option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ dayNamesShort: [ </code><code class="string">"Dim"</code><code class="plain">, </code><code class="string">"Lun"</code><code class="plain">, </code><code class="string">"Mar"</code><code class="plain">, </code><code class="string">"Mer"</code><code class="plain">, </code><code class="string">"Jeu"</code><code class="plain">, </code><code class="string">"Ven"</code><code class="plain">, </code><code class="string">"Sam"</code> <code class="plain">] });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the dayNamesShort option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">dayNamesShort = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dayNamesShort"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dayNamesShort"</code><code class="plain">, [ </code><code class="string">"Dim"</code><code class="plain">, </code><code class="string">"Lun"</code><code class="plain">, </code><code class="string">"Mar"</code><code class="plain">, </code><code class="string">"Mer"</code><code class="plain">, </code><code class="string">"Jeu"</code><code class="plain">, </code><code class="string">"Ven"</code><code class="plain">, </code><code class="string">"Sam"</code> <code class="plain">] );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-defaultDate" class="api-item">
|
||||
<h3>defaultDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Date">Date</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Date</strong>: A date object containing the default date.</li>
|
||||
<li>
|
||||
<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li>
|
||||
<li>
|
||||
<strong>String</strong>: A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the defaultDate option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ defaultDate: +7 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the defaultDate option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">defaultDate = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"defaultDate"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"defaultDate"</code><code class="plain">, +7 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-duration" class="api-item">
|
||||
<h3>duration<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#"></a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"normal"</code>
|
||||
</div>
|
||||
<div>Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the duration option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ duration: </code><code class="string">"slow"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the duration option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">duration = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"duration"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"duration"</code><code class="plain">, </code><code class="string">"slow"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-firstDay" class="api-item">
|
||||
<h3>firstDay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Integer">Integer</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>0</code>
|
||||
</div>
|
||||
<div>Set the first day of the week: Sunday is <code>0</code>, Monday is <code>1</code>, etc.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the firstDay option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ firstDay: 1 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the firstDay option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">firstDay = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"firstDay"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"firstDay"</code><code class="plain">, 1 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-gotoCurrent" class="api-item">
|
||||
<h3>gotoCurrent<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>When <code>true</code>, the current day link moves to the currently selected date instead of today.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the gotoCurrent option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ gotoCurrent: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the gotoCurrent option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">gotoCurrent = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"gotoCurrent"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"gotoCurrent"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-hideIfNoPrevNext" class="api-item">
|
||||
<h3>hideIfNoPrevNext<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Normally the previous and next links are disabled when not applicable (see the <a href="#option-minDate"><code>minDate</code></a> and <a href="#option-maxDate"><code>maxDate</code></a> options). You can hide them altogether by setting this attribute to <code>true</code>.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the hideIfNoPrevNext option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ hideIfNoPrevNext: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the hideIfNoPrevNext option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">hideIfNoPrevNext = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"hideIfNoPrevNext"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"hideIfNoPrevNext"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-isRTL" class="api-item">
|
||||
<h3>isRTL<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether the current language is drawn from right to left.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the isRTL option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ isRTL: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the isRTL option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">isRTL = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"isRTL"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"isRTL"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-maxDate" class="api-item">
|
||||
<h3>maxDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Date">Date</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>The maximum selectable date. When set to <code>null</code>, there is no maximum.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Date</strong>: A date object containing the maximum date.</li>
|
||||
<li>
|
||||
<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li>
|
||||
<li>
|
||||
<strong>String</strong>: A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the maxDate option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ maxDate: </code><code class="string">"+1m +1w"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the maxDate option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">maxDate = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"maxDate"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"maxDate"</code><code class="plain">, </code><code class="string">"+1m +1w"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-minDate" class="api-item">
|
||||
<h3>minDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Date">Date</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>The minimum selectable date. When set to <code>null</code>, there is no minimum.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Date</strong>: A date object containing the minimum date.</li>
|
||||
<li>
|
||||
<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li>
|
||||
<li>
|
||||
<strong>String</strong>: A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the minDate option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ minDate: </code><code class="keyword">new</code> <code class="plain">Date(2007, 1 - 1, 1) });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the minDate option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">minDate = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"minDate"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"minDate"</code><code class="plain">, </code><code class="keyword">new</code> <code class="plain">Date(2007, 1 - 1, 1) );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-monthNames" class="api-item">
|
||||
<h3>monthNames<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]</code>
|
||||
</div>
|
||||
<div>The list of full month names, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the monthNames option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ monthNames: [ </code><code class="string">"Januar"</code><code class="plain">, </code><code class="string">"Februar"</code><code class="plain">, </code><code class="string">"Marts"</code><code class="plain">, </code><code class="string">"April"</code><code class="plain">, </code><code class="string">"Maj"</code><code class="plain">, </code><code class="string">"Juni"</code><code class="plain">, </code><code class="string">"Juli"</code><code class="plain">, </code><code class="string">"August"</code><code class="plain">, </code><code class="string">"September"</code><code class="plain">, </code><code class="string">"Oktober"</code><code class="plain">, </code><code class="string">"November"</code><code class="plain">, </code><code class="string">"December"</code> <code class="plain">] });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the monthNames option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">monthNames = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"monthNames"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"monthNames"</code><code class="plain">, [ </code><code class="string">"Januar"</code><code class="plain">, </code><code class="string">"Februar"</code><code class="plain">, </code><code class="string">"Marts"</code><code class="plain">, </code><code class="string">"April"</code><code class="plain">, </code><code class="string">"Maj"</code><code class="plain">, </code><code class="string">"Juni"</code><code class="plain">, </code><code class="string">"Juli"</code><code class="plain">, </code><code class="string">"August"</code><code class="plain">, </code><code class="string">"September"</code><code class="plain">, </code><code class="string">"Oktober"</code><code class="plain">, </code><code class="string">"November"</code><code class="plain">, </code><code class="string">"December"</code> <code class="plain">] );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-monthNamesShort" class="api-item">
|
||||
<h3>monthNamesShort<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</code>
|
||||
</div>
|
||||
<div>The list of abbreviated month names, as used in the month header on each datepicker and as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the monthNamesShort option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ monthNamesShort: [ </code><code class="string">"Jan"</code><code class="plain">, </code><code class="string">"Feb"</code><code class="plain">, </code><code class="string">"Mar"</code><code class="plain">, </code><code class="string">"Apr"</code><code class="plain">, </code><code class="string">"Maj"</code><code class="plain">, </code><code class="string">"Jun"</code><code class="plain">, </code><code class="string">"Jul"</code><code class="plain">, </code><code class="string">"Aug"</code><code class="plain">, </code><code class="string">"Sep"</code><code class="plain">, </code><code class="string">"Okt"</code><code class="plain">, </code><code class="string">"Nov"</code><code class="plain">, </code><code class="string">"Dec"</code> <code class="plain">] });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the monthNamesShort option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">monthNamesShort = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"monthNamesShort"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"monthNamesShort"</code><code class="plain">, [ </code><code class="string">"Jan"</code><code class="plain">, </code><code class="string">"Feb"</code><code class="plain">, </code><code class="string">"Mar"</code><code class="plain">, </code><code class="string">"Apr"</code><code class="plain">, </code><code class="string">"Maj"</code><code class="plain">, </code><code class="string">"Jun"</code><code class="plain">, </code><code class="string">"Jul"</code><code class="plain">, </code><code class="string">"Aug"</code><code class="plain">, </code><code class="string">"Sep"</code><code class="plain">, </code><code class="string">"Okt"</code><code class="plain">, </code><code class="string">"Nov"</code><code class="plain">, </code><code class="string">"Dec"</code> <code class="plain">] );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-navigationAsDateFormat" class="api-item">
|
||||
<h3>navigationAsDateFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether the <a href="#option-prevText"><code>prevText</code></a> and <a href="#option-nextText"><code>nextText</code></a> options should be parsed as dates by the <code>[[UI/Datepicker/formatDate|formatDate]]</code> function, allowing them to display the target month names for example.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the navigationAsDateFormat option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ navigationAsDateFormat: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the navigationAsDateFormat option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">navigationAsDateFormat = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"navigationAsDateFormat"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"navigationAsDateFormat"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-nextText" class="api-item">
|
||||
<h3>nextText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"Next"</code>
|
||||
</div>
|
||||
<div>The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the nextText option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ nextText: </code><code class="string">"Later"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the nextText option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">nextText = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"nextText"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"nextText"</code><code class="plain">, </code><code class="string">"Later"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-numberOfMonths" class="api-item">
|
||||
<h3>numberOfMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#Array">Array</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>1</code>
|
||||
</div>
|
||||
<div>The number of months to show at once.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Number</strong>: The number of months to display in a single row.</li>
|
||||
<li>
|
||||
<strong>Array</strong>: An array defining the number of rows and columns to display.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the numberOfMonths option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ numberOfMonths: [ 2, 3 ] });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the numberOfMonths option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">numberOfMonths = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"numberOfMonths"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"numberOfMonths"</code><code class="plain">, [ 2, 3 ] );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-onChangeMonthYear" class="api-item">
|
||||
<h3>onChangeMonthYear<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Integer">Integer</a> year, <a href="http://api.jquery.com/Types#Integer">Integer</a> month, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</div>
|
||||
</div>
|
||||
<div id="option-onClose" class="api-item">
|
||||
<h3>onClose<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#String">String</a> dateText, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>Called when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text (<code>""</code> if none) and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</div>
|
||||
</div>
|
||||
<div id="option-onSelect" class="api-item">
|
||||
<h3>onSelect<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#String">String</a> dateText, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</div>
|
||||
</div>
|
||||
<div id="option-prevText" class="api-item">
|
||||
<h3>prevText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"Prev"</code>
|
||||
</div>
|
||||
<div>The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the prevText option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ prevText: </code><code class="string">"Earlier"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the prevText option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">prevText = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"prevText"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"prevText"</code><code class="plain">, </code><code class="string">"Earlier"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-selectOtherMonths" class="api-item">
|
||||
<h3>selectOtherMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether days in other months shown before or after the current month are selectable. This only applies if the <a href="#option-showOtherMonths"><code>showOtherMonths</code></a> option is set to <code>true</code>.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the selectOtherMonths option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ selectOtherMonths: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the selectOtherMonths option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">selectOtherMonths = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"selectOtherMonths"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"selectOtherMonths"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-shortYearCutoff" class="api-item">
|
||||
<h3>shortYearCutoff<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"+10"</code>
|
||||
</div>
|
||||
<div>The cutoff year for determining the century for a date (used in conjunction with <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> 'y'). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Number</strong>: A value between <code>0</code> and <code>99</code> indicating the cutoff year.</li>
|
||||
<li>
|
||||
<strong>String</strong>: A relative number of years from the current year, e.g., <code>"+3"</code> or <code>"-5"</code>.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the shortYearCutoff option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ shortYearCutoff: 50 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the shortYearCutoff option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">shortYearCutoff = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"shortYearCutoff"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"shortYearCutoff"</code><code class="plain">, 50 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showAnim" class="api-item">
|
||||
<h3>showAnim<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"show"</code>
|
||||
</div>
|
||||
<div>The name of the animation used to show and hide the datepicker. Use <code>"show"</code> (the default), <code>"slideDown"</code>, <code>"fadeIn"</code>, any of the <a href="/category/effects/">jQuery UI effects</a>. Set to an empty string to disable animation.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showAnim option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showAnim: </code><code class="string">"fold"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showAnim option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showAnim = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showAnim"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showAnim"</code><code class="plain">, </code><code class="string">"fold"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showButtonPanel" class="api-item">
|
||||
<h3>showButtonPanel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether to show the button panel.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showButtonPanel option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showButtonPanel: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showButtonPanel option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showButtonPanel = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showButtonPanel"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showButtonPanel"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showCurrentAtPos" class="api-item">
|
||||
<h3>showCurrentAtPos<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>0</code>
|
||||
</div>
|
||||
<div>When displaying multiple months via the <a href="#option-numberOfMonths"><code>numberOfMonths</code></a> option, the <code>showCurrentAtPos</code> option defines which position to display the current month in.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showCurrentAtPos option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showCurrentAtPos: 3 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showCurrentAtPos option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showCurrentAtPos = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showCurrentAtPos"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showCurrentAtPos"</code><code class="plain">, 3 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showMonthAfterYear" class="api-item">
|
||||
<h3>showMonthAfterYear<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether to show the month after the year in the header.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showMonthAfterYear option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showMonthAfterYear: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showMonthAfterYear option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showMonthAfterYear = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showMonthAfterYear"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showMonthAfterYear"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showOn" class="api-item">
|
||||
<h3>showOn<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"focus"</code>
|
||||
</div>
|
||||
<div>When the datepicker should appear. The datepicker can appear when the field receives focus (<code>"focus"</code>), when a button is clicked (<code>"button"</code>), or when either event occurs (<code>"both"</code>).</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showOn option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showOn: </code><code class="string">"both"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showOn option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showOn = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showOn"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showOn"</code><code class="plain">, </code><code class="string">"both"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showOptions" class="api-item">
|
||||
<h3>showOptions<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>{}</code>
|
||||
</div>
|
||||
<div>If using one of the jQuery UI effects for the <a href="#option-showAnim"><code>showAnim</code></a> option, you can provide additional settings for that animation via this option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showOptions option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showOptions: { direction: </code><code class="string">"up"</code> <code class="plain">} });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showOptions option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showOptions = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showOptions"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showOptions"</code><code class="plain">, { direction: </code><code class="string">"up"</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showOtherMonths" class="api-item">
|
||||
<h3>showOtherMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the <a href="#option-selectOtherMonths"><code>selectOtherMonths</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showOtherMonths option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showOtherMonths: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showOtherMonths option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showOtherMonths = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showOtherMonths"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showOtherMonths"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-showWeek" class="api-item">
|
||||
<h3>showWeek<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>When <code>true</code>, a column is added to show the week of the year. The <a href="#option-calculateWeek"><code>calculateWeek</code></a> option determines how the week of the year is calculated. You may also want to change the <a href="#option-firstDay"><code>firstDay</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the showWeek option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ showWeek: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the showWeek option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">showWeek = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showWeek"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"showWeek"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-stepMonths" class="api-item">
|
||||
<h3>stepMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>1</code>
|
||||
</div>
|
||||
<div>Set how many months to move when clicking the previous/next links.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the stepMonths option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ stepMonths: 3 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the stepMonths option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">stepMonths = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"stepMonths"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"stepMonths"</code><code class="plain">, 3 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-weekHeader" class="api-item">
|
||||
<h3>weekHeader<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"Wk"</code>
|
||||
</div>
|
||||
<div>The text to display for the week of the year column heading. Use the <a href="#option-showWeek"><code>showWeek</code></a> option to display this column.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the weekHeader option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ weekHeader: </code><code class="string">"W"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the weekHeader option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">weekHeader = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"weekHeader"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"weekHeader"</code><code class="plain">, </code><code class="string">"W"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-yearRange" class="api-item">
|
||||
<h3>yearRange<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"c-10:c+10"</code>
|
||||
</div>
|
||||
<div>The range of years displayed in the year drop-down: either relative to today's year (<code>"-nn:+nn"</code>), relative to the currently selected year (<code>"c-nn:c+nn"</code>), absolute (<code>"nnnn:nnnn"</code>), or combinations of these formats (<code>"nnnn:-nn"</code>). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <a href="#option-minDate"><code>minDate</code></a> and/or <a href="#option-maxDate"><code>maxDate</code></a> options.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the yearRange option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ yearRange: </code><code class="string">"2002:2012"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the yearRange option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">yearRange = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"yearRange"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"yearRange"</code><code class="plain">, </code><code class="string">"2002:2012"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-yearSuffix" class="api-item">
|
||||
<h3>yearSuffix<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>""</code>
|
||||
</div>
|
||||
<div>Additional text to display after the year in the month headers.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the datepicker with the yearSuffix option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker({ yearSuffix: </code><code class="string">"CE"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the yearSuffix option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">yearSuffix = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"yearSuffix"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"yearSuffix"</code><code class="plain">, </code><code class="string">"CE"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
|
||||
<h3>destroy()</h3>
|
||||
<div>
|
||||
Removes the datepicker functionality completely. This will return the element back to its pre-init state.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the destroy method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"destroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-dialog"><div class="api-item">
|
||||
<h3>dialog( date [, onSelect ] [, settings ] [, pos ] )</h3>
|
||||
<div>Opens the datepicker in a dialog box.</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>date</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types#Date">Date</a>
|
||||
</div>
|
||||
<div>The initial date.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>onSelect</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
|
||||
<div>A callback function when a date is selected. The function receives the date text and date picker instance as parameters.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>settings</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Options">Options</a>
|
||||
</div>
|
||||
<div>The new settings for the date picker.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>pos</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number%5B2%5D%20or%20MouseEvent">Number[2] or MouseEvent</a>
|
||||
</div>
|
||||
<div>The position of the top/left of the dialog as <code>[x, y]</code> or a <code>MouseEvent</code> that contains the coordinates. If not specified the dialog is centered on the screen.</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the dialog method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"dialog"</code><code class="plain">, </code><code class="string">"10/12/2012"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-getDate"><div class="api-item">
|
||||
<h3>getDate()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Date">Date</a></span>
|
||||
</h3>
|
||||
<div>Returns the current date for the datepicker or <code>null</code> if no date has been selected.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the getDate method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">currentDate = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"getDate"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-hide"><div class="api-item">
|
||||
<h3>hide()</h3>
|
||||
<div>Close a previously opened date picker.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the hide method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"hide"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-isDisabled"><div class="api-item">
|
||||
<h3>isDisabled()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div>Determine whether a date picker has been disabled.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the isDisabled method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"isDisabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-option">
|
||||
<div class="api-item">
|
||||
<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
|
||||
<ul><li>
|
||||
<div><strong>optionName</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the option to get.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
|
||||
</h3>
|
||||
<div>Gets an object containing key/value pairs representing the current datepicker options hash.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">options = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option( optionName, value )</h3>
|
||||
<div>Sets the value of the datepicker option associated with the specified <code>optionName</code>.</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>optionName</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the option to set.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>value</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A value to set for the option.</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option( options )</h3>
|
||||
<div>Sets one or more options for the datepicker.</div>
|
||||
<ul><li>
|
||||
<div><strong>options</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A map of option-value pairs to set.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"option"</code><code class="plain">, { disabled: </code><code class="keyword">true</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="method-refresh"><div class="api-item">
|
||||
<h3>refresh()</h3>
|
||||
<div>Redraw the date picker, after having made some external modifications.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the refresh method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"refresh"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-setDate"><div class="api-item">
|
||||
<h3>setDate( date )</h3>
|
||||
<div>Sets the date for the datepicker. The new date may be a <code>Date</code> object or a string in the current <a href="#option-dateFormat">date format</a> (e.g., <code>"01/26/2009"</code>), a number of days from today (e.g., <code>+7</code>) or a string of values and periods (<code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, <code>"d"</code> for days, e.g., <code>"+1m +7d"</code>), or <code>null</code> to clear the selected date.</div>
|
||||
<ul><li>
|
||||
<div><strong>date</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types#Date">Date</a>
|
||||
</div>
|
||||
<div>The new date.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the setDate method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"setDate"</code><code class="plain">, </code><code class="string">"10/12/2012"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-show"><div class="api-item">
|
||||
<h3>show()</h3>
|
||||
<div>Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the show method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"show"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-widget"><div class="api-item">
|
||||
<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Returns a <code>jQuery</code> object containing the datepicker.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the widget method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">widget = $( </code><code class="string">".selector"</code> <code class="plain">).datepicker( </code><code class="string">"widget"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div></section><section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
|
||||
<h4><span class="desc">A simple jQuery UI Datepicker.</span></h4>
|
||||
<div class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain"><!doctype html></code></div><div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">></code></div><div class="line number3 index2 alt2"><code class="plain"><</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">></code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">>datepicker demo</</code><code class="keyword">title</code><code class="plain">></code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css</a>"</code><code class="plain">></code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.3.js">http://code.jquery.com/jquery-1.8.3.js</a>"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/jquery-ui.js">http://code.jquery.com/ui/1.9.2/jquery-ui.js</a>"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number9 index8 alt2"><code class="plain"></</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number10 index9 alt1"><code class="plain"><</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number11 index10 alt2"> </div><div class="line number12 index11 alt1"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"datepicker"</code><code class="plain">></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number13 index12 alt2"> </div><div class="line number14 index13 alt1"><code class="plain"><</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number15 index14 alt2"><code class="plain">$( "#datepicker" ).datepicker();</code></div><div class="line number16 index15 alt1"><code class="plain"></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number17 index16 alt2"> </div><div class="line number18 index17 alt1"><code class="plain"></</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number19 index18 alt2"><code class="plain"></</code><code class="keyword">html</code><code class="plain">></code></div></div></td></tr></tbody></table></div>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo" data-height="300"></div>
|
||||
</div></section>
|
||||
</div></article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
892
html/jquery-ui-1.10.3.custom/development-bundle/docs/dialog.html
Normal file
892
html/jquery-ui-1.10.3.custom/development-bundle/docs/dialog.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,611 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI jQuery documentation</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>{
|
||||
"title":
|
||||
"Widget Factory",
|
||||
"excerpt":
|
||||
"Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.",
|
||||
"termSlugs": {
|
||||
"category": [
|
||||
"utilities","utilities","widgets"
|
||||
]
|
||||
}
|
||||
}</script><div class="toc">
|
||||
<h4><span>Contents:</span></h4>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#jQuery-widget1">jQuery.widget( name [, base ], prototype )</a><ul><li>jQuery.widget( name [, base ], prototype )</li></ul>
|
||||
</li>
|
||||
<li><a href="#jQuery-Widget2">jQuery.Widget</a></li>
|
||||
</ul>
|
||||
</div><article id="jQuery-widget1" class="entry method"><h2 class="section-title"><span class="name">jQuery.widget( name [, base ], prototype )</span></h2>
|
||||
<div class="entry-wrapper">
|
||||
<p class="desc"><strong>Description: </strong>Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.</p>
|
||||
<ul class="signatures"><li class="signature" id="jQuery-widget-name-base-prototype">
|
||||
<h4 class="name">jQuery.widget( name [, base ], prototype )</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>name</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the widget to create, including the namespace.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>base</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
|
||||
<div>The base widget to inherit from. This must be a constructor that can be instantiated with the `new` keyword. Defaults to <code>jQuery.Widget</code>.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>prototype</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#PlainObject">PlainObject</a>
|
||||
</div>
|
||||
<div>The object to use as a prototype for the widget.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li></ul>
|
||||
<div class="longdesc" id="entry-longdesc">
|
||||
<p>You can create new widgets from scratch, using just the <code>$.Widget</code> object as a base to inherit from, or you can explicitly inherit from existing jQuery UI or third-party widgets. Defining a widget with the same name as you inherit from even allows you to extend widgets in place.</p>
|
||||
|
||||
<p>jQuery UI contains many widgets that maintain state and therefore have a slightly different usage pattern than typical jQuery plugins. All of jQuery UI's widgets use the same patterns, which is defined by the widget factory. So if you learn how to use one widget, then you'll know how to use all of them.</p>
|
||||
|
||||
<p><em>Note: This documentation shows examples using the <a href="/progressbar">progressbar widget</a> but the syntax is the same for every widget.</em></p>
|
||||
|
||||
<h3>Initialization</h3>
|
||||
|
||||
<p>In order to track the state of the widget, we must introduce a full life cycle for the widget. The life cycle starts when the widget is initalized. To initialize a widget, we simply call the plugin on one or more elements.</p>
|
||||
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">"#elem"</code> <code class="plain">).progressbar();</code></div></div></td></tr></tbody></table></div>
|
||||
|
||||
<p>This will initialize each element in the jQuery object, in this case the element with an id of <code>"elem"</code>. Because we called the <code>progressbar()</code> method with no parameters, the widget is initialized with its default options. We can pass a set of options during initialization in order to override the default options.</p>
|
||||
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">"#elem"</code> <code class="plain">).progressbar({ value: 20 });</code></div></div></td></tr></tbody></table></div>
|
||||
|
||||
<p>We can pass as many or as few options as we want during initialization. Any options that we don't pass will just use their default values.</p>
|
||||
|
||||
<p>The options are part of the widget's state, so we can set options after initialization as well. We'll see this later with the option method.</p>
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
<p>Now that the widget is initialized, we can query its state or perform actions on the widget. All actions after initialization take the form of a method call. To call a method on a widget, we pass the name of the method to the jQuery plugin. For example, to call the <code>value()</code> method on our progressbar widget, we would use:</p>
|
||||
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">"#elem"</code> <code class="plain">).progressbar( </code><code class="string">"value"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
|
||||
<p>If the method accepts parameters, we can pass them after the method name. For example, to pass the parameter <code>40</code> to the <code>value()</code> method, we can use:</p>
|
||||
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">"#elem"</code> <code class="plain">).progressbar( </code><code class="string">"value"</code><code class="plain">, 40 );</code></div></div></td></tr></tbody></table></div>
|
||||
|
||||
<p>Just like other methods in jQuery, most widget methods return the jQuery object for chaining.</p>
|
||||
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">"#elem"</code> <code class="plain">)</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">.progressbar( </code><code class="string">"value"</code><code class="plain">, 90 )</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">.addClass( </code><code class="string">"almost-done"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
|
||||
<p>Each widget will have its own set of methods based on the functionality that the widget provides. However, there are a few methods that exist on all widgets, which are documented below.</p>
|
||||
|
||||
<h3>Events</h3>
|
||||
|
||||
<p>All widgets have events associated with their various behaviors to notify you when the state is changing. For most widgets, when the events are triggered, the names are prefixed with the widget name. For example, we can bind to progressbar's <code>change</code> event which is triggered whenever the value changes.</p>
|
||||
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">"#elem"</code> <code class="plain">).bind( </code><code class="string">"progressbarchange"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">alert( </code><code class="string">"The value has changed!"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
|
||||
<p>Each event has a corresponding callback, which is exposed as an option. We can hook into progressbar's <code>change</code> callback instead of binding to the <code>progressbarchange</code> event, if we want to.</p>
|
||||
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">"#elem"</code> <code class="plain">).progressbar({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">change: </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number3 index2 alt2"><code class="undefined spaces"> </code><code class="plain">alert( </code><code class="string">"The value has changed!"</code> <code class="plain">);</code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
|
||||
<p>All widgets have a <code>create</code> event which is triggered upon instantiation.</p>
|
||||
</div>
|
||||
</div></article><article id="jQuery-Widget2" class="entry widget"><h2 class="section-title"><span>Base Widget</span></h2>
|
||||
<div class="entry-wrapper">
|
||||
<p class="desc"><strong>Description: </strong>The base widget used by the widget factory.</p>
|
||||
<section id="quick-nav"><header><h2>QuickNav</h2></header><div class="quick-nav-section">
|
||||
<h3>Options</h3>
|
||||
<div><a href="#option-disabled">disabled</a></div>
|
||||
<div><a href="#option-hide">hide</a></div>
|
||||
<div><a href="#option-show">show</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section">
|
||||
<h3>Methods</h3>
|
||||
<div><a href="#method-destroy">destroy</a></div>
|
||||
<div><a href="#method-disable">disable</a></div>
|
||||
<div><a href="#method-enable">enable</a></div>
|
||||
<div><a href="#method-option">option</a></div>
|
||||
<div><a href="#method-widget">widget</a></div>
|
||||
<div><a href="#method-_create">_create</a></div>
|
||||
<div><a href="#method-_destroy">_destroy</a></div>
|
||||
<div><a href="#method-_getCreateEventData">_getCreateEventData</a></div>
|
||||
<div><a href="#method-_getCreateOptions">_getCreateOptions</a></div>
|
||||
<div><a href="#method-_init">_init</a></div>
|
||||
<div><a href="#method-_setOptions">_setOptions</a></div>
|
||||
<div><a href="#method-_setOption">_setOption</a></div>
|
||||
<div><a href="#method-_on">_on</a></div>
|
||||
<div><a href="#method-_off">_off</a></div>
|
||||
<div><a href="#method-_super">_super</a></div>
|
||||
<div><a href="#method-_superApply">_superApply</a></div>
|
||||
<div><a href="#method-_delay">_delay</a></div>
|
||||
<div><a href="#method-_hoverable">_hoverable</a></div>
|
||||
<div><a href="#method-_focusable">_focusable</a></div>
|
||||
<div><a href="#method-_trigger">_trigger</a></div>
|
||||
<div><a href="#method-_show">_show</a></div>
|
||||
<div><a href="#method-_hide">_hide</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section">
|
||||
<h3>Events</h3>
|
||||
<div><a href="#event-create">create</a></div>
|
||||
</div></section><section id="options"><header><h2 class="underline">Options</h2></header><div id="option-disabled" class="api-item first-item">
|
||||
<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Disables the jQuery.Widget if set to <code>true</code>.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the jQuery.Widget with the disabled option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget({ disabled: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the disabled option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">disabled = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-hide" class="api-item">
|
||||
<h3>hide<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>If and how to animate the hiding of the element.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Boolean</strong>:
|
||||
When set to <code>false</code>, no animation will be used and the element will be hidden immediately.
|
||||
When set to <code>true</code>, the element will fade out with the default duration and the default easing.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Number</strong>:
|
||||
The element will fade out with the specified duration and the default easing.
|
||||
</li>
|
||||
<li>
|
||||
<strong>String</strong>:
|
||||
The element will be hidden using the specified effect.
|
||||
The value can either be the name of a built-in jQuery animateion method, such as <code>"slideUp"</code>, or the name of a jQuery UI effect, such as <code>"fold"</code>.
|
||||
In either case the effect will be used with the default duration and the default easing.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. If the <code>effect</code> property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used. If <code>effect</code> is omitted, then <code>"fadeOut"</code> will be used.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the jQuery.Widget with the hide option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget({ hide: { effect: </code><code class="string">"explode"</code><code class="plain">, duration: 1000 } });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the hide option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">hide = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"hide"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"hide"</code><code class="plain">, { effect: </code><code class="string">"explode"</code><code class="plain">, duration: 1000 } );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-show" class="api-item">
|
||||
<h3>show<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>If and how to animate the showing of the element.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Boolean</strong>:
|
||||
When set to <code>false</code>, no animation will be used and the element will be shown immediately.
|
||||
When set to <code>true</code>, the element will fade in with the default duration and the default easing.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Number</strong>:
|
||||
The element will fade in with the specified duration and the default easing.
|
||||
</li>
|
||||
<li>
|
||||
<strong>String</strong>:
|
||||
The element will be shown using the specified effect.
|
||||
The value can either be the name of a built-in jQuery animateion method, such as <code>"slideDown"</code>, or the name of a jQuery UI effect, such as <code>"fold"</code>.
|
||||
In either case the effect will be used with the default duration and the default easing.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. If the <code>effect</code> property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used. If <code>effect</code> is omitted, then <code>"fadeIn"</code> will be used.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the jQuery.Widget with the show option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget({ show: { effect: </code><code class="string">"blind"</code><code class="plain">, duration: 800 } });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the show option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">show = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"show"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"show"</code><code class="plain">, { effect: </code><code class="string">"blind"</code><code class="plain">, duration: 800 } );</code></div></div></td></tr></tbody></table></div>
|
||||
</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-_create"><div class="api-item first-item">
|
||||
<h3>_create()</h3>
|
||||
<div>
|
||||
The <code>_create()</code> method is the widget's constructor.
|
||||
There are no parameters, but <code>this.element</code> and <code>this.options</code> are already set.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-_delay"><div class="api-item">
|
||||
<h3>_delay( fn [, delay ] )<span class="returns">Returns: <a href="http://api.jquery.com/Types#Number">Number</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Invokes the provided function after a specified delay. Keeps <code>this</code> context correct. Essentially <code>setTimeout()</code>.
|
||||
<p>Returns the timeout ID for use with <code>clearTimeout()</code>.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>fn</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>() or <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The function to invoke. Can also be the name of a method on the widget.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>delay</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
|
||||
</div>
|
||||
<div>The number of milliseconds to wait before invoking the function. Deafults to <code>0</code>.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
<div id="method-_destroy"><div class="api-item">
|
||||
<h3>_destroy()</h3>
|
||||
<div>
|
||||
The public <a href="#method-destroy"><code>destroy()</code></a> method cleans up all common data, events, etc. and then delegates out to <code>_destroy()</code> for custom, widget-specific, cleanup.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-_focusable"><div class="api-item">
|
||||
<h3>_focusable( element )</h3>
|
||||
<div>
|
||||
Sets up <code>element</code> to apply the <code>ui-state-focus</code> class on focus.
|
||||
<p>The event handlers are automatically cleaned up on destroy.</p>
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>element</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
|
||||
</div>
|
||||
<div>The element(s) to apply the focusable behavior to.</div>
|
||||
</li></ul>
|
||||
</div></div>
|
||||
<div id="method-_getCreateEventData"><div class="api-item">
|
||||
<h3>_getCreateEventData()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
All widgets trigger the <a href="#event-create"><code>create</code></a> event. By default, no data is provided in the event, but this method can return an object which will be passed as the <code>create</code> event's data.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-_getCreateOptions"><div class="api-item">
|
||||
<h3>_getCreateOptions()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
This method allows the widget to define a custom method for defining options during instantiation. This user-provided options override the options returned by this method which override the default options.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-_hide"><div class="api-item">
|
||||
<h3>_hide( element, option [, callback ] )</h3>
|
||||
<div>
|
||||
Hides an element immediately, using built-in animation methods, or using custom effects.
|
||||
See the <a href="#option-hide">hide</a> option for possible <code>option</code> values.
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>element</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
|
||||
</div>
|
||||
<div>The element(s) to hide.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>option</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>The settings defining how to hide the element.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>callback</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
|
||||
<div>Callback to invoke after the element has been fully hidden.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
<div id="method-_hoverable"><div class="api-item">
|
||||
<h3>_hoverable( element )</h3>
|
||||
<div>
|
||||
Sets up <code>element</code> to apply the <code>ui-state-hover</code> class on hover.
|
||||
<p>The event handlers are automatically cleaned up on destroy.</p>
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>element</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
|
||||
</div>
|
||||
<div>The element(s) to apply the hoverable behavior to.</div>
|
||||
</li></ul>
|
||||
</div></div>
|
||||
<div id="method-_init"><div class="api-item">
|
||||
<h3>_init()</h3>
|
||||
<div>
|
||||
Widgets have the concept of initialization that is distinct from creation. Any time the plugin is called with no arguments or with only an option hash, the widget is initialized; this includes when the widget is created.
|
||||
|
||||
<p><em>Note: Initialization should only be handled if there is a logical action to perform on successive calls to the widget with no arguments.</em></p>
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-_off"><div class="api-item">
|
||||
<h3>_off( element, eventName )</h3>
|
||||
<div>
|
||||
Unbinds event handlers from the specified element(s).
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>element</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
|
||||
</div>
|
||||
<div>
|
||||
The element(s) to unbind the event handlers from. Unlike the <code>_on()</code> method, the elements are required for <code>_off()</code>.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>eventName</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>One or more space-separated event types.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
<div id="method-_on"><div class="api-item">
|
||||
<h3>_on( [element ], handlers )</h3>
|
||||
<div>
|
||||
Binds event handlers to the specified element(s). Delegation is supported via selectors inside the event names, e.g., "<code>click .foo</code>". The <code>_on()</code> method provides several benefits of direct event binding:
|
||||
<ul>
|
||||
<li>Maintains proper <code>this</code> context inside the handlers.</li>
|
||||
<li>Automatically handles disabled widgets: If the widget is disabled or the event occurs on an element with the <code>ui-state-disabled</code> class, the event handler is not invoked.</li>
|
||||
<li>Event handlers are automatically namespaced and cleaned up on destroy.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>element</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
|
||||
</div>
|
||||
<div>Which element(s) to bind the event handlers to. If no element is provided, <code>this.element</code> is used.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>handlers</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>
|
||||
A map in which the string keys represent the event type and optional selector for delegation, and the values represent a handler function to be called for the event.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
<div id="method-_setOption"><div class="api-item">
|
||||
<h3>_setOption( key, value )</h3>
|
||||
<div>
|
||||
Called from the <a href="#method-_setOptions"><code>_setOptions()</code></a> method for each individual option. Widget state should be updated based on changes.
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>key</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the option to set.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>value</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A value to set for the option.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
<div id="method-_setOptions"><div class="api-item">
|
||||
<h3>_setOptions( options )</h3>
|
||||
<div>
|
||||
Called whenever the <a href="#method-option"><code>option()</code></a> method is called, regardless of the form in which the <code>option()</code> method was called.
|
||||
<p>Overriding this is useful if you can defer processor-intensive changes for multiple option changes.</p>
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>options</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A map of option-value pairs to set.</div>
|
||||
</li></ul>
|
||||
</div></div>
|
||||
<div id="method-_show"><div class="api-item">
|
||||
<h3>_show( element, option [, callback ] )</h3>
|
||||
<div>
|
||||
Shows an element immediately, using built-in animation methods, or using custom effects.
|
||||
See the <a href="#option-show">show</a> option for possible <code>option</code> values.
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>element</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
|
||||
</div>
|
||||
<div>The element(s) to show.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>option</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>The settings defining how to show the element.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>callback</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
|
||||
<div>Callback to invoke after the element has been fully shown.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
<div id="method-_super"><div class="api-item">
|
||||
<h3>_super()</h3>
|
||||
<div>
|
||||
Invokes the method of the same name from the parent widget, with any specified arguments. Essentially <code>.call()</code>.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-_superApply"><div class="api-item">
|
||||
<h3>_superApply( arguments )</h3>
|
||||
<div>
|
||||
Invokes the method of the same name from the parent widget, with the array of arguments. Essentially <code>.apply()</code>.
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>arguments</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Array">Array</a>
|
||||
</div>
|
||||
<div>Array of arguments to pass to the parent method.</div>
|
||||
</li></ul>
|
||||
</div></div>
|
||||
<div id="method-_trigger"><div class="api-item">
|
||||
<h3>_trigger( type [, event ] [, data ] )</h3>
|
||||
<div>
|
||||
Triggers an event and its associated callback.
|
||||
<p>The option with the name equal to type is invoked as the callback.</p>
|
||||
<p>The event name is the widget name + type.</p>
|
||||
<p><em>Note: When providing data, you must provide all three parameters. If there is no event to pass along, just pass <code>null</code>.</em></p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>type</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The <code>type</code> should match the name of a callback option. The full event type will be generated automatically.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>event</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
|
||||
</div>
|
||||
<div>The original event that caused this event to occur; useful for providing context to the listener.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>data</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A hash of data associated with the event.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
<div id="method-destroy"><div class="api-item">
|
||||
<h3>destroy()</h3>
|
||||
<div>
|
||||
Removes the jQuery.Widget functionality completely. This will return the element back to its pre-init state.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-disable"><div class="api-item">
|
||||
<h3>disable()</h3>
|
||||
<div>
|
||||
Disables the jQuery.Widget.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-enable"><div class="api-item">
|
||||
<h3>enable()</h3>
|
||||
<div>
|
||||
Enables the jQuery.Widget.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div>
|
||||
<div id="method-option">
|
||||
<div class="api-item">
|
||||
<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
|
||||
<ul><li>
|
||||
<div><strong>optionName</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the option to get.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
|
||||
</h3>
|
||||
<div>Gets an object containing key/value pairs representing the current jQuery.Widget options hash.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">options = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option( optionName, value )</h3>
|
||||
<div>Sets the value of the jQuery.Widget option associated with the specified <code>optionName</code>.</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>optionName</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the option to set.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>value</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A value to set for the option.</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option( options )</h3>
|
||||
<div>Sets one or more options for the jQuery.Widget.</div>
|
||||
<ul><li>
|
||||
<div><strong>options</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A map of option-value pairs to set.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget( </code><code class="string">"option"</code><code class="plain">, { disabled: </code><code class="keyword">true</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="method-widget"><div class="api-item">
|
||||
<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Returns a <code>jQuery</code> object containing the original element or other relevant generated element.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
</div></div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-create" class="api-item first-item">
|
||||
<h3>create( event, ui )<span class="returns">Type: <code>jQuery.Widgetcreate</code></span>
|
||||
</h3>
|
||||
<div>
|
||||
Triggered when the jQuery.Widget is created.
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>event</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>ui</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Initialize the jQuery.Widget with the create callback specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.Widget({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">create: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Bind an event listener to the jQuery.Widgetcreate event:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"jQuery.Widgetcreate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></section>
|
||||
</div></article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
644
html/jquery-ui-1.10.3.custom/development-bundle/docs/menu.html
Normal file
644
html/jquery-ui-1.10.3.custom/development-bundle/docs/menu.html
Normal file
File diff suppressed because one or more lines are too long
216
html/jquery-ui-1.10.3.custom/development-bundle/docs/mouse.html
Normal file
216
html/jquery-ui-1.10.3.custom/development-bundle/docs/mouse.html
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI mouse documentation</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>{
|
||||
"title":
|
||||
"Mouse Interaction",
|
||||
"excerpt":
|
||||
"The base interaction layer.",
|
||||
"termSlugs": {
|
||||
"category": [
|
||||
"utilities","interactions"
|
||||
]
|
||||
}
|
||||
}</script><article id="jQuery-ui-mouse1" class="entry widget"><h2 class="section-title"><span>Mouse Interaction</span></h2>
|
||||
<div class="entry-wrapper">
|
||||
<p class="desc"><strong>Description: </strong>The base interaction layer.</p>
|
||||
<section id="quick-nav"><header><h2>QuickNav</h2></header><div class="quick-nav-section">
|
||||
<h3>Options</h3>
|
||||
<div><a href="#option-cancel">cancel</a></div>
|
||||
<div><a href="#option-delay">delay</a></div>
|
||||
<div><a href="#option-distance">distance</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section">
|
||||
<h3>Methods</h3>
|
||||
<div><a href="#method-_mouseInit">_mouseInit</a></div>
|
||||
<div><a href="#method-_mouseDestroy">_mouseDestroy</a></div>
|
||||
<div><a href="#method-_mouseDown">_mouseDown</a></div>
|
||||
<div><a href="#method-_mouseMove">_mouseMove</a></div>
|
||||
<div><a href="#method-_mouseUp">_mouseUp</a></div>
|
||||
<div><a href="#method-_mouseDistanceMet">_mouseDistanceMet</a></div>
|
||||
<div><a href="#method-_mouseDelayMet">_mouseDelayMet</a></div>
|
||||
<div><a href="#method-_mouseStart">_mouseStart</a></div>
|
||||
<div><a href="#method-_mouseDrag">_mouseDrag</a></div>
|
||||
<div><a href="#method-_mouseStop">_mouseStop</a></div>
|
||||
<div><a href="#method-_mouseCapture">_mouseCapture</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section"><h3>Events</h3></div></section><div class="longdesc" id="entry-longdesc">
|
||||
<p>Similar to <a href="/jQuery.Widget#jQuery-Widget2"><code>jQuery.Widget</code></a>, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to <code>jQuery.Widget</code>, but it does include internal methods that are not intended to be overwritten. The intended public API is <a href="#method-_mouseStart"><code>_mouseStart()</code></a>, <a href="#method-_mouseDrag"><code>_mouseDrag()</code></a>, <a href="#method-_mouseStop"><code>_mouseStop()</code></a>, and <a href="#method-_mouseCapture"><code>_mouseCapture()</code></a>.</p>
|
||||
</div>
|
||||
<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-cancel" class="api-item first-item">
|
||||
<h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"input,textarea,button,select,option"</code>
|
||||
</div>
|
||||
<div>Prevents interactions from starting on specified elements.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the jQuery.ui.mouse with the cancel option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse({ cancel: </code><code class="string">".title"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the cancel option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cancel = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code><code class="plain">, </code><code class="string">".title"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-delay" class="api-item">
|
||||
<h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>0</code>
|
||||
</div>
|
||||
<div>Time in milliseconds after mousedown until the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the jQuery.ui.mouse with the delay option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse({ delay: 300 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the delay option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">delay = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code><code class="plain">, 300 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-distance" class="api-item">
|
||||
<h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>1</code>
|
||||
</div>
|
||||
<div>Distance in pixels after mousedown the mouse must move before the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the jQuery.ui.mouse with the distance option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse({ distance: 10 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the distance option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">distance = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code><code class="plain">, 10 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-_mouseCapture"><div class="api-item first-item">
|
||||
<h3>_mouseCapture()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Determines whether an interaction should start based on event target of the interaction. The default implementation always returns <code>true</code>.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseCapture method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseCapture"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDelayMet"><div class="api-item">
|
||||
<h3>_mouseDelayMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Determines whether the <a href="#option-delay"><code>delay</code></a> option has been met for the current interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDelayMet method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDelayMet"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDestroy"><div class="api-item">
|
||||
<h3>_mouseDestroy()</h3>
|
||||
<div>
|
||||
Destroys the interaction event handlers. This must be called from the extending widget's <code>_destroy()</code> method.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDestroy method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDestroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDistanceMet"><div class="api-item">
|
||||
<h3>_mouseDistanceMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Determines whether the <a href="#option-distance"><code>distance</code></a> option has been met for the current interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDistanceMet method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDistanceMet"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDown"><div class="api-item">
|
||||
<h3>_mouseDown()</h3>
|
||||
<div>
|
||||
Handles the beginning of an interaction. Verifies that the event is associated with the primary mouse button and ensures that the <a href="#option-delay"><code>delay</code></a> and <a href="#option-distance"><code>distance</code></a> options are met prior to starting the interaction. When the interaction is ready to start, invokes the <a href="#method-_mouseStart"><code>_mouseStart()</code></a> method for the extending widget to handle.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDown method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDown"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDrag"><div class="api-item">
|
||||
<h3>_mouseDrag()</h3>
|
||||
<div>
|
||||
The extending widget should implement a <code>_mouseDrag()</code> method to handle each movement of an interaction. This method will receive the mouse event associated with the movement.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDrag method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDrag"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseInit"><div class="api-item">
|
||||
<h3>_mouseInit()</h3>
|
||||
<div>
|
||||
Initializes the interaction event handlers. This must be called from the extending widget's <code>_create()</code> method.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseInit method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseInit"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseMove"><div class="api-item">
|
||||
<h3>_mouseMove()</h3>
|
||||
<div>
|
||||
Handles each movement of the interaction. Invokes the <a href="#method-_mouseDrag"><code>mouseDrag()</code></a> method for the extending widget to handle.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseMove method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseMove"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseStart"><div class="api-item">
|
||||
<h3>_mouseStart()</h3>
|
||||
<div>
|
||||
The extending widget should implement a <code>_mouseStart()</code> method to handle the beginning of an interaction. This method will receive the mouse event associated with the start of the interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseStart method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseStart"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseStop"><div class="api-item">
|
||||
<h3>_mouseStop()</h3>
|
||||
<div>
|
||||
The extending widget should implement a <code>_mouseStop()</code> method to handle the end of an interaction. This method will receive the mouse event associated with the end of the interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseStop method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseStop"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseUp"><div class="api-item">
|
||||
<h3>_mouseUp()</h3>
|
||||
<div>
|
||||
Handles the end of the interaction. Invokes the <a href="#method-_mouseStop"><code>mouseStop()</code></a> method for the extending widget to handle.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseUp method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseUp"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div></section>
|
||||
</div></article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
586
html/jquery-ui-1.10.3.custom/development-bundle/docs/slider.html
Normal file
586
html/jquery-ui-1.10.3.custom/development-bundle/docs/slider.html
Normal file
File diff suppressed because one or more lines are too long
1450
html/jquery-ui-1.10.3.custom/development-bundle/docs/sortable.html
Normal file
1450
html/jquery-ui-1.10.3.custom/development-bundle/docs/sortable.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,572 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI spinner documentation</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>{
|
||||
"title":
|
||||
"Spinner Widget",
|
||||
"excerpt":
|
||||
"\n\t\tEnhance a text input for entering numeric values, with up/down buttons and arrow key handling.\n\t",
|
||||
"termSlugs": {
|
||||
"category": [
|
||||
"widgets"
|
||||
]
|
||||
}
|
||||
}</script><article id="spinner1" class="entry widget"><h2 class="section-title">
|
||||
<span>Spinner Widget</span><span class="version-details">version added: 1.9</span>
|
||||
</h2>
|
||||
<div class="entry-wrapper">
|
||||
<p class="desc"><strong>Description: </strong>
|
||||
Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.
|
||||
</p>
|
||||
<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
|
||||
</h2></header><div class="quick-nav-section">
|
||||
<h3>Options</h3>
|
||||
<div><a href="#option-culture">culture</a></div>
|
||||
<div><a href="#option-disabled">disabled</a></div>
|
||||
<div><a href="#option-icons">icons</a></div>
|
||||
<div><a href="#option-incremental">incremental</a></div>
|
||||
<div><a href="#option-max">max</a></div>
|
||||
<div><a href="#option-min">min</a></div>
|
||||
<div><a href="#option-numberFormat">numberFormat</a></div>
|
||||
<div><a href="#option-page">page</a></div>
|
||||
<div><a href="#option-step">step</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section">
|
||||
<h3>Methods</h3>
|
||||
<div><a href="#method-destroy">destroy</a></div>
|
||||
<div><a href="#method-disable">disable</a></div>
|
||||
<div><a href="#method-enable">enable</a></div>
|
||||
<div><a href="#method-option">option</a></div>
|
||||
<div><a href="#method-pageDown">pageDown</a></div>
|
||||
<div><a href="#method-pageUp">pageUp</a></div>
|
||||
<div><a href="#method-stepDown">stepDown</a></div>
|
||||
<div><a href="#method-stepUp">stepUp</a></div>
|
||||
<div><a href="#method-value">value</a></div>
|
||||
<div><a href="#method-widget">widget</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section">
|
||||
<h3>Events</h3>
|
||||
<div><a href="#event-create">create</a></div>
|
||||
<div><a href="#event-start">start</a></div>
|
||||
<div><a href="#event-spin">spin</a></div>
|
||||
<div><a href="#event-stop">stop</a></div>
|
||||
<div><a href="#event-change">change</a></div>
|
||||
</div></section><div class="longdesc" id="entry-longdesc">
|
||||
<p>Spinner, or number stepper, widget is perfect for handling all kinds of numeric input. It allow users to type a value directly or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales.</p>
|
||||
|
||||
<p>Spinner wraps a text input, adds two buttons to increment and decrement the current value, along with handling key events for the same purpose. It delegates to <a href="https://github.com/jquery/globalize">Globalize</a> for number formatting and parsing.</p>
|
||||
|
||||
<h3>Keyboard interaction</h3>
|
||||
|
||||
<ul>
|
||||
<li>UP: Increment the value by one step.</li>
|
||||
<li>DOWN: Decrement the value by one step.</li>
|
||||
<li>PAGE UP: Increment the value by one page.</li>
|
||||
<li>PAGE DOWN: Decrement the value by one page.</li>
|
||||
</ul>
|
||||
|
||||
<p>Focus stays in the text field, even after using the mouse to click one of the spin buttons.</p>
|
||||
</div>
|
||||
<h3>Additional Notes:</h3>
|
||||
<div class="longdesc"><ul><li>
|
||||
This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
|
||||
</li></ul></div>
|
||||
<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-culture" class="api-item first-item">
|
||||
<h3>culture<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>Sets the culture to use for parsing and formatting the value. If <code>null</code>, the currently set culture in <code>Globalize</code> is used, see <a href="https://github.com/jquery/globalize">Globalize docs</a> for available cultures. Only relevant if the <a href="#option-numberFormat"><code>numberFormat</code></a> option is set. Requires <a href="https://github.com/jquery/globalize">Globalize</a> to be included.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the culture option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ culture: </code><code class="string">"fr"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the culture option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">culture = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"culture"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"culture"</code><code class="plain">, </code><code class="string">"fr"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-disabled" class="api-item">
|
||||
<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>false</code>
|
||||
</div>
|
||||
<div>Disables the spinner if set to <code>true</code>.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the disabled option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ disabled: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the disabled option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">disabled = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-icons" class="api-item">
|
||||
<h3>icons<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }</code>
|
||||
</div>
|
||||
<div>
|
||||
Icons to use for buttons, matching an icon defined by the jQuery UI CSS Framework.
|
||||
<ul>
|
||||
<li>up (string, default: "ui-icon-triangle-1-n")</li>
|
||||
<li>down (string, default: "ui-icon-triangle-1-s")</li>
|
||||
</ul>
|
||||
</div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the icons option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ icons: { down: </code><code class="string">"custom-down-icon"</code><code class="plain">, up: </code><code class="string">"custom-up-icon"</code> <code class="plain">} });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the icons option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">icons = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"icons"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"icons"</code><code class="plain">, { down: </code><code class="string">"custom-down-icon"</code><code class="plain">, up: </code><code class="string">"custom-up-icon"</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-incremental" class="api-item">
|
||||
<h3>incremental<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>true</code>
|
||||
</div>
|
||||
<div>Controls the number of steps taken when holding down a spin button.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Boolean</strong>: When set to <code>true</code>, the stepping delta will increase when spun incessantly. When set to <code>false</code>, all steps are equal (as defined by the <a href="#option-step"><code>step</code></a> option).</li>
|
||||
<li>
|
||||
<strong>Function</strong>: Receives one parameter: the number of spins that have occurred. Must return the number of steps that should occur for the current spin.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the incremental option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ incremental: </code><code class="keyword">false</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the incremental option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">incremental = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"incremental"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"incremental"</code><code class="plain">, </code><code class="keyword">false</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-max" class="api-item">
|
||||
<h3>max<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>The maximum allowed value. The element's <code>max</code> attribute is used if it exists and the option is not explicitly set. If <code>null</code>, there is no maximum enforced.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Number</strong>: The maximum value.</li>
|
||||
<li>
|
||||
<strong>String</strong>: If <a href="https://github.com/jquery/globalize">Globalize</a> is included, the <code>max</code> option can be passed as a string which will be parsed based on the <a href="#opiton-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options; otherwise it will fall back to the native <code>parseFloat()</code> method.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the max option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ max: 50 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the max option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">max = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"max"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"max"</code><code class="plain">, 50 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-min" class="api-item">
|
||||
<h3>min<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>The minimum allowed value. The element's <code>min</code> attribute is used if it exists and the option is not explicitly set. If <code>null</code>, there is no minimum enforced.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Number</strong>: The minimum value.</li>
|
||||
<li>
|
||||
<strong>String</strong>: If <a href="https://github.com/jquery/globalize">Globalize</a> is included, the <code>min</code> option can be passed as a string which will be parsed based on the <a href="#opiton-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options; otherwise it will fall back to the native <code>parseFloat()</code> method.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the min option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ min: 0 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the min option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">min = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"min"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"min"</code><code class="plain">, 0 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-numberFormat" class="api-item">
|
||||
<h3>numberFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>null</code>
|
||||
</div>
|
||||
<div>Format of numbers passed to <a href="https://github.com/jquery/globalize"><code>Globalize</code></a>, if available. Most common are <code>"n"</code> for a decimal number and <code>"C"</code> for a currency value. Also see the <a href="#option-culture"><code>culture</code></a> option.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the numberFormat option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ numberFormat: </code><code class="string">"n"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the numberFormat option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">numberFormat = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"numberFormat"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"numberFormat"</code><code class="plain">, </code><code class="string">"n"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-page" class="api-item">
|
||||
<h3>page<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>10</code>
|
||||
</div>
|
||||
<div>The number of steps to take when paging via the <a href="#method-pageUp"><code>pageUp</code></a>/<a href="#method-pageDown"><code>pageDown</code></a> methods.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the page option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ page: 5 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the page option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">page = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"page"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"page"</code><code class="plain">, 5 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
<div id="option-step" class="api-item">
|
||||
<h3>step<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>1</code>
|
||||
</div>
|
||||
<div>The size of the step to take when spinning via buttons or via the <a href="#method-stepUp"><code>stepUp()</code></a>/<a href="#method-stepDown"><code>stepDown()</code></a> methods. The element's <code>step</code> attribute is used if it exists and the option is not explicitly set.</div>
|
||||
<strong>Multiple types supported:</strong><ul>
|
||||
<li>
|
||||
<strong>Number</strong>: The size of the step.</li>
|
||||
<li>
|
||||
<strong>String</strong>: If <a href="https://github.com/jquery/globalize">Globalize</a> is included, the <code>step</code> option can be passed as a string which will be parsed based on the <a href="#opiton-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options, otherwise it will fall back to the native <code>parseFloat</code>.</li>
|
||||
</ul>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the step option specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({ step: 2 });</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Get or set the step option, after initialization:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">step = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"step"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"step"</code><code class="plain">, 2 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
|
||||
<h3>destroy()</h3>
|
||||
<div>
|
||||
Removes the spinner functionality completely. This will return the element back to its pre-init state.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the destroy method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"destroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-disable"><div class="api-item">
|
||||
<h3>disable()</h3>
|
||||
<div>
|
||||
Disables the spinner.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the disable method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"disable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-enable"><div class="api-item">
|
||||
<h3>enable()</h3>
|
||||
<div>
|
||||
Enables the spinner.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the enable method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"enable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-option">
|
||||
<div class="api-item">
|
||||
<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
|
||||
</h3>
|
||||
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
|
||||
<ul><li>
|
||||
<div><strong>optionName</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the option to get.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
|
||||
</h3>
|
||||
<div>Gets an object containing key/value pairs representing the current spinner options hash.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">options = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option( optionName, value )</h3>
|
||||
<div>Sets the value of the spinner option associated with the specified <code>optionName</code>.</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>optionName</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The name of the option to set.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>value</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A value to set for the option.</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>option( options )</h3>
|
||||
<div>Sets one or more options for the spinner.</div>
|
||||
<ul><li>
|
||||
<div><strong>options</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div>A map of option-value pairs to set.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"option"</code><code class="plain">, { disabled: </code><code class="keyword">true</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="method-pageDown"><div class="api-item">
|
||||
<h3>pageDown( [pages ] )</h3>
|
||||
<div>
|
||||
Decrements the value by the specified number of pages, as defined by the <a href="#option-page"><code>page</code></a> option. Without the parameter, a single page is decremented.
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>pages</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
|
||||
</div>
|
||||
<div>Number of pages to decrement, defaults to 1.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the pageDown method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"pageDown"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-pageUp"><div class="api-item">
|
||||
<h3>pageUp( [pages ] )</h3>
|
||||
<div>
|
||||
Increments the value by the specified number of pages, as defined by the <a href="#option-page"><code>page</code></a> option. Without the parameter, a single page is incremented.
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>pages</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
|
||||
</div>
|
||||
<div>Number of pages to increment, defaults to 1.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the pageUp method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"pageUp"</code><code class="plain">, 10 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-stepDown"><div class="api-item">
|
||||
<h3>stepDown( [steps ] )</h3>
|
||||
<div>
|
||||
Decrements the value by the specified number of steps. Without the parameter, a single step is decremented.
|
||||
<p>If the resulting value is above the max, below the min, or reuslts in a step mismatch, the value will be adjusted to the closest valid value.</p>
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>steps</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
|
||||
</div>
|
||||
<div>Number of steps to decrement, defaults to 1.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the stepDown method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"stepDown"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-stepUp"><div class="api-item">
|
||||
<h3>stepUp( [steps ] )</h3>
|
||||
<div>
|
||||
Increments the value by the specified number of steps. Without the parameter, a single step is incremented.
|
||||
<p>If the resulting value is above the max, below the min, or reuslts in a step mismatch, the value will be adjusted to the closest valid value.</p>
|
||||
</div>
|
||||
<ul><li>
|
||||
<div><strong>steps</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
|
||||
</div>
|
||||
<div>Number of steps to increment, defaults to 1.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the stepUp method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"stepUp"</code><code class="plain">, 5 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-value">
|
||||
<div class="api-item">
|
||||
<h3>value()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Number">Number</a></span>
|
||||
</h3>
|
||||
<div>Gets the current value as a number. The value is parsed based on the <a href="#option-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options.</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">value = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"value"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<h3>value( value )</h3>
|
||||
<div></div>
|
||||
<ul><li>
|
||||
<div><strong>value</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a>
|
||||
</div>
|
||||
<div>The value to set. If passed as a string, the value is parsed based on the <a href="#option-numberFormat"><code>numberFormat</code></a> and <a href="#option-culture"><code>culture</code></a> options.</div>
|
||||
</li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"value"</code><code class="plain">, 50 );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="method-widget"><div class="api-item">
|
||||
<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Returns a <code>jQuery</code> object containing the generated wrapper.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the widget method:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">widget = $( </code><code class="string">".selector"</code> <code class="plain">).spinner( </code><code class="string">"widget"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-change" class="api-item first-item">
|
||||
<h3>change( event, ui )<span class="returns">Type: <code>spinchange</code></span>
|
||||
</h3>
|
||||
<div>
|
||||
Triggered when the value of the spinner has changed and the input is no longer focused.
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>event</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>ui</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the change callback specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">change: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Bind an event listener to the spinchange event:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spinchange"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="event-create" class="api-item">
|
||||
<h3>create( event, ui )<span class="returns">Type: <code>spincreate</code></span>
|
||||
</h3>
|
||||
<div>
|
||||
Triggered when the spinner is created.
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>event</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>ui</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the create callback specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">create: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Bind an event listener to the spincreate event:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spincreate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="event-spin" class="api-item">
|
||||
<h3>spin( event, ui )<span class="returns">Type: <code>spin</code></span>
|
||||
</h3>
|
||||
<div>
|
||||
Triggered during increment/decrement (to determine direction of spin compare current value with <code>ui.value</code>).
|
||||
<p>Can be canceled, preventing the value from being updated.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>event</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>ui</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<ul><li>
|
||||
<div><strong>value</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
|
||||
</div>
|
||||
<div>The new value to be set, unless the event is cancelled.</div>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the spin callback specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">spin: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Bind an event listener to the spin event:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spin"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="event-start" class="api-item">
|
||||
<h3>start( event, ui )<span class="returns">Type: <code>spinstart</code></span>
|
||||
</h3>
|
||||
<div>
|
||||
Triggered before a spin. Can be canceled, preventing the spin from occurring.
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>event</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>ui</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the start callback specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">start: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Bind an event listener to the spinstart event:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spinstart"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="event-stop" class="api-item">
|
||||
<h3>stop( event, ui )<span class="returns">Type: <code>spinstop</code></span>
|
||||
</h3>
|
||||
<div>Triggered after a spin.</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>event</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>ui</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
|
||||
</div>
|
||||
<div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Initialize the spinner with the stop callback specified:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).spinner({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces"> </code><code class="plain">stop: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
|
||||
<p>Bind an event listener to the spinstop event:</p>
|
||||
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"spinstop"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
|
||||
</div>
|
||||
</div></section><section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
|
||||
<h4><span class="desc">Plain number spinner</span></h4>
|
||||
<div class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain"><!doctype html></code></div><div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">></code></div><div class="line number3 index2 alt2"><code class="plain"><</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">></code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">>spinner demo</</code><code class="keyword">title</code><code class="plain">></code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css</a>"</code><code class="plain">></code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.3.js">http://code.jquery.com/jquery-1.8.3.js</a>"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/jquery-ui.js">http://code.jquery.com/ui/1.9.2/jquery-ui.js</a>"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number9 index8 alt2"><code class="plain"></</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number10 index9 alt1"><code class="plain"><</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number11 index10 alt2"> </div><div class="line number12 index11 alt1"><code class="plain"><</code><code class="keyword">input</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"spinner"</code><code class="plain">></code></div><div class="line number13 index12 alt2"> </div><div class="line number14 index13 alt1"><code class="plain"><</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number15 index14 alt2"><code class="plain">$( "#spinner" ).spinner();</code></div><div class="line number16 index15 alt1"><code class="plain"></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number17 index16 alt2"> </div><div class="line number18 index17 alt1"><code class="plain"></</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number19 index18 alt2"><code class="plain"></</code><code class="keyword">html</code><code class="plain">></code></div></div></td></tr></tbody></table></div>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo" data-height="50"></div>
|
||||
</div></section>
|
||||
</div></article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
635
html/jquery-ui-1.10.3.custom/development-bundle/docs/tabs.html
Normal file
635
html/jquery-ui-1.10.3.custom/development-bundle/docs/tabs.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue