From 303f20e1b3c977d75047bed1a3533a180d73fab5 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Scott=20Gonz=C3=A1lez?= Date: Mon, 10 Sep 2012 11:33:46 -0400 Subject: [PATCH] Demos: Cleanup. --- demos/accordion/collapsible.html | 11 +- demos/accordion/custom-icons.html | 11 +- demos/accordion/default.html | 9 +- demos/accordion/fillspace.html | 71 ++-- demos/accordion/hoverintent.html | 7 +- demos/accordion/index.html | 24 +- demos/accordion/no-auto-height.html | 11 +- demos/accordion/sortable.html | 11 +- demos/addClass/default.html | 11 +- demos/addClass/index.html | 12 +- demos/animate/default.html | 11 +- demos/animate/index.html | 12 +- demos/autocomplete/categories.html | 15 +- demos/autocomplete/combobox.html | 11 +- demos/autocomplete/custom-data.html | 19 +- demos/autocomplete/default.html | 11 +- demos/autocomplete/folding.html | 11 +- demos/autocomplete/index.html | 36 +- demos/autocomplete/maxheight.html | 11 +- demos/autocomplete/multiple-remote.html | 11 +- demos/autocomplete/multiple.html | 11 +- demos/autocomplete/remote-jsonp.html | 11 +- demos/autocomplete/remote-with-cache.html | 11 +- demos/autocomplete/remote.html | 11 +- demos/autocomplete/xml.html | 11 +- demos/button/checkbox.html | 11 +- demos/button/default.html | 18 +- demos/button/icons.html | 51 ++- demos/button/index.html | 22 +- demos/button/radio.html | 11 +- demos/button/splitbutton.html | 31 +- demos/button/toolbar.html | 15 +- demos/datepicker/alt-field.html | 11 +- demos/datepicker/animation.html | 11 +- demos/datepicker/buttonbar.html | 11 +- demos/datepicker/date-formats.html | 11 +- demos/datepicker/date-range.html | 11 +- demos/datepicker/default.html | 11 +- demos/datepicker/dropdown-month-year.html | 11 +- demos/datepicker/icon-trigger.html | 11 +- demos/datepicker/index.html | 38 +- demos/datepicker/inline.html | 11 +- demos/datepicker/localization.html | 11 +- demos/datepicker/min-max.html | 11 +- demos/datepicker/multiple-calendars.html | 11 +- demos/datepicker/other-months.html | 11 +- demos/datepicker/show-week.html | 11 +- demos/demos.css | 324 +--------------- demos/dialog/animated.html | 11 +- demos/dialog/default.html | 25 +- demos/dialog/index.html | 22 +- demos/dialog/modal-confirmation.html | 28 +- demos/dialog/modal-form.html | 16 +- demos/dialog/modal-message.html | 28 +- demos/dialog/modal.html | 28 +- demos/draggable/constrain-movement.html | 33 +- demos/draggable/cursor-style.html | 11 +- demos/draggable/default.html | 11 +- demos/draggable/delay-start.html | 11 +- demos/draggable/events.html | 11 +- demos/draggable/handle.html | 13 +- demos/draggable/index.html | 32 +- demos/draggable/revert.html | 11 +- demos/draggable/scroll.html | 11 +- demos/draggable/snap-to.html | 11 +- demos/draggable/sortable.html | 17 +- demos/draggable/visual-feedback.html | 11 +- demos/droppable/accepted-elements.html | 11 +- demos/droppable/default.html | 11 +- demos/droppable/index.html | 24 +- demos/droppable/photo-manager.html | 12 +- demos/droppable/propagation.html | 11 +- demos/droppable/revert.html | 11 +- demos/droppable/shopping-cart.html | 11 +- demos/droppable/visual-feedback.html | 16 +- demos/effect/default.html | 17 +- demos/effect/easing.html | 11 +- demos/effect/index.html | 14 +- demos/hide/default.html | 11 +- demos/hide/index.html | 12 +- demos/index.html | 357 ++---------------- demos/menu/default.html | 43 +-- demos/menu/index.html | 16 +- demos/menu/navigationmenu.html | 83 ++-- demos/menu/topalignmenu.html | 7 +- demos/position/cycler.html | 62 ++- demos/position/default.html | 11 +- demos/position/index.html | 14 +- demos/progressbar/animated.html | 11 +- demos/progressbar/default.html | 11 +- demos/progressbar/index.html | 16 +- demos/progressbar/resize.html | 11 +- demos/removeClass/default.html | 11 +- demos/removeClass/index.html | 12 +- demos/resizable/animate.html | 11 +- demos/resizable/aspect-ratio.html | 11 +- demos/resizable/constrain-area.html | 11 +- demos/resizable/default.html | 11 +- demos/resizable/delay-start.html | 13 +- demos/resizable/helper.html | 11 +- demos/resizable/index.html | 32 +- demos/resizable/max-min.html | 11 +- demos/resizable/snap-to-grid.html | 11 +- demos/resizable/synchronous-resize.html | 11 +- demos/resizable/textarea.html | 11 +- demos/resizable/visual-feedback.html | 11 +- demos/selectable/default.html | 13 +- demos/selectable/display-grid.html | 15 +- demos/selectable/index.html | 16 +- demos/selectable/serialize.html | 13 +- demos/show/default.html | 13 +- demos/show/index.html | 12 +- demos/slider/colorpicker.html | 14 +- demos/slider/default.html | 14 +- demos/slider/hotelrooms.html | 14 +- demos/slider/index.html | 33 +- demos/slider/multiple-vertical.html | 16 +- demos/slider/range-vertical.html | 14 +- demos/slider/range.html | 14 +- demos/slider/rangemax.html | 14 +- demos/slider/rangemin.html | 14 +- demos/slider/side-scroll.html | 12 +- demos/slider/slider-vertical.html | 14 +- demos/slider/steps.html | 14 +- demos/slider/tabs.html | 67 ---- .../sortable/connect-lists-through-tabs.html | 10 +- demos/sortable/connect-lists.html | 10 +- demos/sortable/default.html | 10 +- demos/sortable/delay-start.html | 12 +- demos/sortable/display-grid.html | 12 +- demos/sortable/empty-lists.html | 12 +- demos/sortable/index.html | 28 +- demos/sortable/items.html | 10 +- demos/sortable/placeholder.html | 10 +- demos/sortable/portlets.html | 14 +- demos/spinner/currency.html | 9 +- demos/spinner/decimal.html | 9 +- demos/spinner/default.html | 9 +- demos/spinner/index.html | 20 +- demos/spinner/latlong.html | 9 +- demos/spinner/overflow.html | 9 +- demos/spinner/time.html | 7 +- demos/switchClass/default.html | 15 +- demos/switchClass/index.html | 12 +- demos/tabs/ajax.html | 11 +- demos/tabs/bottom.html | 11 +- demos/tabs/collapsible.html | 11 +- demos/tabs/default.html | 9 +- demos/tabs/index.html | 24 +- demos/tabs/manipulation.html | 51 ++- demos/tabs/mouseover.html | 13 +- demos/tabs/sortable.html | 19 +- demos/tabs/vertical.html | 11 +- demos/toggle/default.html | 8 +- demos/toggle/index.html | 12 +- demos/toggleClass/default.html | 11 +- demos/toggleClass/index.html | 12 +- demos/tooltip/custom-animation.html | 9 +- demos/tooltip/custom-content.html | 11 +- demos/tooltip/custom-style.html | 11 +- demos/tooltip/default.html | 11 +- demos/tooltip/forms.html | 9 +- demos/tooltip/index.html | 22 +- demos/tooltip/tracking.html | 11 +- demos/tooltip/video-player.html | 11 +- demos/widget/default.html | 11 +- demos/widget/index.html | 12 +- 167 files changed, 731 insertions(+), 2542 deletions(-) delete mode 100644 demos/slider/tabs.html diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html index c348dfbbf..f6439bb76 100644 --- a/demos/accordion/collapsible.html +++ b/demos/accordion/collapsible.html @@ -1,4 +1,4 @@ - + @@ -19,8 +19,6 @@ -
-

Section 1

@@ -45,13 +43,8 @@
-
- - -

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.

-
- + diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html index 83f3060ef..11672bea1 100644 --- a/demos/accordion/custom-icons.html +++ b/demos/accordion/custom-icons.html @@ -1,4 +1,4 @@ - + @@ -31,8 +31,6 @@ -
-

Section 1

@@ -59,13 +57,8 @@ -
- - -

Customize the header icons with the icons option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.

-
- +
diff --git a/demos/accordion/default.html b/demos/accordion/default.html index a50270b27..005d43115 100644 --- a/demos/accordion/default.html +++ b/demos/accordion/default.html @@ -1,4 +1,4 @@ - + @@ -17,8 +17,6 @@ -
-

Section 1

@@ -68,8 +66,6 @@
-
-

Click headers to expand/collapse content that is broken into logical sections, much like tabs. @@ -79,7 +75,6 @@ Optionally, toggle sections open/closed on mouseover. The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

-
- +
diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html index f2e936ec0..ced9ec64a 100644 --- a/demos/accordion/fillspace.html +++ b/demos/accordion/fillspace.html @@ -1,4 +1,4 @@ - + @@ -11,6 +11,13 @@ + - -
-
- - -

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.

The datasource is a simple JavaScript array, provided to the widget using the source-option.

-
- + diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html index e2c8938a2..2e54ad672 100644 --- a/demos/autocomplete/folding.html +++ b/demos/autocomplete/folding.html @@ -1,4 +1,4 @@ - + @@ -41,8 +41,6 @@ -
-
@@ -50,14 +48,9 @@
-
- - -

The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.

Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".

-
- + diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index 77f801996..faa18d438 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -1,27 +1,25 @@ - + jQuery UI Autocomplete Demos - -
-

Examples

- -
+ + + diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html index bb27e2a0d..fbf886baa 100644 --- a/demos/autocomplete/maxheight.html +++ b/demos/autocomplete/maxheight.html @@ -1,4 +1,4 @@ - + @@ -59,20 +59,13 @@ -
-
-
- - -

When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.

-
- + diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index d77315036..f33aba9a4 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -1,4 +1,4 @@ - + @@ -67,21 +67,14 @@ -
-
-
- - -

Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.

This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

-
- + diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index ff0aee0e8..54bc0eeec 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -1,4 +1,4 @@ - + @@ -80,21 +80,14 @@ -
-
-
- - -

Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.

This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

-
- + diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index 7a9fa486a..f1a079a55 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,4 +1,4 @@ - + @@ -63,8 +63,6 @@ -
-
@@ -76,14 +74,9 @@
-
- - -

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.

In this case, the datasource is the geonames.org webservice. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.

-
- + diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index 79d4794ea..a2af90d67 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -1,4 +1,4 @@ - + @@ -42,21 +42,14 @@ -
-
-
- - -

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.

Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.

-
- + diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 5086ad0b0..82bada235 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -1,4 +1,4 @@ - + @@ -37,8 +37,6 @@ -
-
@@ -49,14 +47,9 @@
-
- - -

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.

The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.

-
- + diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html index 1fc0b8da3..61c5edb8d 100644 --- a/demos/autocomplete/xml.html +++ b/demos/autocomplete/xml.html @@ -1,4 +1,4 @@ - + @@ -48,8 +48,6 @@ -
-
@@ -60,14 +58,9 @@
-
- - -

This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.

This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.

-
- + diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html index 05aac0af8..be9650402 100644 --- a/demos/button/checkbox.html +++ b/demos/button/checkbox.html @@ -1,4 +1,4 @@ - + @@ -21,8 +21,6 @@ -
-
@@ -31,14 +29,9 @@
-
- - -

A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.

This demo also demonstrates three checkboxes styled as a button set by calling .buttonset() on a common container.

-
- + diff --git a/demos/button/default.html b/demos/button/default.html index 00d7d6bd2..23cbef156 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -1,4 +1,4 @@ - + @@ -11,28 +11,24 @@ -
- An anchor -
- - -

Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.

-
- + diff --git a/demos/button/icons.html b/demos/button/icons.html index 6d22af560..ee42063b3 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -1,4 +1,4 @@ - + @@ -12,45 +12,38 @@ -
- -
- - -

Some buttons with various combinations of text and icons, here specified via metadata.

-
- + diff --git a/demos/button/index.html b/demos/button/index.html index 23977c820..79560595b 100644 --- a/demos/button/index.html +++ b/demos/button/index.html @@ -1,23 +1,19 @@ - + jQuery UI Button Demos - -
-

Examples

- -
+ diff --git a/demos/button/radio.html b/demos/button/radio.html index 216da0935..b435cb130 100644 --- a/demos/button/radio.html +++ b/demos/button/radio.html @@ -1,4 +1,4 @@ - + @@ -17,8 +17,6 @@ -
-
@@ -27,13 +25,8 @@
-
- - -

A set of three radio buttons transformed into a button set.

-
- + diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html index 177e7d02b..c5f663aae 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -1,4 +1,4 @@ - + @@ -49,30 +49,21 @@ -
- +
-
- - -
- + +
- -
- - + +
-

An example of a split button built with two buttons: A plain button with just text, one with only a primary icon and no text. Both are grouped together in a set.

- -
- + diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html index c7066b21d..fcd05f505 100644 --- a/demos/button/toolbar.html +++ b/demos/button/toolbar.html @@ -1,4 +1,4 @@ - + @@ -86,8 +86,6 @@ -
- @@ -95,9 +93,9 @@ - + - + @@ -105,16 +103,11 @@ -
- - -

A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.

-
- + diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html index e2e254d19..9b55b9d58 100644 --- a/demos/datepicker/alt-field.html +++ b/demos/datepicker/alt-field.html @@ -1,4 +1,4 @@ - + @@ -20,17 +20,10 @@ -
-

Date:  

-
- - -

Populate an alternate field with its own date format whenever a date is selected using the altField and altFormat options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.

-
- + diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html index cf424bd1c..555d35347 100644 --- a/demos/datepicker/animation.html +++ b/demos/datepicker/animation.html @@ -1,4 +1,4 @@ - + @@ -27,8 +27,6 @@ -
-

Date:

Animations:
@@ -46,13 +44,8 @@

-
- - -

Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.

-
- + diff --git a/demos/datepicker/buttonbar.html b/demos/datepicker/buttonbar.html index 108ff22e7..a897110f6 100644 --- a/demos/datepicker/buttonbar.html +++ b/demos/datepicker/buttonbar.html @@ -1,4 +1,4 @@ - + @@ -19,17 +19,10 @@ -
-

Date:

-
- - -

Display a button for selecting Today's date and a Done button for closing the calendar with the boolean showButtonPanel option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.

-
- + diff --git a/demos/datepicker/date-formats.html b/demos/datepicker/date-formats.html index 8b5bb29a3..cb8ba5443 100644 --- a/demos/datepicker/date-formats.html +++ b/demos/datepicker/date-formats.html @@ -1,4 +1,4 @@ - + @@ -20,8 +20,6 @@ -
-

Date:

Format options:
@@ -35,13 +33,8 @@

-
- - -

Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.

-
- + diff --git a/demos/datepicker/date-range.html b/demos/datepicker/date-range.html index c881aba3d..70c2ddc93 100644 --- a/demos/datepicker/date-range.html +++ b/demos/datepicker/date-range.html @@ -1,4 +1,4 @@ - + @@ -32,20 +32,13 @@ -
- -
- - -

Select the date range to search for.

-
- + diff --git a/demos/datepicker/default.html b/demos/datepicker/default.html index 4159f4b89..903e1f869 100644 --- a/demos/datepicker/default.html +++ b/demos/datepicker/default.html @@ -1,4 +1,4 @@ - + @@ -17,17 +17,10 @@ -
-

Date:

-
- - -

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

-
- + diff --git a/demos/datepicker/dropdown-month-year.html b/demos/datepicker/dropdown-month-year.html index b30de9d75..151229470 100644 --- a/demos/datepicker/dropdown-month-year.html +++ b/demos/datepicker/dropdown-month-year.html @@ -1,4 +1,4 @@ - + @@ -20,17 +20,10 @@ -
-

Date:

-
- - -

Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean changeMonth and changeYear options.

-
- + diff --git a/demos/datepicker/icon-trigger.html b/demos/datepicker/icon-trigger.html index 2b13d6df9..cdd42a441 100644 --- a/demos/datepicker/icon-trigger.html +++ b/demos/datepicker/icon-trigger.html @@ -1,4 +1,4 @@ - + @@ -21,17 +21,10 @@ -
-

Date:

-
- - -

Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.

-
- + diff --git a/demos/datepicker/index.html b/demos/datepicker/index.html index ed2477402..eb903a220 100644 --- a/demos/datepicker/index.html +++ b/demos/datepicker/index.html @@ -1,31 +1,27 @@ - + jQuery UI Datepicker Demos - -
-

Examples

- -
+ diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html index 552c1d95e..c4277a374 100644 --- a/demos/datepicker/inline.html +++ b/demos/datepicker/inline.html @@ -1,4 +1,4 @@ - + @@ -17,17 +17,10 @@ -
- Date:
-
- - -

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

-
- + diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html index 429c527e1..8e0ad98ea 100644 --- a/demos/datepicker/localization.html +++ b/demos/datepicker/localization.html @@ -1,4 +1,4 @@ - + @@ -90,8 +90,6 @@ -
-

Date:  

-
- - -

Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.

-
- + diff --git a/demos/datepicker/min-max.html b/demos/datepicker/min-max.html index 5da862c45..38038a9a0 100644 --- a/demos/datepicker/min-max.html +++ b/demos/datepicker/min-max.html @@ -1,4 +1,4 @@ - + @@ -17,17 +17,10 @@ -
-

Date:

-
- - -

Restrict the range of selectable dates with the minDate and maxDate options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.

-
- + diff --git a/demos/datepicker/multiple-calendars.html b/demos/datepicker/multiple-calendars.html index 9ff002073..b1dd40905 100644 --- a/demos/datepicker/multiple-calendars.html +++ b/demos/datepicker/multiple-calendars.html @@ -1,4 +1,4 @@ - + @@ -20,17 +20,10 @@ -
-

Date:

-
- - -

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

-
- + diff --git a/demos/datepicker/other-months.html b/demos/datepicker/other-months.html index 14f6c10f2..339b8373d 100644 --- a/demos/datepicker/other-months.html +++ b/demos/datepicker/other-months.html @@ -1,4 +1,4 @@ - + @@ -20,18 +20,11 @@ -
-

Date:

-
- - -

The datepicker can show dates that come from other than the main month being displayed. These other dates can also be made selectable.

-
- + diff --git a/demos/datepicker/show-week.html b/demos/datepicker/show-week.html index 8e5da044b..008943d31 100644 --- a/demos/datepicker/show-week.html +++ b/demos/datepicker/show-week.html @@ -1,4 +1,4 @@ - + @@ -20,20 +20,13 @@ -
-

Date:

-
- - -

The datepicker can show the week of the year. The default calculation follows the ISO 8601 definition: the week starts on Monday, the first week of the year contains the first Thursday of the year. This means that some days from one year may be placed into weeks 'belonging' to another year.

-
- + diff --git a/demos/demos.css b/demos/demos.css index 807d025b5..da9ad833a 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -1,335 +1,19 @@ body { font-size: 62.5%; + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; } table { font-size: 1em; } -/* Site - -------------------------------- */ - -body { - font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; -} - -/* Layout - -------------------------------- */ - -.layout-grid { - width: 960px; - border-spacing: 0; - border-collapse: collapse; -} - -.layout-grid td { - vertical-align: top; -} - -.layout-grid td.left-nav { - width: 140px; -} - -.layout-grid td.normal { - border-left: 1px solid #eee; - padding: 20px 24px; - font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; -} - -.layout-grid td.demos { - background: url('/images/demos_bg.jpg') no-repeat; - height: 337px; - overflow: hidden; -} - -/* Normal - -------------------------------- */ - -.normal h3, -.normal h4 { - margin: 0; - font-weight: normal; -} - -.normal h3 { - padding: 0 0 9px; - font-size: 1.8em; -} - -.normal h4 { - padding-bottom: 21px; - border-bottom: 1px dashed #999; - font-size: 1.2em; - font-weight: bold; -} - -.normal p { - font-size: 1.2em; -} - -/* Demos */ - -.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li { - margin: 0; - padding: 0 -} - -.demos-nav { - float: left; - width: 170px; - font-size: 1.3em; -} - -.demos-nav dt, -.demos-nav h4 { - margin: 0; - padding: 0; - font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; - color: #e87b10; -} - -.demos-nav dt, -.demos-nav h4 { - margin-top: 1.5em; - margin-bottom: 0; - padding-left: 8px; - padding-bottom:5px; - line-height: 1.2em; - border-bottom: 1px solid #F4F4F4; -} - -.demos-nav dd a, -.demos-nav li a { - border-bottom: 1px solid #F4F4F4; - display:block; - padding: 4px 3px 4px 8px; - font-size: 90%; - text-decoration: none; - color: #555 ; - margin:2px 0; - height:13px; -} - -.demos-nav dd a:hover, -.demos-nav dd a:focus, -.demos-nav dd a:hover, -.demos-nav dd a:focus { - background: #f3f3f3; - color:#000; - -moz-border-radius: 5px; -webkit-border-radius: 5px; -} - .demos-nav dd a.selected { - background: #555; - color:#ffffff; - -moz-border-radius: 5px; -webkit-border-radius: 5px; -} - - -/* new styles for demo pages, added by Filament 12.29.08 -eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts -*/ - -.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; } -.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; } -#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; } -.normal a:hover, -.normal a:active { color:#0b559b; } - -#demo-config { padding:20px 0 0; } - -#demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; } -#demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; } - -#demo-config-menu { float:right; width:180px; } -#demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; } - -#demo-config-menu ul { list-style: none; padding: 0; margin: 0; } - -#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; } - -#demo-config-menu li a:link, -#demo-config-menu li a:visited { display:block; padding:1px 8px 4px; border-bottom:1px dotted #b3b3b3; } -* html #demo-config-menu li a:link, -* html #demo-config-menu li a:visited { padding:1px 8px 2px; } -#demo-config-menu li a:hover, -#demo-config-menu li a:active { background-color:#f6f6f6; } - -#demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; } - -#demo-config-menu li.demo-config-on a:link, -#demo-config-menu li.demo-config-on a:visited, -#demo-config-menu li.demo-config-on a:hover, -#demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; margin-top: 0px; margin-bottom: 0px; } - -#demo-source, #demo-notes { +.demo-description { clear: both; - padding: 20px 0 0; - font-size: 1.3em; -} - -#demo-notes { width:520px; color:#333; font-size: 1em; } -#demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; } -#demo-source pre, #demo-source code { padding: 0; } -code, pre { padding:8px 0 8px 20px ; font-size: 1.2em; line-height:130%; } - -#demo-source a:link, -#demo-source a:visited, -#demo-source a:hover, -#demo-source a:active { font-size:12px; padding-left:13px; background-position: left center; background-repeat: no-repeat; } - -#demo-source a.source-open:link, -#demo-source a.source-open:visited, -#demo-source a.source-open:hover, -#demo-source a.source-open:active { background-image: url(images/demo-spindown-open.gif); } - -#demo-source a.source-closed:link, -#demo-source a.source-closed:visited, -#demo-source a.source-closed:hover, -#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); } - -div.demo { - padding:12px; - font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; -} - -div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; } - -div.demo-description { - clear:both; - padding:12px; - font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; + padding: 12px; font-size: 1.3em; line-height: 1.4em; } .ui-draggable, .ui-droppable { - background-position: top left; + background-position: top; } - -.left-nav .demos-nav { - padding-right: 10px; -} - -#demo-link { font-size:11px; padding-top: 6px; clear: both; overflow: hidden; } -#demo-link a span.ui-icon { float:left; margin-right:3px; } - -/* Component containers -----------------------------------*/ -#widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } -#widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } -#widget-docs .ui-widget-header { border: 1px solid #ffffff; background: #464646 url(images/464646_40x100_textures_01_flat_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } -#widget-docs .ui-widget-header a { color: #ffffff; } -#widget-docs .ui-widget-content { border: 1px solid #ffffff; background: #ffffff url(images/ffffff_40x100_textures_01_flat_75.png) 50% 50% repeat-x; color: #222222; } -#widget-docs .ui-widget-content a { color: #222222; } - -/* Interaction states -----------------------------------*/ -#widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; background: #555555 url(images/555555_40x100_textures_03_highlight_soft_75.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } -#widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; } -#widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; background: #444444 url(images/444444_40x100_textures_03_highlight_soft_60.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } -#widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; } -#widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; background: #ffffff url(images/ffffff_40x100_textures_01_flat_65.png) 50% 50% repeat-x; font-weight: normal; color: #F6921E; outline: none; } -#widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; } - -/* Interaction Cues -----------------------------------*/ -#widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/fbf9ee_40x100_textures_02_glass_55.png) 50% 50% repeat-x; color: #363636; } -#widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; } -#widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; } -#widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } -#widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; } -#widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } - -/* Icons -----------------------------------*/ - -/* states and images */ -#demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; background-image: url(images/222222_256x240_icons_icons.png); } -#widget-docs .ui-widget-content .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } -#widget-docs .ui-widget-header .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } -#widget-docs .ui-state-default .ui-icon { background-image: url(images/888888_256x240_icons_icons.png); } -#widget-docs .ui-state-hover .ui-icon, #widget-docs .ui-state-focus .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } -#widget-docs .ui-state-active .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } -#widget-docs .ui-state-highlight .ui-icon {background-image: url(images/2e83ff_256x240_icons_icons.png); } -#widget-docs .ui-state-error .ui-icon, #widget-docs .ui-state-error-text .ui-icon {background-image: url(images/cd0a0a_256x240_icons_icons.png); } - - -/* Misc visuals -----------------------------------*/ - -/* Corner radius */ -#widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } -#widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } -#widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } -#widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } -#widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } -#widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } -#widget-docs .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } -#widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } -#widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; } - -/* Overlays */ -#widget-docs .ui-widget-overlay { background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); } -#widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; } - -/* -----------------------------------*/ - -#widget-docs { margin:20px 0 0; border: none; } - -#widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin:0; padding:0; } -#widget-docs code { display:block; color:#444; font-size:.9em; margin:0 0 1em; } -#widget-docs code strong { color:#000; } -#widget-docs p { margin:0 3em 1.2em 0; } -#widget-docs p.intro { font-size:13px; color:#666; line-height:1.3; } -#widget-docs ul { list-style-type: none; } - -#widget-docs h2 { font-size:16px; margin:1.2em 0 .5em; } -#widget-docs h3 { font-size:14px; color:#e6820E; margin:1.5em 0 .5em; } -.normal #widget-docs h4 { font-size:12px; color:#000; border:0; margin:0 0 .5em; } - -#docs-overview-main { width:400px; } -#docs-overview-sidebar { float:right; width:200px; } -#docs-overview-sidebar a span { color:#666; } -#widget-docs #docs-overview-main p { margin-right:0; } -#widget-docs #docs-overview-sidebar h4 { padding-left:0; } - -.docs-list-header { float:left; width:100%; margin:10px 0 0; border-bottom:1px solid #eee; } -#widget-docs .docs-list-header h2 { float:left; margin:0; } -#widget-docs .docs-list-header p { float:right; margin:5px 0; font-size:11px; } - -.docs-list { float:left; width:100%; padding:0 0 10px; } -.docs-list .param-header { float:left; clear:left; width:100%; padding:8px 0; border-top:1px solid #eee; } -#widget-docs .param-header h3, #widget-docs .param-header p { margin:0; float:left; } -#widget-docs .param-header h3 { width:50%; } -#widget-docs .param-header h3 span { background: url(images/demo-spindown-closed.gif) no-repeat left; padding-left:13px; } -#widget-docs .param-open .param-header h3 span { background: url(images/demo-spindown-open.gif) no-repeat left; } -#widget-docs .param-header p { width:24%; } -#widget-docs .param-header p.param-type span { background: url(images/icon-docs-info.gif) no-repeat left; cursor:pointer; border-bottom:1px dashed #ccc; padding-left:15px; } - -.param-details { padding-left:13px; } -.param-args { margin:0 0 1.5em; border-top:1px dotted #ccc;} -.param-args td { padding:3px 30px 3px 5px; border-bottom:1px dotted #ccc; } - - -/* overrides for ui-tab styles */ -#widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; } -#widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; } - -#widget-docs .ui-tabs-nav li a:link, -#widget-docs .ui-tabs-nav li a:visited, -#widget-docs .ui-tabs-nav li a:hover, -#widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; } - -#widget-docs .ui-tabs-nav li.ui-tabs-active a:link, -#widget-docs .ui-tabs-nav li.ui-tabs-active a:visited, -#widget-docs .ui-tabs-nav li.ui-tabs-active a:hover, -#widget-docs .ui-tabs-nav li.ui-tabs-active a:active { color:#e6820E; } - -#widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; } - -#widget-docs .ui-widget-content a:link, -#widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; } -#widget-docs .ui-widget-content a:hover, -#widget-docs .ui-widget-content a:active { color:#0b559b; } - diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html index a4b85bbc5..69976261a 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -1,4 +1,4 @@ - + @@ -36,21 +36,14 @@ -
-

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

-
- - -

Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.

-
- + diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 1f321790d..37c72540c 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -1,4 +1,4 @@ - + @@ -22,33 +22,12 @@ -
-

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

- -
-

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

-
-
- checkbox
- radio
-

-
-
-
- -
- - -

The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

-
- + diff --git a/demos/dialog/index.html b/demos/dialog/index.html index 460e4fb36..6aaa3ecb5 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -1,23 +1,19 @@ - + jQuery UI Dialog Demos - -
-

Examples

- -
+ diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index 6bdb9ba89..ff18620b0 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -1,4 +1,4 @@ - + @@ -16,9 +16,6 @@ -
+

Constrain movement along an axis:

-

Constrain movement along an axis:

-

I can be dragged only vertically

@@ -42,28 +40,19 @@

I can be dragged only horizontally

-

Or to within another DOM element:

+

Or to within another DOM element:

-
-

I'm contained within the box

-
- -
-

I'm contained within the box's parent

-
+
+

I'm contained within the box

+
-
-

I'm contained within my parent

+
+

I'm contained within my parent

+
-
- - - -

Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

-
- + diff --git a/demos/draggable/cursor-style.html b/demos/draggable/cursor-style.html index 6dd31b51f..256071af8 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -1,4 +1,4 @@ - + @@ -23,8 +23,6 @@ -
-

I will always stick to the center (relative to the mouse)

@@ -37,13 +35,8 @@

My cursor position is only controlled for the 'bottom' value

- - - -

Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAt option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the cursor option with a valid CSS cursor value: default, move, pointer, crosshair, etc.

-
- + diff --git a/demos/draggable/default.html b/demos/draggable/default.html index 52d68d150..dc2a3d461 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,4 +1,4 @@ - + @@ -21,19 +21,12 @@ -
-

Drag me around

-
- - -

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

-
- + diff --git a/demos/draggable/delay-start.html b/demos/draggable/delay-start.html index 63c997778..78dcdca13 100644 --- a/demos/draggable/delay-start.html +++ b/demos/draggable/delay-start.html @@ -1,4 +1,4 @@ - + @@ -23,8 +23,6 @@ -
-

Only if you drag me by 20 pixels, the dragging will start

@@ -33,13 +31,8 @@

Regardless of the distance, you have to drag and wait for 1000ms before dragging starts

- - - -

Delay the start of dragging for a number of milliseconds with the delay option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the distance option.

-
- + diff --git a/demos/draggable/events.html b/demos/draggable/events.html index efb659d25..95ae1adca 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,4 +1,4 @@ - + @@ -52,8 +52,6 @@ -
-

Drag me to trigger the chain of events.

@@ -65,13 +63,8 @@
-
- - -

Layer functionality onto the draggable using the start, drag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.

-
- + diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html index 8a2bfa008..4aed5827a 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,4 +1,4 @@ - + @@ -24,8 +24,6 @@ -
-

I can be dragged only by this handle

@@ -35,16 +33,9 @@

…but you can't drag me by this handle.

- - - - - -

Allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.

-
- + diff --git a/demos/draggable/index.html b/demos/draggable/index.html index 0beda8e72..93850684d 100644 --- a/demos/draggable/index.html +++ b/demos/draggable/index.html @@ -1,28 +1,24 @@ - + jQuery UI Draggable Demos - -
-

Examples

- -
+ diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html index 6e656a2b0..b18190d84 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -1,4 +1,4 @@ - + @@ -22,8 +22,6 @@ -
-

Revert the original

@@ -32,13 +30,8 @@

Revert the helper

- - - -

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option.

-
- + diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html index 611845631..8be467f49 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -1,4 +1,4 @@ - + @@ -23,8 +23,6 @@ -
-

Scroll set to true, default settings

@@ -39,13 +37,8 @@
-
- - -

Automatically scroll the document when the draggable is moved beyond the viewport. Set the scroll option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the scrollSensitivity and scrollSpeed options.

-
- + diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html index fed879f82..a399db5d6 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -1,4 +1,4 @@ - + @@ -27,8 +27,6 @@ -
-

I'm a snap target

@@ -55,14 +53,9 @@

I snap to a 80 x 80 grid

- - - -

Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

-
- + diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html index c8f2d545d..0bf674ff3 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,4 +1,4 @@ - + @@ -12,8 +12,8 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
Interactions
-
Draggable
-
Droppable
-
Resizable
-
Selectable
-
Sortable
-
Widgets
-
Accordion
-
Autocomplete
-
Button
-
Datepicker
-
Dialog
-
Menu
-
Progressbar
-
Slider
-
Spinner
-
Tabs
-
Tooltip
-
Effects
-
Color Animation
-
Toggle Class
-
Add Class
-
Remove Class
-
Switch Class
-
Effect
-
Toggle
-
Hide
-
Show
-
Utilities
-
Position
-
Widget
-
About jQuery UI
-
Getting Started
-
Upgrade Guide
-
Changelog
-
Roadmap
-
Subversion Access
-
UI Developer Guidelines
-
Theming
-
Theming jQuery UI
-
jQuery UI CSS Framework
-
ThemeRoller application
-
Theme Switcher Widget
- -
- 		- -
- -

Instructions

-

- These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them. -

- -
+ -
diff --git a/demos/menu/default.html b/demos/menu/default.html index 862020612..249fe676d 100644 --- a/demos/menu/default.html +++ b/demos/menu/default.html @@ -17,33 +17,26 @@ -
- - - -
+
-

A menu with the default configuration. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.

- -
- + diff --git a/demos/menu/index.html b/demos/menu/index.html index f5a49799a..07556c6ec 100644 --- a/demos/menu/index.html +++ b/demos/menu/index.html @@ -3,16 +3,14 @@ jQuery UI Menu Demos - -
-

Examples

- -
+ + + diff --git a/demos/menu/navigationmenu.html b/demos/menu/navigationmenu.html index fec6bbb8d..a66bcd8cf 100644 --- a/demos/menu/navigationmenu.html +++ b/demos/menu/navigationmenu.html @@ -29,53 +29,46 @@ -
- - - -
+
-

A navigation menu. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.

- -
- + diff --git a/demos/menu/topalignmenu.html b/demos/menu/topalignmenu.html index 0ae287704..5a918d749 100644 --- a/demos/menu/topalignmenu.html +++ b/demos/menu/topalignmenu.html @@ -26,8 +26,6 @@ -
- -
-
-

Menus can use custom positioning. There is a delay before activing an item on hover and a delay before closing a menu on mouse out to allow for moving to a submenu that is not touching its parent item.

+

Menus can use custom positioning. There is a delay before activing an item on hover and a delay before closing a menu on mouse out to allow for moving to a submenu that is not touching its parent item.

- diff --git a/demos/position/cycler.html b/demos/position/cycler.html index 16542b962..241dae9a0 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -9,6 +9,17 @@ + - + - + - - - - - - - - - - - - - - - - - -
- -
- -
- -
-

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
-
-

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

-
-
-

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

-

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

-
-
- -
- - - -
-

Control tabs with a slider.

-
- - - diff --git a/demos/sortable/connect-lists-through-tabs.html b/demos/sortable/connect-lists-through-tabs.html index d28f76cae..980c1302b 100644 --- a/demos/sortable/connect-lists-through-tabs.html +++ b/demos/sortable/connect-lists-through-tabs.html @@ -1,4 +1,4 @@ - + @@ -39,7 +39,6 @@ -
    @@ -66,13 +65,8 @@
- - - -

Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.

-
- + diff --git a/demos/sortable/connect-lists.html b/demos/sortable/connect-lists.html index a30a22f8b..33c4d6035 100644 --- a/demos/sortable/connect-lists.html +++ b/demos/sortable/connect-lists.html @@ -1,4 +1,4 @@ - + @@ -23,7 +23,6 @@ -
-
- - -

Sort items from one list into another and vice versa, by passing a selector into @@ -52,7 +47,6 @@ group all related lists with a CSS class, and then pass that class into the sortable function (i.e., connectWith: '.myclass').

-
- + diff --git a/demos/sortable/default.html b/demos/sortable/default.html index ca0d5d172..209655b20 100644 --- a/demos/sortable/default.html +++ b/demos/sortable/default.html @@ -1,4 +1,4 @@ - + @@ -23,7 +23,6 @@ -
-
- - -

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

-
- + diff --git a/demos/sortable/delay-start.html b/demos/sortable/delay-start.html index caa0fbfd6..639ace60a 100644 --- a/demos/sortable/delay-start.html +++ b/demos/sortable/delay-start.html @@ -1,4 +1,4 @@ - + @@ -19,7 +19,7 @@ $( "#sortable1" ).sortable({ delay: 300 }); - + $( "#sortable2" ).sortable({ distance: 15 }); @@ -29,7 +29,6 @@ -

Time delay of 300ms:

@@ -49,10 +48,6 @@
  • Item 4
    • -
    - - -

    Prevent accidental sorting either by delay (time) or distance. Set a number of @@ -61,7 +56,6 @@ needs to be dragged before sorting starts with the distance option.

    -
    - + diff --git a/demos/sortable/display-grid.html b/demos/sortable/display-grid.html index ced64775b..9650676a1 100644 --- a/demos/sortable/display-grid.html +++ b/demos/sortable/display-grid.html @@ -1,4 +1,4 @@ - + @@ -11,7 +11,7 @@ -
    -
    - - -

    To arrange sortable items as a grid, give them identical dimensions and float them using CSS.

    -
    - + diff --git a/demos/sortable/empty-lists.html b/demos/sortable/empty-lists.html index 3c1a12537..dc727515c 100644 --- a/demos/sortable/empty-lists.html +++ b/demos/sortable/empty-lists.html @@ -1,4 +1,4 @@ - + @@ -30,7 +30,6 @@ -
    - - +

    @@ -63,7 +58,6 @@ using the dropOnEmpty option set to false. By default, sortable items can be dropped on empty lists.

    -
    - + diff --git a/demos/sortable/index.html b/demos/sortable/index.html index b307ef777..66b0b5ced 100644 --- a/demos/sortable/index.html +++ b/demos/sortable/index.html @@ -1,26 +1,22 @@ - + jQuery UI Sortable Demos - -
    -

    Examples

    - -
    + diff --git a/demos/sortable/items.html b/demos/sortable/items.html index a9f308129..c5ab4aaf1 100644 --- a/demos/sortable/items.html +++ b/demos/sortable/items.html @@ -1,4 +1,4 @@ - + @@ -29,7 +29,6 @@ -

    Specify which items are sortable:

    @@ -49,10 +48,6 @@
  • Item 4
    • -
    - - -

    Specify which items are eligible to sort by passing a jQuery selector into @@ -64,7 +59,6 @@ cancel option. Cancelled items remain valid sort targets for others.

    -
    - + diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html index 75e88d9ee..7767f1def 100644 --- a/demos/sortable/placeholder.html +++ b/demos/sortable/placeholder.html @@ -1,4 +1,4 @@ - + @@ -26,7 +26,6 @@ -
    -
    - - -

    When dragging a sortable item to a new location, other items will make room @@ -50,7 +45,6 @@ be visible. Use the boolean forcePlaceholderSize option to set dimensions on the placeholder.

    -
    - + diff --git a/demos/sortable/portlets.html b/demos/sortable/portlets.html index e9ed16ed2..e747c7f77 100644 --- a/demos/sortable/portlets.html +++ b/demos/sortable/portlets.html @@ -1,4 +1,4 @@ - + @@ -42,7 +42,6 @@ -
    @@ -50,7 +49,7 @@
    Feeds
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
    - +
    News
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
    @@ -73,7 +72,7 @@
    Links
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
    - +
    Images
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
    @@ -81,16 +80,11 @@
    -
    - - -

    Enable portlets (styled divs) as sortables and use the connectWith option to allow sorting between columns.

    -
    - + diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html index 2343b6789..15ac7e9b0 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -32,8 +32,6 @@ -
    -

    -
    - - -

    Example of a donation form, with currency selection and amount spinner.

    -
    - + diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html index 5475dc76c..f66e0a0f7 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -31,8 +31,6 @@ -
    -

    @@ -46,10 +44,6 @@

    -
    - - -

    Example of a decimal spinner. Step is set to 0.01. @@ -57,7 +51,6 @@ then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture.

    -
    - + diff --git a/demos/spinner/default.html b/demos/spinner/default.html index 8e742a862..3273c82fc 100644 --- a/demos/spinner/default.html +++ b/demos/spinner/default.html @@ -42,8 +42,6 @@ -
    -

    @@ -59,13 +57,8 @@

    -
    - - -

    Default spinner.

    -
    - + diff --git a/demos/spinner/index.html b/demos/spinner/index.html index 594fd9399..f3c74d0b1 100644 --- a/demos/spinner/index.html +++ b/demos/spinner/index.html @@ -3,21 +3,17 @@ jQuery UI Spinner Demos - -
    -

    Examples

    - -
    + diff --git a/demos/spinner/latlong.html b/demos/spinner/latlong.html index a75929245..90cb21512 100644 --- a/demos/spinner/latlong.html +++ b/demos/spinner/latlong.html @@ -42,8 +42,6 @@ -
    -
    @@ -52,13 +50,8 @@
    -
    - - -

    Google Maps integration, using spinners to change latidude and longitude.

    -
    - + diff --git a/demos/spinner/overflow.html b/demos/spinner/overflow.html index 27db127c1..2eedd1045 100644 --- a/demos/spinner/overflow.html +++ b/demos/spinner/overflow.html @@ -29,23 +29,16 @@ -
    -

    -
    - - -

    Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it'll overflow to -10, and the other way round.

    -
    - + diff --git a/demos/spinner/time.html b/demos/spinner/time.html index c23881e67..05ded9dc9 100644 --- a/demos/spinner/time.html +++ b/demos/spinner/time.html @@ -51,7 +51,6 @@ -

    @@ -63,9 +62,6 @@

    -
    - -

    @@ -73,7 +69,6 @@ a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down spins hours.

    -
    - + diff --git a/demos/switchClass/default.html b/demos/switchClass/default.html index fabce344e..21f192e83 100644 --- a/demos/switchClass/default.html +++ b/demos/switchClass/default.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ @@ -19,15 +19,13 @@ $( "#button" ).click(function(){ $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 ); $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 ); - return false; + return false; }); }); -
    -
    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. @@ -35,13 +33,8 @@
    Run Effect -
    - - -

    Click the button above to preview the effect.

    -
    - +
    diff --git a/demos/switchClass/index.html b/demos/switchClass/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/switchClass/index.html +++ b/demos/switchClass/index.html @@ -1,18 +1,14 @@ - + jQuery UI Effects Demos - -
    -

    Examples

    - -
    + diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html index f47c1c6a3..97d3cf8c0 100644 --- a/demos/tabs/ajax.html +++ b/demos/tabs/ajax.html @@ -1,4 +1,4 @@ - + @@ -25,8 +25,6 @@ -
    -
    - - - -

    Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.

    Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.

    -
    - + diff --git a/demos/tabs/bottom.html b/demos/tabs/bottom.html index ba35914f0..3ffb3d8b5 100644 --- a/demos/tabs/bottom.html +++ b/demos/tabs/bottom.html @@ -1,4 +1,4 @@ - + @@ -32,8 +32,6 @@ -
    -
    - - - -

    With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.

    -
    - + diff --git a/demos/tabs/collapsible.html b/demos/tabs/collapsible.html index 3bf4a6769..0645dd1d2 100644 --- a/demos/tabs/collapsible.html +++ b/demos/tabs/collapsible.html @@ -1,4 +1,4 @@ - + @@ -19,8 +19,6 @@ -
    -
    - - - -

    Click the selected tab to toggle its content closed/open. To enable this functionality, set the collapsible option to true.

    collapsible: true
    -
    - + diff --git a/demos/tabs/default.html b/demos/tabs/default.html index 9795334cc..03aa65c8c 100644 --- a/demos/tabs/default.html +++ b/demos/tabs/default.html @@ -1,4 +1,4 @@ - + @@ -37,13 +37,8 @@ - - - -

    Click tabs to swap between content that is broken into logical sections.

    -
    - + diff --git a/demos/tabs/index.html b/demos/tabs/index.html index dbf7fee5a..779dfd2da 100644 --- a/demos/tabs/index.html +++ b/demos/tabs/index.html @@ -1,24 +1,20 @@ - + jQuery UI Tabs Demos - -
    -

    Examples

    - -
    + diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html index a115e1470..fbd85b9bf 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -1,4 +1,4 @@ - + @@ -85,37 +85,30 @@ -
    - -
    -
    -
    - - - - -
    -
    -
    - - - -
    - -
    -

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    -
    +
    +
    +
    + + + + +
    +
    +
    + + + +
    + +
    +

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    - -
    - - +

    Simple tabs adding and removing.

    -
    - +
    diff --git a/demos/tabs/mouseover.html b/demos/tabs/mouseover.html index ef362fbc1..052cd24b4 100644 --- a/demos/tabs/mouseover.html +++ b/demos/tabs/mouseover.html @@ -1,4 +1,4 @@ - + @@ -19,8 +19,6 @@ -
    -
    - - - -

    Toggle sections open/closed on mouseover with the event option. The default value for event is "click."

    -
    event: 'mouseover'
-
    -
    - + diff --git a/demos/tabs/sortable.html b/demos/tabs/sortable.html index 2580ce496..3e1d3f87e 100644 --- a/demos/tabs/sortable.html +++ b/demos/tabs/sortable.html @@ -1,4 +1,4 @@ - + @@ -25,8 +25,6 @@ -
    -
    - - - -

    Drag the tabs above to re-order them.

    -

    -Making tabs sortable is as simple as calling -.sortable() -on the -.ui-tabs-nav -element. -

    -
    - +

    Making tabs sortable is as simple as calling .sortable() on the .ui-tabs-nav element.

    + diff --git a/demos/tabs/vertical.html b/demos/tabs/vertical.html index 5e4716837..1d901d7fb 100644 --- a/demos/tabs/vertical.html +++ b/demos/tabs/vertical.html @@ -1,4 +1,4 @@ - + @@ -26,8 +26,6 @@ -
    -
    - - - -

    Click tabs to swap between content that is broken into logical sections.

    -
    - + diff --git a/demos/toggle/default.html b/demos/toggle/default.html index d3d32e02e..84ac2e0ae 100644 --- a/demos/toggle/default.html +++ b/demos/toggle/default.html @@ -69,8 +69,6 @@ -
    -

    Toggle

    @@ -97,13 +95,9 @@ Run Effect -
    - -

    Click the button above to preview the effect.

    -
    - +
    diff --git a/demos/toggle/index.html b/demos/toggle/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/toggle/index.html +++ b/demos/toggle/index.html @@ -1,18 +1,14 @@ - + jQuery UI Effects Demos - -
    -

    Examples

    - -
    + diff --git a/demos/toggleClass/default.html b/demos/toggleClass/default.html index 76373b667..f4a5ab57a 100644 --- a/demos/toggleClass/default.html +++ b/demos/toggleClass/default.html @@ -1,4 +1,4 @@ - + @@ -24,8 +24,6 @@ -
    -
    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. @@ -34,13 +32,8 @@ Run Effect -
    - - -

    Click the button above to preview the effect.

    -
    - +
    diff --git a/demos/toggleClass/index.html b/demos/toggleClass/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/toggleClass/index.html +++ b/demos/toggleClass/index.html @@ -1,18 +1,14 @@ - + jQuery UI Effects Demos - -
    -

    Examples

    - -
    + diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index 2ed468ba8..7a66daccf 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -41,21 +41,14 @@ -
    -

    There are various ways to customize the animation of a tooltip.

    You can use the show and hide options.

    You can also use the open event.

    -
    - - -

    This demo shows how to customize animations using the show and hide options, as well as the open event.

    -
    - +
    diff --git a/demos/tooltip/custom-content.html b/demos/tooltip/custom-content.html index 286e75781..31352155d 100644 --- a/demos/tooltip/custom-content.html +++ b/demos/tooltip/custom-content.html @@ -25,7 +25,7 @@