Showing with 1,181 additions and 147 deletions.
  1. +21 −3 entries/accordion.xml
  2. +5 −1 entries/autocomplete.xml
  3. +27 −20 entries/button.xml
  4. +3 −1 entries/buttonset.xml
  5. +89 −0 entries/checkboxradio.xml
  6. +102 −0 entries/controlgroup.xml
  7. +57 −0 entries/cssClip.xml
  8. +14 −3 entries/dialog.xml
  9. +13 −0 entries/draggable.xml
  10. +20 −4 entries/droppable.xml
  11. +0 −20 entries/focus.xml
  12. +79 −0 entries/form-reset-mixin.xml
  13. +17 −0 entries/jQuery.effects.clipToBox.xml
  14. +19 −0 entries/jQuery.effects.createPlaceholder.xml
  15. +60 −0 entries/jQuery.effects.define.xml
  16. +17 −0 entries/jQuery.effects.removePlaceholder.xml
  17. +17 −0 entries/jQuery.effects.restoreStyle.xml
  18. +18 −0 entries/jQuery.effects.saveStyle.xml
  19. +23 −0 entries/jQuery.effects.scaledDimensions.xml
  20. +135 −0 entries/jQuery.widget.xml
  21. +29 −0 entries/labels.xml
  22. +74 −33 entries/menu.xml
  23. +2 −0 entries/mouse.xml
  24. +2 −2 entries/position.xml
  25. +10 −1 entries/progressbar.xml
  26. +18 −0 entries/resizable.xml
  27. +18 −0 entries/selectable.xml
  28. +80 −2 entries/selectmenu.xml
  29. +3 −0 entries/size-effect.xml
  30. +24 −3 entries/slider.xml
  31. +19 −0 entries/sortable.xml
  32. +9 −0 entries/spinner.xml
  33. +12 −2 entries/tabs.xml
  34. +17 −4 entries/tooltip.xml
  35. +2 −1 entries/transfer-effect.xml
  36. +66 −0 entries/transfer.xml
  37. +3 −3 entries2html.xsl
  38. +1 −1 includes/animation-signature-options.xml
  39. +1 −1 includes/class-animation-argument-options.xml
  40. +4 −0 includes/classes-option-desc.xml
  41. +23 −0 includes/classes-option-example.xml
  42. +1 −1 includes/widget-theming.xml
  43. +1 −1 pages/easings.html
  44. +1 −1 pages/theming/css-framework.html
  45. +1 −1 pages/theming/icons.html
  46. +12 −26 pages/theming/stacking-elements.md
  47. +3 −3 resources/color-animation.html
  48. +3 −3 resources/easing-comparison.html
  49. +3 −3 resources/easing-graph.html
  50. +3 −3 resources/icons-list.html
24 entries/accordion.xml
View file
@@ -39,8 +39,13 @@
<li>
<code>ui-accordion</code>: The outer container of the accordion.
<ul>
<li><code>ui-accordion-header</code>: The headers of the accordion. The headers will additionally have a <code>ui-accordion-icons</code> class if they contain <a href="#option-icons"><code>icons</code></a>.</li>
<li><code>ui-accordion-content</code>: The content panels of the accordion.</li>
<li>
<code>ui-accordion-header</code>: The headers of the accordion. The active header will additionally have a <code>ui-accordion-content-active</code> class, the inactive headers will have a <code>ui-accordion-header-collapsed</code> class. The headers will also have a <code>ui-accordion-icons</code> class if they contain <a href="#option-icons"><code>icons</code></a>.
<ul>
<li><code>ui-accordion-header-icon</code>: Icon elements within each accordion header.</li>
</ul>
</li>
<li><code>ui-accordion-content</code>: The content panels of the accordion. The active content panel will additionally have a <code>ui-accordion-content-active</code> class.</li>
</ul>
</li>
</ul>
@@ -86,6 +91,15 @@
</desc>
</type>
</option>
<option name="classes" type="Object">
<default>{
"ui-accordion-header": "ui-corner-top",
"ui-accordion-header-collapsed": "ui-corner-all",
"ui-accordion-content": "ui-corner-bottom"
}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="collapsible" type="Boolean" default="false" example-value="true">
<desc>Whether all the sections can be closed at once. Allows collapsing the active section.</desc>
</option>
@@ -108,7 +122,11 @@
</ul>
</desc>
</option>
<option name="icons" type="Object" default='{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }' example-value='{ "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }'>
<option name="icons" type="Object" example-value='{ "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }'>
<default>{
"header": "ui-icon-triangle-1-e",
"activeHeader": "ui-icon-triangle-1-s"
}</default>
<desc>
<p>Icons to use for headers, matching <a href="/theming/icons/">an icon provided by the jQuery UI CSS Framework</a>. Set to <code>false</code> to have no icons displayed.</p>
<ul>
6 entries/autocomplete.xml
View file
@@ -32,7 +32,7 @@

<ul>
<li><code>ui-autocomplete</code>: The <a href="/menu/#theming">menu</a> used to display matches to the user.</li>
<li><code>ui-autocomplete-input</code>: The input element that the Autocomplete widget was instantiated with.</li>
<li><code>ui-autocomplete-input</code>: The input element that the autocomplete widget was instantiated with. While requesting data to display to the user, the <code>ui-autocomplete-loading</code> class is also added to this element.</li>
</ul>

<h3>Dependencies</h3>
@@ -55,6 +55,10 @@
<option name="autoFocus" type="Boolean" default="false" example-value="true">
<desc>If set to <code>true</code> the first item will automatically be focused when the menu is shown.</desc>
</option>
<option name="classes" type="Object" default="{}">
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="delay" type="Integer" default="300" example-value="500">
<desc>The delay in milliseconds between when a keystroke occurs and when a search is performed. 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>
47 entries/button.xml
View file
@@ -5,49 +5,56 @@
<longdesc>
<p>Button enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover 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. For the association to work properly, give the input an <code>id</code> attribute, and refer to that in the label's <code>for</code> attribute. Don't nest the input inside the label, as that <a href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/">causes accessibility problems</a>.</p>

<p>In order to group radio buttons, you can use the <a href="/buttonset/">Buttonset</a> widget, which provides visual groupings of buttons.</p>

<p>When using an input of type button, submit or reset, support is limited to plain text labels with no icons.</p>

<p class="warning">Note: The button widget was rewritten in 1.12. Some options changed, you can find documentation for the old options in the <a href="/1.11/button/">1.11 button docs</a>. This widget used to bundle support for inputs of type radio and checkbox, this is now deprecated, use the <a href="/checkboxradio/">checkboxradio widget</a> instead. It also used to bundle the buttonset widget, this is also deprecated, use the <a href="/controlgroup/">controlgroup widget</a> instead.</p>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-button</code>: The DOM element that represents the button. This element will additionally have one of the following classes depending on the <a href="#option-text">text</a> and <a href="#option-icons">icons</a> option: <code>ui-button-text-only</code>, <code>ui-button-icon-only</code>, <code>ui-button-icons-only</code>, <code>ui-button-text-icons</code>.
<code>ui-button</code>: The DOM element that represents the button. This element will additionally have the <code>ui-button-icon-only</code> class, depending on the <a href="#option-showLabel">showLabel</a> and <a href="#option-icon">icon</a> options.
<ul>
<li>
<code>ui-button-icon-primary</code>: The element used to display the button's primary icon. This will only be present if a primary icon is provided in the <a href="#option-icons">icons</a> option.
<code>ui-button-icon</code>: The element used to display the button icon. This will only be present if an icon is provided in the <a href="#option-icon">icon</a> option.
</li>
<li>
<code>ui-button-text</code>: The container around the textual content of the button.
</li>
<li>
<code>ui-button-icon-secondary</code>: The element used to display the button's secondary icon. This will only be present if a secondary icon is provided in the <a href="#option-icons">icons</a> option.
<code>ui-button-icon-space</code>: A separator element between icon and text content of the button. This will only be present if an icon is provided in the <a href="#option-icon">icon</a> option and the <a href="#option-iconPosition">iconPosition</a> option is set to <code>"beginning"</code> or <code>"end"</code>.
</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
<li><a href="/jQuery.ui.keyCode/">jQuery.ui.keyCode</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
</ul>
</longdesc>
<note id="functional-css"/>
<added>1.8</added>
<added>1.8, rewritten: 1.12</added>
<options>
<option name="classes" type="Object">
<default>{
"ui-button": "ui-corner-all",
}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="icons" default="{ primary: null, secondary: null }" example-value='{ primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }'>
<option name="icon" default="null" example-value='{ icon: "ui-icon-gear" }'>
<desc>
<p>Icons to display, with or without text (see <a href="#option-text"><code>text</code></a> option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS.</p>

<p>The value for the <code>primary</code> and <code>secondary</code> properties must match <a href="/theming/icons/">an icon class name</a>, e.g., <code>"ui-icon-gear"</code>. For using only one icon: <code>icons: { primary: "ui-icon-locked" }</code>. For using two icons: <code>icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }</code>.</p>
<p>Icon to display, with or without text (see <a href="#option-showLabel"><code>showLabel</code></a> option). By default, the icon is displayed on the left of the label text. The positioning can be controlled using the <a href="#option-iconPosition"><code>iconPosition</code></a> option.</p>
<p>The value for this option must match <a href="/theming/icons/">an icon class name</a>, e.g., <code>"ui-icon-gear"</code>.</p>
<p>When using an input of type button, submit or reset, icons are not supported.</p>
</desc>
<type name="Object" />
<type name="String" />
</option>
<option name="iconPosition" default='"beginning"' example-value='{ iconPositon: "end" }'>
<desc>
<p>Where to display the <a href="#option-icon"><code>icon</code></a>: Valid values are "beginning", "end", "top" and "bottom". In a left-to-right (LTR) display, "beginning" refers to the left, in a right-to-left (RTL, e.g. in Hebrew or Arabic), it refers to the right.</p>
</desc>
<type name="String" />
</option>
<option name="label" default="null" example-value='"custom label"'>
<desc>
@@ -56,8 +63,8 @@
</desc>
<type name="String" />
</option>
<option name="text" default="true" example-value="false">
<desc>Whether to show the label. When set to <code>false</code> no text will be displayed, but the <a href="#option-icons"><code>icons</code></a> option must be enabled, otherwise the <code>text</code> option will be ignored.</desc>
<option name="showLabel" default="true" example-value="false">
<desc>Whether to show the label. When set to <code>false</code> no text will be displayed, but the <a href="#option-icon"><code>icon</code></a> option must be used, otherwise the <code>showLabel</code> option will be ignored.</desc>
<type name="Boolean" />
</option>
</options>
@@ -69,7 +76,7 @@
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<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 programmatically.</desc>
<desc>Refreshes the visual state of the button. Useful for updating button state after the native element's disabled state is changed programmatically.</desc>
</method>
<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
4 entries/buttonset.xml
View file
@@ -1,8 +1,10 @@
<?xml version="1.0"?>
<entry name="buttonset" type="widget" widget-element="button set element that contains the buttons">
<entry name="buttonset" type="widget" widget-element="button set element that contains the buttons" deprecated="1.12">
<title>Buttonset Widget</title>
<desc>Themeable button sets.</desc>
<longdesc>
<p class="warning">This widget is deprecated, use <a href="/controlgroup/">Controlgroup</a> instead.</p>

<div class="note">
<code>.buttonset()</code> is bundled with <code>.button()</code>. Although they are separate widgets, they are combined into a single file. If you have <code>.button()</code> available, you also have <code>.buttonset()</code> available.
</div>
89 entries/checkboxradio.xml
View file
@@ -0,0 +1,89 @@
<?xml version="1.0"?>
<entry name="checkboxradio" type="widget" widget-element="checkboxradio">
<title>Checkboxradio Widget</title>
<desc>Converts inputs of type radio and checkbox to themeable buttons.</desc>
<longdesc>
<p>Native HTML input elements are impossible to style consistently. This widget allows working around that limitation by positining the associated label on top of the hidden input, and emulating the checkbox or radio element itself using an (optional) icon. The original input still receives focus and all events, the label merely provides a themeable button on top.</p>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-checkboxradio</code>: The input of type radio or checkbox. Will be hidden, with its associated label positioned on top.
<ul>
<li>
<code>ui-checkboxradio-label</code>: The label associated with the input. If the input is checked, this will also get the <code>ui-checkboxradio-checked</code> class. If the input is of type radio, this will also get the <code>ui-checkboxradio-radio-label</code> class.
</li>
<li>
<code>ui-checkboxradio-icon</code>: If the <a href="#option-icon"><code>icon</code></a> option is enabled, the generated icon has this class.
</li>
<li>
<code>ui-checkboxradio-icon-space</code>: If the <a href="#option-icon"><code>icon</code></a> option is enabled, an extra element with this class as added between the text label and the icon.
</li>
</ul>
</li>

</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/labels/">.labels()</a></li>
<li><a href="/form-reset-mixin/">Form Reset Mixin</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
</ul>
</longdesc>
<note id="functional-css"/>
<added>1.12</added>
<options>
<option name="classes" type="Object">
<default>{
"ui-checkboxradio-label": "ui-corner-all",
"ui-checkboxradio-icon": "ui-corner-all"
}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="icon" default="true" example-value="false">
<desc>Whether to show the checkbox or radio icon, depending on the input's type.</desc>
<type name="Boolean" />
</option>
<option name="label" default="null" example-value='"custom label"'>
<desc>Text to show in the button. When not specified (<code>null</code>), the HTML content of the associated <code>&lt;label&gt;</code> element is used.</desc>
<type name="String" />
</option>
</options>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</events>
<methods>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="refresh">
<desc>Refreshes the visual state of the widget. Useful for updating after the native element's checked or disabled state is changed programmatically.</desc>
</method>
<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<height>100</height>
<desc>A simple jQuery UI checkboxradio</desc>
<code><![CDATA[
$( "input[type='radio']" ).checkboxradio();
]]></code>
<html><![CDATA[
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
]]></html>
</example>
<category slug="widgets"/>
</entry>