Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial import from jquery-docs repo. New home :)

  • Loading branch information...
commit f1b270b7816a07c342e44469b06fef5bdca12fa5 1 parent d288656
@rdworth rdworth authored
View
24 LICENSE-MIT.txt
@@ -0,0 +1,24 @@
+Copyright (c) 2012 jQuery Foundation, http://jquery.org/
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+and logs, available at http://github.com/jquery/api.jqueryui.com
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
183 entries/accordion.xml
@@ -0,0 +1,183 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="accordion" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>Make the selected elements Accordion widgets. Semantic requirements:</p>
+<p>The markup of your accordion container needs pairs of headers and content panels:</p>
+
+<pre><![CDATA[<div id="accordion">
+ <h3><a href="#">First header</a></h3>
+ <div>First content</div>
+ <h3><a href="#">Second header</a></h3>
+ <div>Second content</div>
+</div>]]></pre>
+
+<p>If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.</p>
+<p>If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.</p>
+<p>Use activate(Number) to change the active content programmatically.</p>
+
+<h4>NOTE: If you want multiple sections open at once, don't use an accordion</h4>
+<p>An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:</p>
+
+<pre><![CDATA[jQuery(document).ready(function(){
+ $('.accordion .head').click(function() {
+ $(this).next().toggle();
+ return false;
+ }).next().hide();
+});]]></pre>
+
+<p>Or animated:</p>
+
+<pre><![CDATA[jQuery(document).ready(function(){
+ $('.accordion .head').click(function() {
+ $(this).next().toggle('slow');
+ return false;
+ }).next().hide();
+});]]></pre>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="active" type="Selector, Element, jQuery, Boolean, Number" default='first child'>
+ <desc>Selector for the active element. Set to false to display none at start. Needs <code>collapsible: true</code>.</desc>
+ </option>
+ <option name="animated" type="Boolean, String" default='"slide"'>
+ <desc>Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).</desc>
+ </option>
+ <option name="autoHeight" type="Boolean" default='true'>
+ <desc>If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.</desc>
+ </option>
+ <option name="clearStyle" type="Boolean" default='false'>
+ <desc>If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.</desc>
+ </option>
+ <option name="collapsible" type="Boolean" default='false'>
+ <desc>Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).</desc>
+ </option>
+ <option name="event" type="String" default='"click"'>
+ <desc>The event on which to trigger the accordion.</desc>
+ </option>
+ <option name="fillSpace" type="Boolean" default='false'>
+ <desc>If set, the accordion completely fills the height of the parent element. Overrides autoheight.</desc>
+ </option>
+ <option name="header" type="Selector, jQuery" default='"> li > :first-child,> :not(li):even"'>
+ <desc>Selector for the header element.</desc>
+ </option>
+ <option name="icons" type="Object" default='{ "header": "ui-icon-triangle-1-e", "headerSelected": "ui-icon-triangle-1-s" }'>
+ <desc>Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by [http://www.themeroller.com jQuery UI ThemeRoller]. Set to false to have no icons displayed.</desc>
+ </option>
+ <option name="navigation" type="Boolean" default='false'>
+ <desc>If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.</desc>
+ </option>
+ <option name="navigationFilter" type="Function" default=' '>
+ <desc>Overwrite the default location.href-matching with your own matcher.</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="change" type="accordionchange">
+ <desc>This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.
+
+<pre><![CDATA[$('.ui-accordion').bind('accordionchange', function(event, ui) {
+ ui.newHeader // jQuery object, activated header
+ ui.oldHeader // jQuery object, previous header
+ ui.newContent // jQuery object, activated content
+ ui.oldContent // jQuery object, previous content
+});]]></pre>
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="changestart" type="accordionchangestart">
+ <desc>This event is triggered every time the accordion starts to change.
+
+<pre><![CDATA[$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
+ ui.newHeader // jQuery object, activated header
+ ui.oldHeader // jQuery object, previous header
+ ui.newContent // jQuery object, activated content
+ ui.oldContent // jQuery object, previous content
+});]]></pre>
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+ <method name="activate">
+ <desc>Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass <code>false</code> to close all (only possible with <code>collapsible:true</code>).</desc>
+ <argument name="index" type="String, Element, jQuery, Boolean, Number">
+ <desc></desc>
+ </argument>
+ </method>
+ <method name="resize">
+ <desc>Recompute heights of the accordion contents when using the fillSpace option and the container height changed. For example, when the container is a resizable, this method should be called by its resize-event.</desc>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Accordion.</desc>
+ <code><![CDATA[$("#accordion").accordion();]]></code>
+ <html><![CDATA[
+<div id="accordion">
+ <h3><a href="#">Section 1</a></h3>
+ <div>
+ <p>
+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+ ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+ amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+ odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+ </p>
+ </div>
+ <h3><a href="#">Section 2</a></h3>
+ <div>
+ <p>
+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+ purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+ velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+ suscipit faucibus urna.
+ </p>
+ </div>
+ <h3><a href="#">Section 3</a></h3>
+ <div>
+ <p>
+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+ Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+ ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+ lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+ </p>
+ <ul>
+ <li>List item one</li>
+ <li>List item two</li>
+ <li>List item three</li>
+ </ul>
+ </div>
+ <h3><a href="#">Section 4</a></h3>
+ <div>
+ <p>
+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+ et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+ faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+ mauris vel est.
+ </p>
+ <p>
+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos.
+ </p>
+ </div>
+</div>
+
+]]></html>
+
+ </example>
+</entry>
View
149 entries/autocomplete.xml
@@ -0,0 +1,149 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="autocomplete" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.</p>
+
+<p>By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.</p>
+
+<p>This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.</p>
+
+<p>You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.</p>
+
+<p>Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:</p>
+
+<ul>
+<li>an Array with local data</li>
+<li>a String, specifying a URL</li>
+<li>a Callback</li>
+</ul>
+
+<p><b>Expected data format</b></p>
+
+<p>The data from local data, a url or a callback can come in two variants:</p>
+
+<ul>
+<li>An Array of Strings:<br/><code>[ "Choice1", "Choice2" ]</code></li>
+<li>An Array of Objects with label and value properties:<br/><code>[ { label: "Choice1", value: "value1" }, ... ]</code></li>
+</ul>
+
+<p>The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.</p>
+
+<p>When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead the request parameter "term" gets added to the URL, which the server-side script should use for filtering the results. The data itself can be in the same format as the local data described above.</p>
+
+<p>The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:</p>
+
+<ul>
+<li>A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".</li>
+<li>A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.</li>
+</ul>
+
+<p>The label is always treated as text, if you want the label to be treated as html you can use [https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js Scott González' html extension]. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.</p>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="appendTo" type="Selector" default='"body"'>
+ <desc>Which element the menu should be appended to.</desc>
+ </option>
+ <option name="autoFocus" type="Boolean" default='false'>
+ <desc>If set to true the first item will be automatically focused.</desc>
+ </option>
+ <option name="delay" type="Integer" default='300'>
+ <desc>The delay in milliseconds the Autocomplete waits after a keystroke to activate itself. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.</desc>
+ </option>
+ <option name="minLength" type="Integer" default='1'>
+ <desc>The minimum number of characters a user has to type before the Autocomplete activates. Zero is useful for local data with just a few items. Should be increased when there are a lot of items, where a single character would match a few thousand items.</desc>
+ </option>
+ <option name="position" type="Object" default='{ my: "left top", at: "left bottom", collision: "none" }'>
+ <desc>Identifies the position of the Autocomplete widget in relation to the associated input element. The "of" option defaults to the input element, but you can specify another element to position against. You can refer to the [http://docs.jquery.com/UI/Position jQuery UI Position] utility for more details about the various options.</desc>
+ </option>
+ <option name="source" type="String, Array, Callback" default='none, must be specified'>
+ <desc>Defines the data to use, must be specified. See Overview section for more details, and look at the various demos.</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="search" type="autocompletesearch">
+ <desc>Before a request (source-option) is started, after minLength and delay are met. Can be canceled (return false), then no request will be started and no items suggested.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="open" type="autocompleteopen">
+ <desc>Triggered when the suggestion menu is opened.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="focus" type="autocompletefocus">
+ <desc>Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="select" type="autocompleteselect">
+ <desc>Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="close" type="autocompleteclose">
+ <desc>When the list is hidden - doesn't have to occur together with a change.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="change" type="autocompletechange">
+ <desc>Triggered when the field is blurred, if the value has changed; ui.item refers to the selected item.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+ <method name="search">
+ <desc>Triggers a search event, which, when data is available, then will display the suggestions; can be used by a selectbox-like button to open the suggestions when clicked. If no value argument is specified, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.
+</desc>
+ <argument name="value" type="String" optional="true">
+ <desc></desc>
+ </argument>
+ </method>
+ <method name="close">
+ <desc>Close the Autocomplete menu. Useful in combination with the search method, to close the open menu.</desc>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Autocomplete.</desc>
+ <code><![CDATA[$("input#autocomplete").autocomplete({
+ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
+});]]></code>
+ <html><![CDATA[
+<input id="autocomplete" />
+
+]]></html>
+
+ </example>
+</entry>
View
46 entries/blind-effect.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="blind" namespace="effect" type="effect">
+ <desc>
+ The blind effect hides or shows an element by wrapping the element in an <code>overflow:hidden</code> container, and "pulling the blinds"
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element by pulling a blind in the direction</dd>
+ <dt>show</dt>
+ <dd>Shows the element by pulling a blind from the direction. This seems inverted from the hide.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="direction" type="String" default='"up"'>
+ <desc>
+ <p>The direction the blind will be pulled to "hide" the element., or the direction from which the element will be revealed.</p>
+ <p>Possible Values</p>
+ <dl>
+ <dt>up</dt>
+ <dt>down</dt>
+ <dt>left</dt>
+ <dt>right</dt>
+ <dt>vertical</dt>
+ <dt>horizontal</dt>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ </options>
+</entry>
View
52 entries/bounce-effect.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="bounce" namespace="effect" type="effect">
+ <desc>
+ The bounce effect bounces an element. When used with hide or show, the last or first bounce will also fade in/out.
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"effect"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element by pulling a bouncing out the direction and fading out on the last half bounce</dd>
+ <dt>show</dt>
+ <dd>Shows the element by pulling a bouncing in from the direction fading in on the the first half bounce.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ <dt>effect</dt>
+ <dd>Just bounces the element, doesn't hide or show.</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="direction" type="String" default='"up"'>
+ <desc>
+ <p>The direction the blind will be pulled to "hide" the element., or the direction from which the element will be revealed.</p>
+ <p>Possible Values</p>
+ <dl>
+ <dt>up</dt>
+ <dt>down</dt>
+ <dt>left</dt>
+ <dt>right</dt>
+ </dl>
+ </desc>
+ </option>
+ <option name="distance" type="Number" default="20">
+ <desc>The distance of the largest "bounce" in pixels</desc>
+ </option>
+ <option name="times" type="Number" default="5">
+ <desc>The number of times the element will bounce. When used with hide or show, there is an extra "half" bounce for the fade in/out</desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ </options>
+</entry>
View
59 entries/button.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="button" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.</p>
+
+<p>In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.</p>
+
+<p>In order to group radio buttons, Button also provides an additional widget-method, called Buttonset. Its used by selecting a container element (which contains the radio buttons) and calling buttonset(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendents and applying button() to them. You can enable and disable a buttonset, which will enable and disable all contained buttons. Destroying a buttonset also calls the button's destroy method.</p>
+
+<p>When using an input of type button, submit or reset, support is limited to plain text labels with no icons.</p>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="text" type="Boolean" default='true'>
+ <desc>Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.</desc>
+ </option>
+ <option name="icons" type="Options" default='{ primary: null, secondary: null }'>
+ <desc>Icons to display, with or without text (see text option). The primary icon is displayed by default on the left of the label text, the secondary by default is on the right. Value for the primary and secondary properties must be a classname (String), eg. "ui-icon-gear". For using only one icon: icons: {primary:'ui-icon-locked'}. For using two icons: icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}</desc>
+ </option>
+ <option name="label" type="String" default='HTML content of the button, or value attribute'>
+ <desc>Text to show on the button. When not specified (null), the element's html content is used, or its value attribute when it's an input element of type submit or reset; or the html content of the associated label element if its an input of type radio or checkbox</desc>
+ </option>
+
+ </options>
+ <events>
+<p>There are no events for this plugin.</p>
+
+ </events>
+ <methods>
+ <method name="refresh">
+ <desc>Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.</desc>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Button.</desc>
+ <code><![CDATA[$("button").button();]]></code>
+ <html><![CDATA[
+<button>Button label</button>
+
+]]></html>
+
+ <desc>A simple jQuery UI Button.</desc>
+ <code><![CDATA[$("#radio").buttonset();]]></code>
+ <html><![CDATA[
+<div id="radio">
+ <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
+ <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
+ <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
+</div>
+
+]]></html>
+
+ </example>
+</entry>
View
44 entries/clip-effect.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="clip" namespace="effect" type="effect">
+ <desc>
+ The clip effect will hide or show an element by clipping the element vertically or horizontally
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element</dd>
+ <dt>show</dt>
+ <dd>Shows the element.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="direction" type="String" default='"up"'>
+ <desc>
+ <p>The plane in which the clip effect will hide or show its element</p>
+ <p>Possible Values</p>
+ <dl>
+ <dt>vertical</dt>
+ <dd>Uses top &amp; bottom edges</dd>
+ <dt>horizontal</dt>
+ <dd>Uses left &amp; right edges</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ </options>
+</entry>
View
296 entries/datepicker.xml
@@ -0,0 +1,296 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="datepicker" namespace="fn" type="Widget" widgetnamespace="ui">
+ <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>
+
+By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.
+
+You can use keyboard shortcuts to drive the datepicker:
+
+<ul>
+ <li>page up/down - previous/next month</li>
+ <li>ctrl+page up/down - previous/next year</li>
+ <li>ctrl+home - current month or open when closed</li>
+ <li>ctrl+left/right - previous/next day</li>
+ <li>ctrl+up/down - previous/next week</li>
+ <li>enter - accept the selected date</li>
+ <li>ctrl+end - close and erase the date</li>
+ <li>escape - close the datepicker without selection</li>
+</ul>
+
+<h3 id="utility-functions">Utility functions</h3>
+<ul>
+ <li>[[UI/Datepicker/setDefaults|$.datepicker.setDefaults( settings )]] - Set settings for all datepicker instances.</li>
+ <li>[[UI/Datepicker/formatDate|$.datepicker.formatDate( format, date, settings )]] - Format a date into a string value with a specified format.</li>
+ <li>[[UI/Datepicker/parseDate|$.datepicker.parseDate( format, value, settings ) ]] - Extract a date from a string value with a specified format.</li>
+ <li>[[UI/Datepicker/iso8601Week|$.datepicker.iso8601Week( date )]] - Determine the week of the year for a given date: 1 to 53.</li>
+ <li>[[UI/Datepicker/noWeekends|$.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. They add their settings to the set
+ of available localizations and automatically apply them as defaults for all instances.</p>
+<p>The <code>$.datepicker.regional</code> attribute holds an array of localizations,
+ indexed by language code, with "" referring to the default (English). Each entry is
+ an object with the following attributes: <code>closeText</code>, <code>prevText</code>,
+ <code>nextText</code>, <code>currentText</code>, <code>monthNames</code>,
+ <code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>,
+ <code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>,
+ <code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>,
+ and <code>yearSuffix</code>.</p>
+<p>You can restore the default localizations with:</p>
+<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>
+
+The localization files are also available in the UI svn: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/
+
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="altField" type="Selector, jQuery, Element" default='""'>
+ <desc>The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code>[[UI/Datepicker#option-altFormat|altFormat]]</code> setting to change the format of the date within this field. Leave as blank for no alternate field.</desc>
+ </option>
+ <option name="altFormat" type="String" default='""'>
+ <desc>The <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> to be used for the <code>[[UI/Datepicker#option-altField|altField]]</code> 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</desc>
+ </option>
+ <option name="appendText" type="String" default='""'>
+ <desc>The text to display after each date field, e.g. to show the required format.</desc>
+ </option>
+ <option name="autoSize" type="Boolean" default='false'>
+ <desc>Set to true to automatically resize the input field to accommodate dates in the current <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code>.</desc>
+ </option>
+ <option name="buttonImage" type="String" default='""'>
+ <desc>The URL for the popup button image. If set, <code>[[UI/Datepicker#option-buttonText|buttonText]]</code> becomes the ''alt'' value and is not directly displayed.</desc>
+ </option>
+ <option name="buttonImageOnly" type="Boolean" default='false'>
+ <desc>Set to true to place an image after the field to use as the trigger without it appearing on a button.</desc>
+ </option>
+ <option name="buttonText" type="String" default='"..."'>
+ <desc>The text to display on the trigger button. Use in conjunction with <code>[[UI/Datepicker#option-showOn|showOn]]</code> equal to 'button' or 'both'.</desc>
+ </option>
+ <option name="calculateWeek" type="Function|$.datepicker.iso8601Week" default='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.'>
+ <desc>myWeekCalc</desc>
+ </option>
+ <option name="changeMonth" type="Boolean" default='false'>
+ <desc>Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.</desc>
+ </option>
+ <option name="changeYear" type="Boolean" default='false'>
+ <desc>Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the <code>[[UI/Datepicker#option-yearRange|yearRange]]</code> option to control which years are made available for selection.</desc>
+ </option>
+ <option name="closeText" type="String" default='"Done"'>
+ <desc>The text to display for the close link. This attribute is one of the regionalisation attributes. Use the <code>[[UI/Datepicker#option-showButtonPanel|showButtonPanel]]</code> to display this button.</desc>
+ </option>
+ <option name="constrainInput" type="Boolean" default='true'>
+ <desc>When true entry in the input field is constrained to those characters allowed by the current <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code>.</desc>
+ </option>
+ <option name="currentText" type="String" default='"Today"'>
+ <desc>The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the <code>[[UI/Datepicker#option-showButtonPanel|showButtonPanel]]</code> to display this button.</desc>
+ </option>
+ <option name="dateFormat" type="String" default='"mm/dd/yy"'>
+ <desc>The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the <code>[[UI/Datepicker/formatDate|formatDate]]</code> function.</desc>
+ </option>
+ <option name="dayNames" type="Array" default='["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]'>
+ <desc>The list of long day names, starting from Sunday, for use as requested via the <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="dayNamesMin" type="Array" default='["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]'>
+ <desc>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="dayNamesShort" type="Array" default='["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]'>
+ <desc>The list of abbreviated day names, starting from Sunday, for use as requested via the <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> setting. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="defaultDate" type="Date, Number, String" default='null'>
+ <desc>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.</desc>
+ </option>
+ <option name="duration" type="String, Number" default='"normal"'>
+ <desc>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").</desc>
+ </option>
+ <option name="firstDay" type="Number" default='0'>
+ <desc>Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="gotoCurrent" type="Boolean" default='false'>
+ <desc>When true the current day link moves to the currently selected date instead of today.</desc>
+ </option>
+ <option name="hideIfNoPrevNext" type="Boolean" default='false'>
+ <desc>Normally the previous and next links are disabled when not applicable (see <code>[[UI/Datepicker#option-minDate|minDate]]</code>/<code>[[UI/Datepicker#option-maxDate|maxDate]]</code>). You can hide them altogether by setting this attribute to true.</desc>
+ </option>
+ <option name="isRTL" type="Boolean" default='false'>
+ <desc>True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="maxDate" type="Date, Number, String" default='null'>
+ <desc>Set a maximum selectable 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 +1w'), or null for no limit.</desc>
+ </option>
+ <option name="minDate" type="Date, Number, String" default='null'>
+ <desc>Set a minimum selectable 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. '-1y -1m'), or null for no limit.</desc>
+ </option>
+ <option name="monthNames" type="Array" default='["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]'>
+ <desc>The list of full month names, for use as requested via the <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> setting. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="monthNamesShort" type="Array" default='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'>
+ <desc>The list of abbreviated month names, as used in the month header on each datepicker and as requested via the <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> setting. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="navigationAsDateFormat" type="Boolean" default='false'>
+ <desc>When true the <code>[[UI/Datepicker/formatDate|formatDate]]</code> function is applied to the <code>[[UI/Datepicker#option-prevText|prevText]]</code>, <code>[[UI/Datepicker#option-nextText|nextText]]</code>, and <code>[[UI/Datepicker#option-currentText|currentText]]</code> values before display, allowing them to display the target month names for example.</desc>
+ </option>
+ <option name="nextText" type="String" default='"Next"'>
+ <desc>The text to display for the next month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</desc>
+ </option>
+ <option name="numberOfMonths" type="Number, Array" default='1'>
+ <desc>Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.</desc>
+ </option>
+ <option name="prevText" type="String" default='"Prev"'>
+ <desc>The text to display for the previous month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</desc>
+ </option>
+ <option name="selectOtherMonths" type="Boolean" default='false'>
+ <desc>When true days in other months shown before or after the current month are selectable. This only applies if <code>[[UI/Datepicker#option-showOtherMonths|showOtherMonths]]</code> is also true.</desc>
+ </option>
+ <option name="shortYearCutoff" type="String, Number" default='"+10"'>
+ <desc>Set the cutoff year for determining the century for a date (used in conjunction with <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.</desc>
+ </option>
+ <option name="showAnim" type="String" default='"show"'>
+ <desc>Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide [http://docs.jquery.com/UI/Effects jQuery UI effects], or "" for no animation.</desc>
+ </option>
+ <option name="showButtonPanel" type="Boolean" default='false'>
+ <desc>Whether to show the button panel.</desc>
+ </option>
+ <option name="showCurrentAtPos" type="Number" default='0'>
+ <desc>Specify where in a [[UI/Datepicker#option-numberOfMonths|multi-month]] display the current month shows, starting from 0 at the top/left.</desc>
+ </option>
+ <option name="showMonthAfterYear" type="Boolean" default='false'>
+ <desc>Whether to show the month after the year in the header. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+ <option name="showOn" type="String" default='"focus"'>
+ <desc>Have the datepicker appear automatically when the field receives focus ("focus"), appear only when a button is clicked ("button"), or appear when either event taks place ("both").</desc>
+ </option>
+ <option name="showOptions" type="Options" default='{}'>
+ <desc>If using one of the jQuery UI effects for <code>[[UI/Datepicker#option-showAnim|showAnim]]</code>, you can provide additional settings for that animation via this option.</desc>
+ </option>
+ <option name="showOtherMonths" type="Boolean" default='false'>
+ <desc>Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use <code>[[UI/Datepicker#option-selectOtherMonths|selectOtherMonths]]</code>.</desc>
+ </option>
+ <option name="showWeek" type="Boolean" default='false'>
+ <desc>When true a column is added to show the week of the year. The <code>[[UI/Datepicker#option-calculateWeek|calculateWeek]]</code> option determines how the week of the year is calculated. You may also want to change the <code>[[UI/Datepicker#option-firstDay|firstDay]]</code> option.</desc>
+ </option>
+ <option name="stepMonths" type="Number" default='1'>
+ <desc>Set how many months to move when clicking the Previous/Next links.</desc>
+ </option>
+ <option name="weekHeader" type="String" default='"Wk"'>
+ <desc>The text to display for the week of the year column heading. This attribute is one of the regionalisation attributes. Use <code>[[UI/Datepicker#option-showWeek|showWeek]]</code> to display this column.</desc>
+ </option>
+ <option name="yearRange" type="String" default='"c-10:c+10"'>
+ <desc>Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <code>[[UI/Datepicker#option-minDate|minDate]]</code> and/or <code>[[UI/Datepicker#option-maxDate|maxDate]]</code> options.</desc>
+ </option>
+ <option name="yearSuffix" type="String" default='""'>
+ <desc>Additional text to display after the year in the month headers. This attribute is one of the regionalisation attributes.</desc>
+ </option>
+
+ </options>
+ <events>
+<p><b>Known issue: Datepicker does not trigger a create event.</b></p> <event name="beforeShow" type="function(input, inst)">
+ <desc>Can be 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.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="beforeShowDay" type="function(date)">
+ <desc>The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or "" for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="onChangeMonthYear" type="function(year, month, inst)">
+ <desc>Allows you to define your own event 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.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="onClose" type="function(dateText, inst)">
+ <desc>Allows you to define your own event when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ("" if none) and the datepicker instance as parameters. <code>this</code> refers to the associated input field.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="onSelect" type="function(dateText, inst)">
+ <desc>Allows you to define your own event 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.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+ <method name="dialog">
+ <desc>Function</desc>
+ <argument name="date" type="String or Date">
+ <desc></desc>
+ </argument>
+ <argument name="onSelect" type="Function" optional="true">
+ <desc></desc>
+ </argument>
+ <argument name="settings" type="Options" optional="true">
+ <desc></desc>
+ </argument>
+ <argument name="pos" type="Number[2] or MouseEvent" optional="true">
+ <desc></desc>
+ </argument>
+ </method>
+ <method name="isDisabled">
+ <desc>Determine whether a date picker has been disabled.</desc>
+ </method>
+ <method name="hide">
+ <desc>Close a previously opened date picker.</desc>
+ </method>
+ <method name="show">
+ <desc>Call up a previously attached date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.</desc>
+ </method>
+ <method name="refresh">
+ <desc>Redraw a date picker, after having made some external modifications.</desc>
+ </method>
+ <method name="getDate">
+ <desc>Returns the current date for the datepicker or null if no date has been selected.</desc>
+ </method>
+ <method name="setDate">
+ <desc>Sets the current date for the datepicker. The new date may be a Date object or a string in the current [[UI/Datepicker#option-dateFormat|date format]] (e.g. '01/26/2009'), 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 to clear the selected date.</desc>
+ <argument name="date" type="Date">
+ <desc>The new current date.</desc>
+ </argument>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Datepicker.</desc>
+ <code><![CDATA[$("#datepicker").datepicker();]]></code>
+ <html><![CDATA[
+<div id="datepicker"></div>
+
+]]></html>
+
+ </example>
+</entry>
View
218 entries/dialog.xml
@@ -0,0 +1,218 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="dialog" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.</p>
+
+<p>If the content length exceeds the maximum height, a scrollbar will automatically appear.</p>
+
+<p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.</p>
+
+<p>A call to <code>$(foo).dialog()</code> will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: <code>$(foo).dialog({ autoOpen: false })</code> and open it with <code>$(foo).dialog('open')</code>. To close it, use <code>$(foo).dialog('close')</code>. A more in-depth explanation with a full demo is available on [http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ the Nemikor blog].</p>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="autoOpen" type="Boolean" default='true'>
+ <desc>When ''autoOpen'' is ''true'' the dialog will open automatically when ''dialog'' is called. If ''false'' it will stay hidden until ''.dialog("open")'' is called on it.</desc>
+ </option>
+ <option name="buttons" type="Object" default='{ }'>
+ <desc>Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.
+</desc>
+ </option>
+ <option name="buttons" type="Array" default='[ ]'>
+ <desc>Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button.
+</desc>
+ </option>
+ <option name="closeOnEscape" type="Boolean" default='true'>
+ <desc>Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.</desc>
+ </option>
+ <option name="closeText" type="String" default='"close"'>
+ <desc>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</desc>
+ </option>
+ <option name="dialogClass" type="String" default='""'>
+ <desc>The specified class name(s) will be added to the dialog, for additional theming.</desc>
+ </option>
+ <option name="draggable" type="Boolean" default='true'>
+ <desc>If set to true, the dialog will be draggable will be draggable by the titlebar.</desc>
+ </option>
+ <option name="height" type="Number" default='"auto"'>
+ <desc>The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.</desc>
+ </option>
+ <option name="hide" type="String" default='null'>
+ <desc>The effect to be used when the dialog is closed.</desc>
+ </option>
+ <option name="hide" type="Object" default='null'>
+ <desc>The effect to be used when the dialog is closed.</desc>
+ </option>
+ <option name="maxHeight" type="Number" default='false'>
+ <desc>The maximum height to which the dialog can be resized, in pixels.</desc>
+ </option>
+ <option name="maxWidth" type="Number" default='false'>
+ <desc>The maximum width to which the dialog can be resized, in pixels.</desc>
+ </option>
+ <option name="minHeight" type="Number" default='150'>
+ <desc>The minimum height to which the dialog can be resized, in pixels.</desc>
+ </option>
+ <option name="minWidth" type="Number" default='150'>
+ <desc>The minimum width to which the dialog can be resized, in pixels.</desc>
+ </option>
+ <option name="modal" type="Boolean" default='false'>
+ <desc>If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.</desc>
+ </option>
+ <option name="position" type="String, Array" default='"center"'>
+ <desc>Specifies where the dialog should be displayed. Possible values: <br/>1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. <br/>2) an array containing an <em>x,y</em> coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) <br/>3) an array containing <em>x,y</em> position string values (e.g. ['right','top'] for top right corner).</desc>
+ </option>
+ <option name="resizable" type="Boolean" default='true'>
+ <desc>If set to true, the dialog will be resizable.</desc>
+ </option>
+ <option name="show" type="String" default='null'>
+ <desc>The effect to be used when the dialog is opened.</desc>
+ </option>
+ <option name="show" type="Object" default='null'>
+ <desc>The effect to be used when the dialog is opened.</desc>
+ </option>
+ <option name="stack" type="Boolean" default='true'>
+ <desc>Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.</desc>
+ </option>
+ <option name="title" type="String" default='""'>
+ <desc>Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.</desc>
+ </option>
+ <option name="width" type="Number" default='300'>
+ <desc>The width of the dialog, in pixels.</desc>
+ </option>
+ <option name="zIndex" type="Integer" default='1000'>
+ <desc>The starting z-index for the dialog.</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="beforeClose" type="dialogbeforeclose">
+ <desc>This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="open" type="dialogopen">
+ <desc>This event is triggered when dialog is opened.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="focus" type="dialogfocus">
+ <desc>This event is triggered when the dialog gains focus.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="dragStart" type="dialogdragstart">
+ <desc>This event is triggered at the beginning of the dialog being dragged.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="drag" type="dialogdrag">
+ <desc>This event is triggered when the dialog is dragged.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="dragStop" type="dialogdragstop">
+ <desc>This event is triggered after the dialog has been dragged.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="resizeStart" type="dialogresizestart">
+ <desc>This event is triggered at the beginning of the dialog being resized.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="resize" type="dialogresize">
+ <desc>This event is triggered when the dialog is resized. [http://www.jsfiddle.net/Jp7TM/18/ demo]
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="resizeStop" type="dialogresizestop">
+ <desc>This event is triggered after the dialog has been resized.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="close" type="dialogclose">
+ <desc>This event is triggered when the dialog is closed.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+ <method name="close">
+ <desc>Close the dialog.</desc>
+ </method>
+ <method name="isOpen">
+ <desc>Returns true if the dialog is currently open.</desc>
+ </method>
+ <method name="moveToTop">
+ <desc>Move the dialog to the top of the dialogs stack.</desc>
+ </method>
+ <method name="open">
+ <desc>Open the dialog.</desc>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Dialog.</desc>
+ <code><![CDATA[$("#dialog").dialog();]]></code>
+ <html><![CDATA[
+<div id="dialog" title="Dialog Title">I'm in a dialog</div>
+
+]]></html>
+
+ </example>
+</entry>
View
153 entries/draggable.xml
@@ -0,0 +1,153 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="draggable" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>The jQuery UI Draggable plugin makes selected elements draggable by mouse.</p>
+<p>Draggable elements gets a class of <code>ui-draggable</code>. During drag the element also gets a class of <code>ui-draggable-dragging</code>. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.</p>
+<p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
+<ul>
+<li><b>ui.helper</b> - the jQuery object representing the helper that's being dragged</li>
+<li><b>ui.position</b> - current position of the helper as { top, left } object, relative to the offset element</li>
+<li><b>ui.offset</b> - current absolute position of the helper as { top, left } object, relative to page</li>
+</ul>
+
+
+<p>To manipulate the position of a draggable during drag, you can either [http://jsbin.com/etako/edit use a wrapper as the draggable helper] and position the wrapped element with absolute positioning, or you can correct internal values like so: <code>$(this).data('draggable').offset.click.top -= x</code>.</p>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="addClasses" type="Boolean" default='true'>
+ <desc>If set to false, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> init on many hundreds of elements.</desc>
+ </option>
+ <option name="appendTo" type="Element, Selector" default='"parent"'>
+ <desc>The element passed to or selected by the <code>appendTo</code> option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.</desc>
+ </option>
+ <option name="axis" type="String" default='false'>
+ <desc>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.</desc>
+ </option>
+ <option name="cancel" type="Selector" default='":input,option"'>
+ <desc>Prevents dragging from starting on specified elements.</desc>
+ </option>
+ <option name="connectToSortable" type="Selector" default='false'>
+ <desc>Allows the draggable to be dropped onto the specified sortables. If this option is used (<code>helper</code> must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it.
+
+Note: Specifying this option as an array of selectors has been removed.</desc>
+ </option>
+ <option name="containment" type="Selector, Element, String, Array" default='false'>
+ <desc>Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].</desc>
+ </option>
+ <option name="cursor" type="String" default='"auto"'>
+ <desc>The css cursor during the drag operation.</desc>
+ </option>
+ <option name="cursorAt" type="Object" default='false'>
+ <desc>Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</desc>
+ </option>
+ <option name="delay" type="Integer" default='0'>
+ <desc>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</desc>
+ </option>
+ <option name="distance" type="Integer" default='1'>
+ <desc>Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</desc>
+ </option>
+ <option name="grid" type="Array" default='false'>
+ <desc>Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]</desc>
+ </option>
+ <option name="handle" type="Element, Selector" default='false'>
+ <desc>If specified, restricts drag start click to the specified element(s).</desc>
+ </option>
+ <option name="helper" type="String, Function" default='"original"'>
+ <desc>Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.</desc>
+ </option>
+ <option name="iframeFix" type="Boolean, Selector" default='false'>
+ <desc>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.</desc>
+ </option>
+ <option name="opacity" type="Float" default='false'>
+ <desc>Opacity for the helper while being dragged.</desc>
+ </option>
+ <option name="refreshPositions" type="Boolean" default='false'>
+ <desc>If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</desc>
+ </option>
+ <option name="revert" type="Boolean, String" default='false'>
+ <desc>If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.</desc>
+ </option>
+ <option name="revertDuration" type="Integer" default='500'>
+ <desc>The duration of the revert animation, in milliseconds. Ignored if revert is false.</desc>
+ </option>
+ <option name="scope" type="String" default='"default"'>
+ <desc>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.</desc>
+ </option>
+ <option name="scroll" type="Boolean" default='true'>
+ <desc>If set to true, container auto-scrolls while dragging.</desc>
+ </option>
+ <option name="scrollSensitivity" type="Integer" default='20'>
+ <desc>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.</desc>
+ </option>
+ <option name="scrollSpeed" type="Integer" default='20'>
+ <desc>The speed at which the window should scroll once the mouse pointer gets within the <code>scrollSensitivity</code> distance.</desc>
+ </option>
+ <option name="snap" type="Boolean, Selector" default='false'>
+ <desc>If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.</desc>
+ </option>
+ <option name="snapMode" type="String" default='"both"'>
+ <desc>Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'</desc>
+ </option>
+ <option name="snapTolerance" type="Integer" default='20'>
+ <desc>The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.</desc>
+ </option>
+ <option name="stack" type="Selector" default='false'>
+ <desc>Controls the z-Index of the set of elements that match the selector, always brings to front the dragged item. Very useful in things like window managers.</desc>
+ </option>
+ <option name="zIndex" type="Integer" default='false'>
+ <desc>z-index for the helper while being dragged.</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="start" type="dragstart">
+ <desc>This event is triggered when dragging starts.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="drag" type="drag">
+ <desc>This event is triggered when the mouse is moved during the dragging.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="stop" type="dragstop">
+ <desc>This event is triggered when dragging stops.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+
+
+ </methods>
+ <example>
+
+ <desc>Initialize a draggable with default options.</desc>
+ <inhead><![CDATA[<style type="text/css">
+ #draggable { width: 100px; height: 70px; background: silver; }
+ </style>]]></inhead>
+ <code><![CDATA[$("#draggable").draggable();]]></code>
+ <html><![CDATA[
+<div id="draggable">Drag me</div>
+
+]]></html>
+
+ </example>
+</entry>
View
44 entries/drop-effect.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="drop" namespace="effect" type="effect">
+ <desc>
+ The drop effect hides or shows an element fading in/out and sliding in a direction.
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element by dropping in the direction</dd>
+ <dt>show</dt>
+ <dd>Shows the element by undropping from the direction. This seems inverted from the hide.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="direction" type="String" default='"left"'>
+ <desc>
+ <p>The direction the element will fall to "hide" the element, or the direction from which the element will be revealed.</p>
+ <p>Possible Values</p>
+ <dl>
+ <dt>up</dt>
+ <dt>down</dt>
+ <dt>left</dt>
+ <dt>right</dt>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ </options>
+</entry>
View
118 entries/droppable.xml
@@ -0,0 +1,118 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="droppable" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.</p>
+<p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
+<ul>
+ <li> <b>ui.draggable</b> - current draggable element, a jQuery object.</li>
+ <li> <b>ui.helper</b> - current draggable helper, a jQuery object</li>
+ <li> <b>ui.position</b> - current position of the draggable helper { top: , left: }</li>
+ <li> <b>ui.offset</b> - current absolute position of the draggable helper { top: , left: }</li>
+</ul>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="accept" type="Selector, Function" default='"*"'>
+ <desc>All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.</desc>
+ </option>
+ <option name="activeClass" type="String" default='false'>
+ <desc>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</desc>
+ </option>
+ <option name="addClasses" type="Boolean" default='true'>
+ <desc>If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.</desc>
+ </option>
+ <option name="greedy" type="Boolean" default='false'>
+ <desc>If true, will prevent event propagation on nested droppables.</desc>
+ </option>
+ <option name="hoverClass" type="String" default='false'>
+ <desc>If specified, the class will be added to the droppable while an acceptable draggable is being hovered.</desc>
+ </option>
+ <option name="scope" type="String" default='"default"'>
+ <desc>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.</desc>
+ </option>
+ <option name="tolerance" type="String" default='"intersect"'>
+ <desc>Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.
+<ul>
+<li>'''fit''': draggable overlaps the droppable entirely</li>
+<li>'''intersect''': draggable overlaps the droppable at least 50%</li>
+<li>'''pointer''': mouse pointer overlaps the droppable</li>
+<li>'''touch''': draggable overlaps the droppable any amount</li>
+</ul>
+</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="activate" type="dropactivate">
+ <desc>This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="deactivate" type="dropdeactivate">
+ <desc>This event is triggered any time an accepted draggable stops dragging.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="over" type="dropover">
+ <desc>This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="out" type="dropout">
+ <desc>This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="drop" type="drop">
+ <desc>This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on.
+ui.draggable represents the draggable.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+
+
+ </methods>
+ <example>
+ <desc>Makes the div droppable (a drop target for a draggable).</desc>
+ <inhead><![CDATA[<style type="text/css">
+ #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
+ #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
+ </style>]]></inhead>
+ <code><![CDATA[$("#draggable").draggable();
+ $("#droppable").droppable({
+ drop: function() { alert('dropped'); }
+ });]]></code>
+ <html><![CDATA[
+<div id="droppable">Drop here</div>
+<div id="draggable">Drag me</div>
+
+]]></html>
+
+ </example>
+</entry>
View
35 entries/explode-effect.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="explode" namespace="effect" type="effect">
+ <desc>
+ The explode effect hides or shows an element by splitting it into pieces.
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element.</dd>
+ <dt>show</dt>
+ <dd>Shows the element.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ <option name="pieces" type="Number" default="9">
+ <desc>The number of pieces to explode, should be a perfect square, any other values are rounded to the nearest square.</desc>
+ </option>
+ </options>
+</entry>
View
32 entries/fade-effect.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="fade" namespace="effect" type="effect">
+ <desc>
+ The fade effect hides or shows an element by fading it.
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element.</dd>
+ <dt>show</dt>
+ <dd>Shows the element.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ </options>
+</entry>
View
38 entries/fold-effect.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="fold" namespace="effect" type="effect">
+ <desc>
+ The fold effect hides or shows an element by folding it.
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element.</dd>
+ <dt>show</dt>
+ <dd>Shows the element.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ <option name="size" type="Number|String" default="15">
+ <desc>The size of the "folded" element, can be a number representing px, or a string containing a percentage I.E. "50%"</desc>
+ </option>
+ <option name="horizFirst" type="Boolean" default="false">
+ <desc>If the horizontal direction happens first when hiding. Remember, showing inverts hiding.</desc>
+ </option>
+ </options>
+</entry>
View
35 entries/highlight-effect.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="highlight" namespace="effect" type="effect">
+ <desc>
+ The highlight effect hides or shows an element by animating its background color first.
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element.</dd>
+ <dt>show</dt>
+ <dd>Shows the element.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ <option name="color" type="String" default='"#ffff99"'>
+ <desc>The background color used during the animation</desc>
+ </option>
+ </options>
+</entry>
View
64 entries/progressbar.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="progressbar" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>
+The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.
+</p>
+<p>
+This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback.
+</p>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="value" type="Number" default='0'>
+ <desc>The value of the progressbar.</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="change" type="progressbarchange">
+ <desc>This event is triggered when the value of the progressbar changes.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="complete" type="progressbarcomplete">
+ <desc>This event is triggered when the value of the progressbar reaches the maximum value of 100.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+ <method name="value">
+ <desc>This method gets or sets the current value of the progressbar.
+</desc>
+ <argument name="value" type="Number" optional="true">
+ <desc></desc>
+ </argument>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Progressbar.</desc>
+ <code><![CDATA[$("#progressbar").progressbar({ value: 37 });]]></code>
+ <html><![CDATA[
+<div id="progressbar"></div>
+
+]]></html>
+
+ </example>
+</entry>
View
37 entries/pulsate-effect.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="pulsate" namespace="effect" type="effect">
+ <desc>
+ The pulsate effect hides or shows an element by pulsing it in or out.
+ </desc>
+ <options>
+ <option name="mode" type="String" default='"hide"'>
+ <desc>
+ <p>UI Effect Mode</p>
+ <p>Possible Values: </p>
+ <dl>
+ <dt>hide</dt>
+ <dd>Hides the element.</dd>
+ <dt>show</dt>
+ <dd>Shows the element.</dd>
+ <dt>toggle</dt>
+ <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
+ <dt>effect</dt>
+ <dd>Just pulsates.</dd>
+ </dl>
+ </desc>
+ </option>
+ <option name="duration" type="Number" default="400">
+ <desc>The number of ms the animation will run for</desc>
+ </option>
+ <option name="easing" type="String" default='"swing"'>
+ <desc>The easing function to use</desc>
+ </option>
+ <option name="complete" type="function">
+ <desc>A callback function, executed when the effect completes</desc>
+ </option>
+ <option name="times" type="Number" default="5">
+ <desc>The number of times the element should pulse. An extra half pulse is added for hide/show</desc>
+ </option>
+ </options>
+</entry>
View
124 entries/resizable.xml
@@ -0,0 +1,124 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="resizable" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.</p>
+<p>All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields:</p>
+<ul>
+<li><b>ui.helper</b> - a jQuery object containing the helper element</li>
+<li><b>ui.originalPosition</b> - {top, left} before resizing started</li>
+<li><b>ui.originalSize</b> - {width, height} before resizing started</li>
+<li><b>ui.position</b> - {top, left} current position</li>
+<li><b>ui.size</b> - {width, height} current size</li>
+</ul>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="alsoResize" type="Selector, jQuery, Element" default='false'>
+ <desc>Resize these elements synchronous when resizing.</desc>
+ </option>
+ <option name="animate" type="Boolean" default='false'>
+ <desc>Animates to the final size after resizing.</desc>
+ </option>
+ <option name="animateDuration" type="Integer, String" default='"slow"'>
+ <desc>Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.</desc>
+ </option>
+ <option name="animateEasing" type="String" default='"swing"'>
+ <desc>Easing effect for animating.</desc>
+ </option>
+ <option name="aspectRatio" type="Boolean, Float" default='false'>
+ <desc>If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5.</desc>
+ </option>
+ <option name="autoHide" type="Boolean" default='false'>
+ <desc>If set to true, automatically hides the handles except when the mouse hovers over the element.</desc>
+ </option>
+ <option name="cancel" type="Selector" default='":input,option"'>
+ <desc>Prevents resizing if you start on elements matching the selector.</desc>
+ </option>
+ <option name="containment" type="String, Element, Selector" default='false'>
+ <desc>Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.</desc>
+ </option>
+ <option name="delay" type="Integer" default='0'>
+ <desc>Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.</desc>
+ </option>
+ <option name="distance" type="Integer" default='1'>
+ <desc>Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.</desc>
+ </option>
+ <option name="ghost" type="Boolean" default='false'>
+ <desc>If set to true, a semi-transparent helper element is shown for resizing.</desc>
+ </option>
+ <option name="grid" type="Array" default='false'>
+ <desc>Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]</desc>
+ </option>
+ <option name="handles" type="String, Object" default='"e, s, se"'>
+ <desc>If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin.
+
+If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.</desc>
+ </option>
+ <option name="helper" type="String" default='false'>
+ <desc>This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.</desc>
+ </option>
+ <option name="maxHeight" type="Integer" default='null'>
+ <desc>This is the maximum height the resizable should be allowed to resize to.</desc>
+ </option>
+ <option name="maxWidth" type="Integer" default='null'>
+ <desc>This is the maximum width the resizable should be allowed to resize to.</desc>
+ </option>
+ <option name="minHeight" type="Integer" default='10'>
+ <desc>This is the minimum height the resizable should be allowed to resize to.</desc>
+ </option>
+ <option name="minWidth" type="Integer" default='10'>
+ <desc>This is the minimum width the resizable should be allowed to resize to.</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="start" type="resizestart">
+ <desc>This event is triggered at the start of a resize operation.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="resize" type="resize">
+ <desc>This event is triggered during the resize, on the drag of the resize handler.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="stop" type="resizestop">
+ <desc>This event is triggered at the end of a resize operation.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Resizable.</desc>
+ <inhead><![CDATA[<style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>]]></inhead>
+ <code><![CDATA[$("#resizable").resizable();]]></code>
+ <html><![CDATA[
+<div id="resizable"></div>
+
+]]></html>
+
+ </example>
+</entry>
View
125 entries/selectable.xml
@@ -0,0 +1,125 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="selectable" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.</p>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="autoRefresh" type="Boolean" default='true'>
+ <desc>This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually.</desc>
+ </option>
+ <option name="cancel" type="Selector" default='":input,option"'>
+ <desc>Prevents selecting if you start on elements matching the selector.</desc>
+ </option>
+ <option name="delay" type="Integer" default='0'>
+ <desc>Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.</desc>
+ </option>
+ <option name="distance" type="Integer" default='0'>
+ <desc>Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.</desc>
+ </option>
+ <option name="filter" type="Selector" default='"*"'>
+ <desc>The matching child elements will be made selectees (able to be selected).</desc>
+ </option>
+ <option name="tolerance" type="String" default='"touch"'>
+ <desc>Possible values: 'touch', 'fit'.
+<ul>
+<li>'''fit''': draggable overlaps the droppable entirely</li>
+<li>'''touch''': draggable overlaps the droppable any amount</li>
+</ul>
+</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="selected" type="selectableselected">
+ <desc>This event is triggered at the end of the select operation, on each element added to the selection.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="selecting" type="selectableselecting">
+ <desc>This event is triggered during the select operation, on each element added to the selection.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="start" type="selectablestart">
+ <desc>This event is triggered at the beginning of the select operation.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="stop" type="selectablestop">
+ <desc>This event is triggered at the end of the select operation.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="unselected" type="selectableunselected">
+ <desc>This event is triggered at the end of the select operation, on each element removed from the selection.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="unselecting" type="selectableunselecting">
+ <desc>This event is triggered during the select operation, on each element removed from the selection.
+</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+ <method name="refresh">
+ <desc> Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.</desc>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Selectable.</desc>
+ <inhead><![CDATA[<style type="text/css">
+#selectable .ui-selecting {
+ background: silver;
+}
+#selectable .ui-selected {
+ background: gray;
+}
+</style>
+]]></inhead>
+ <code><![CDATA[$("#selectable").selectable();]]></code>
+ <html><![CDATA[
+<ul id="selectable">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+</ul>
+
+]]></html>
+
+ </example>
+</entry>
View
119 entries/slider.xml
@@ -0,0 +1,119 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="../../entries2html.xsl" ?>
+<entry name="slider" namespace="fn" type="Widget" widgetnamespace="ui">
+ <longdesc>
+
+<p>The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.</p>
+
+The start, slide, and stop callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):
+
+The slider widget will create handle elements with the class 'ui-slider-handle' on initialization. You can specify custom handle elements by creating and appending the elements and adding the 'ui-slider-handle' class before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two.
+
+<ul>
+ <li><b>ui.handle</b>: DOMElement - the current focused handle</li>
+ <li><b>ui.value</b>: Integer - the current handle's value</li>
+</ul>
+
+ </longdesc>
+ <created>1.0</created>
+ <options>
+ <option name="animate" type="Boolean, String, Number" default='false'>
+ <desc>Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</desc>
+ </option>
+ <option name="max" type="Number" default='100'>
+ <desc>The maximum value of the slider.</desc>
+ </option>
+ <option name="min" type="Number" default='0'>
+ <desc>The minimum value of the slider.</desc>
+ </option>
+ <option name="orientation" type="String" default='"horizontal"'>
+ <desc>This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.</desc>
+ </option>
+ <option name="range" type="Boolean, String" default='false'>
+ <desc>If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.</desc>
+ </option>
+ <option name="step" type="Number" default='1'>
+ <desc>Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.</desc>
+ </option>
+ <option name="value" type="Number" default='0'>
+ <desc>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</desc>
+ </option>
+ <option name="values" type="Array" default='null'>
+ <desc>This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.</desc>
+ </option>
+
+ </options>
+ <events>
+ <event name="start" type="slidestart">
+ <desc>This event is triggered when the user starts sliding.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="slide" type="slide">
+ <desc>This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.
+
+Return false in order to prevent a slide, based on ui.value.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="change" type="slidechange">
+ <desc>This event is triggered on slide stop, or if the value is changed programmatically (by the <code>value</code> method). Takes arguments event and ui. Use event.originalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+ <event name="stop" type="slidestop">
+ <desc>This event is triggered when the user stops sliding.</desc>
+ <argument name="event" type="Event">
+ <desc></desc>
+ </argument>
+ <argument name="ui" type="Object">
+ <desc></desc>
+ </argument>
+ </event>
+
+ </events>
+ <methods>
+ <method name="value">
+ <desc>Gets or sets the value of the slider. For single handle sliders.
+</desc>
+ <argument name="value" type="Number" optional="true">
+ <desc></desc>
+ </argument>
+ </method>
+ <method name="values">
+ <desc>Number</desc>
+ <argument name="index" type="Integer">
+ <desc></desc>
+ </argument>
+ <argument name="value" type="Number" optional="true">
+ <desc></desc>
+ </argument>
+ </method>
+
+ </methods>
+ <example>
+
+ <desc>A simple jQuery UI Slider.</desc>
+ <inhead><![CDATA[ <style type="text/css">
+ #slider { margin: 10px; }
+ </style>]]></inhead>
+ <code><![CDATA[$("#slider").slider();]]></code>
+ <html><![CDATA[
+<div id="slider"></div>
+
+]]></html>
+
+ </example>