From 0d4d56ae45b6ba3113d2002d4aa16cea8338e8a2 Mon Sep 17 00:00:00 2001 From: Richard Worth Date: Tue, 27 Jan 2009 10:08:19 +0000 Subject: demos: fixed file naming inconsistency. Multiple words now separated by hyphen, not underscore --- demos/accordion/custom-icons.html | 69 +++++++++++++ demos/accordion/custom_icons.html | 69 ------------- demos/accordion/index.html | 2 +- demos/datepicker/alt-field.html | 31 ++++++ demos/datepicker/alt_field.html | 31 ------ demos/datepicker/date-formats.html | 43 ++++++++ demos/datepicker/date_formats.html | 43 -------- demos/datepicker/dropdown-month-year.html | 34 +++++++ demos/datepicker/dropdown_month_year.html | 34 ------- demos/datepicker/icon-trigger.html | 31 ++++++ demos/datepicker/icon_trigger.html | 31 ------ demos/datepicker/index.html | 12 +-- demos/datepicker/min-max.html | 31 ++++++ demos/datepicker/min_max.html | 31 ------ demos/datepicker/multiple-calendars.html | 34 +++++++ demos/datepicker/multiple_calendars.html | 34 ------- demos/dialog/index.html | 6 +- demos/dialog/modal-confirmation.html | 67 +++++++++++++ demos/dialog/modal-form.html | 82 +++++++++++++++ demos/dialog/modal-message.html | 68 +++++++++++++ demos/dialog/modal_confirmation.html | 67 ------------- demos/dialog/modal_form.html | 82 --------------- demos/dialog/modal_message.html | 68 ------------- demos/droppable/index.html | 2 +- demos/droppable/photo-manager.html | 160 ++++++++++++++++++++++++++++++ demos/droppable/photo_manager.html | 160 ------------------------------ demos/slider/index.html | 8 +- demos/slider/multiple-vertical.html | 90 +++++++++++++++++ demos/slider/multiple_vertical.html | 90 ----------------- demos/slider/range-vertical.html | 47 +++++++++ demos/slider/range_vertical.html | 47 --------- demos/slider/side-scroll.html | 134 +++++++++++++++++++++++++ demos/slider/side_scroll.html | 134 ------------------------- demos/slider/slider-vertical.html | 49 +++++++++ demos/slider/slider_vertical.html | 49 --------- 35 files changed, 985 insertions(+), 985 deletions(-) create mode 100644 demos/accordion/custom-icons.html delete mode 100644 demos/accordion/custom_icons.html create mode 100644 demos/datepicker/alt-field.html delete mode 100644 demos/datepicker/alt_field.html create mode 100644 demos/datepicker/date-formats.html delete mode 100644 demos/datepicker/date_formats.html create mode 100644 demos/datepicker/dropdown-month-year.html delete mode 100644 demos/datepicker/dropdown_month_year.html create mode 100644 demos/datepicker/icon-trigger.html delete mode 100644 demos/datepicker/icon_trigger.html create mode 100644 demos/datepicker/min-max.html delete mode 100644 demos/datepicker/min_max.html create mode 100644 demos/datepicker/multiple-calendars.html delete mode 100644 demos/datepicker/multiple_calendars.html create mode 100644 demos/dialog/modal-confirmation.html create mode 100644 demos/dialog/modal-form.html create mode 100644 demos/dialog/modal-message.html delete mode 100644 demos/dialog/modal_confirmation.html delete mode 100644 demos/dialog/modal_form.html delete mode 100644 demos/dialog/modal_message.html create mode 100644 demos/droppable/photo-manager.html delete mode 100644 demos/droppable/photo_manager.html create mode 100644 demos/slider/multiple-vertical.html delete mode 100644 demos/slider/multiple_vertical.html create mode 100644 demos/slider/range-vertical.html delete mode 100644 demos/slider/range_vertical.html create mode 100644 demos/slider/side-scroll.html delete mode 100644 demos/slider/side_scroll.html create mode 100644 demos/slider/slider-vertical.html delete mode 100644 demos/slider/slider_vertical.html diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html new file mode 100644 index 000000000..8b6d71dd3 --- /dev/null +++ b/demos/accordion/custom-icons.html @@ -0,0 +1,69 @@ + + + + jQuery UI Accordion - Customize icons + + + + + + + + + +
+ +
+
+

Section 1

+
+

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.

+
+
+
+

Section 2

+
+

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.

+
+
+
+

Section 3

+
+

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.

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+
+
+

Section 4

+
+

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+
+
+
+ +
+ + + +
+ +

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

+ +
+ + + diff --git a/demos/accordion/custom_icons.html b/demos/accordion/custom_icons.html deleted file mode 100644 index 8b6d71dd3..000000000 --- a/demos/accordion/custom_icons.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - jQuery UI Accordion - Customize icons - - - - - - - - - -
- -
-
-

Section 1

-
-

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.

-
-
-
-

Section 2

-
-

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.

-
-
-
-

Section 3

-
-

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.

-
    -
  • List item one
    • -
  • List item two
    • -
  • List item three
    • -
-
-
-
-

Section 4

-
-

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

-
-
-
- -
- - - -
- -

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

- -
- - - diff --git a/demos/accordion/index.html b/demos/accordion/index.html index ca0fd7eed..309c75de0 100644 --- a/demos/accordion/index.html +++ b/demos/accordion/index.html @@ -12,7 +12,7 @@
  • Fill space
  • Collapse content
  • Open on mouseover
    • -
  • Customize icons
    • +
  • Customize icons
    • diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html new file mode 100644 index 000000000..12abb9eaf --- /dev/null +++ b/demos/datepicker/alt-field.html @@ -0,0 +1,31 @@ + + + + jQuery UI Datepicker - Populate alternate field + + + + + + + + + +
    + +

    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/alt_field.html b/demos/datepicker/alt_field.html deleted file mode 100644 index 12abb9eaf..000000000 --- a/demos/datepicker/alt_field.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - jQuery UI Datepicker - Populate alternate field - - - - - - - - - -
    - -

    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/date-formats.html b/demos/datepicker/date-formats.html new file mode 100644 index 000000000..e26f1bd11 --- /dev/null +++ b/demos/datepicker/date-formats.html @@ -0,0 +1,43 @@ + + + + jQuery UI Datepicker - Format date + + + + + + + + + +
    + +

    Date:

    + +

    Format options:
    + +

    + +
    + +
    + +

    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_formats.html b/demos/datepicker/date_formats.html deleted file mode 100644 index e26f1bd11..000000000 --- a/demos/datepicker/date_formats.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - jQuery UI Datepicker - Format date - - - - - - - - - -
    - -

    Date:

    - -

    Format options:
    - -

    - -
    - -
    - -

    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/dropdown-month-year.html b/demos/datepicker/dropdown-month-year.html new file mode 100644 index 000000000..a16ff09a4 --- /dev/null +++ b/demos/datepicker/dropdown-month-year.html @@ -0,0 +1,34 @@ + + + + jQuery UI Datepicker - Display month & year menus + + + + + + + + + +
    + +

    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/dropdown_month_year.html b/demos/datepicker/dropdown_month_year.html deleted file mode 100644 index a16ff09a4..000000000 --- a/demos/datepicker/dropdown_month_year.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - jQuery UI Datepicker - Display month & year menus - - - - - - - - - -
    - -

    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 new file mode 100644 index 000000000..b3b43a225 --- /dev/null +++ b/demos/datepicker/icon-trigger.html @@ -0,0 +1,31 @@ + + + + jQuery UI Datepicker - Icon trigger + + + + + + + + + +
    + +

    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/icon_trigger.html b/demos/datepicker/icon_trigger.html deleted file mode 100644 index b3b43a225..000000000 --- a/demos/datepicker/icon_trigger.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - jQuery UI Datepicker - Icon trigger - - - - - - - - - -
    - -

    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 a1738de2e..dfe22db65 100644 --- a/demos/datepicker/index.html +++ b/demos/datepicker/index.html @@ -10,15 +10,15 @@

    Examples

    diff --git a/demos/datepicker/min-max.html b/demos/datepicker/min-max.html new file mode 100644 index 000000000..6a7d87eb2 --- /dev/null +++ b/demos/datepicker/min-max.html @@ -0,0 +1,31 @@ + + + + jQuery UI Datepicker - Restrict date range + + + + + + + + + +
    + +

    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/min_max.html b/demos/datepicker/min_max.html deleted file mode 100644 index 6a7d87eb2..000000000 --- a/demos/datepicker/min_max.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - jQuery UI Datepicker - Restrict date range - - - - - - - - - -
    - -

    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 new file mode 100644 index 000000000..fe7d990a1 --- /dev/null +++ b/demos/datepicker/multiple-calendars.html @@ -0,0 +1,34 @@ + + + + jQuery UI Datepicker - Display multiple months + + + + + + + + + +
    + +

    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/multiple_calendars.html b/demos/datepicker/multiple_calendars.html deleted file mode 100644 index fe7d990a1..000000000 --- a/demos/datepicker/multiple_calendars.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - jQuery UI Datepicker - Display multiple months - - - - - - - - - -
    - -

    Date:

    - -
    - -
    - -

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

    - -
    - - - diff --git a/demos/dialog/index.html b/demos/dialog/index.html index 28628a085..bed31aba2 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -11,9 +11,9 @@ diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html new file mode 100644 index 000000000..9bbad8ae1 --- /dev/null +++ b/demos/dialog/modal-confirmation.html @@ -0,0 +1,67 @@ + + + + jQuery UI Dialog - Modal confirmation + + + + + + + + + + + + +
    + +
    +

    These items will be permanently deleted and cannot be recovered. Are you sure?

    +
    + + +
    +

    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
    +

    +
    +
    +
    + +
    + +
    + +

    Confirm an action that may be destructive or important. Set the modal option to true, and specify primary and secondary user actions with the buttons option.

    + +
    + + + diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html new file mode 100644 index 000000000..217e8c3c6 --- /dev/null +++ b/demos/dialog/modal-form.html @@ -0,0 +1,82 @@ + + + + jQuery UI Dialog - Modal form + + + + + + + + + + + + + +
    + +
    +

    All form fields are required.

    + +
    +
    + + + + + + +
    +
    +
    + + +
    +

    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
    +

    +
    +
    +
    + +
    + +
    + +

    Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

    + +
    + + + diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html new file mode 100644 index 000000000..6052ac155 --- /dev/null +++ b/demos/dialog/modal-message.html @@ -0,0 +1,68 @@ + + + + jQuery UI Dialog - Modal message + + + + + + + + + + + + +
    + +
    +

    + + Your files have downloaded successfully into the My Downloads folder. +

    +

    + Currently using 36% of your storage space. +

    +
    + + +
    +

    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
    +

    +
    +
    +
    + +
    + +
    + +

    Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the modal option to true, and specify a primary action (Ok) with the buttons option.

    + +
    + + + diff --git a/demos/dialog/modal_confirmation.html b/demos/dialog/modal_confirmation.html deleted file mode 100644 index 9bbad8ae1..000000000 --- a/demos/dialog/modal_confirmation.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - jQuery UI Dialog - Modal confirmation - - - - - - - - - - - - -
    - -
    -

    These items will be permanently deleted and cannot be recovered. Are you sure?

    -
    - - -
    -

    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
    -

    -
    -
    -
    - -
    - -
    - -

    Confirm an action that may be destructive or important. Set the modal option to true, and specify primary and secondary user actions with the buttons option.

    - -
    - - - diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html deleted file mode 100644 index 217e8c3c6..000000000 --- a/demos/dialog/modal_form.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - jQuery UI Dialog - Modal form - - - - - - - - - - - - - -
    - -
    -

    All form fields are required.

    - -
    -
    - - - - - - -
    -
    -
    - - -
    -

    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
    -

    -
    -
    -
    - -
    - -
    - -

    Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

    - -
    - - - diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html deleted file mode 100644 index 6052ac155..000000000 --- a/demos/dialog/modal_message.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - jQuery UI Dialog - Modal message - - - - - - - - - - - - -
    - -
    -

    - - Your files have downloaded successfully into the My Downloads folder. -

    -

    - Currently using 36% of your storage space. -

    -
    - - -
    -

    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
    -

    -
    -
    -
    - -
    - -
    - -

    Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the modal option to true, and specify a primary action (Ok) with the buttons option.

    - -
    - - - diff --git a/demos/droppable/index.html b/demos/droppable/index.html index 85719e1be..3ffa5651d 100644 --- a/demos/droppable/index.html +++ b/demos/droppable/index.html @@ -14,7 +14,7 @@
  • Prevent propagation
  • Visual feedback
  • Revert draggable position
    • -
  • Simple photo manager
    • +
  • Simple photo manager
    • diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html new file mode 100644 index 000000000..16a816ea4 --- /dev/null +++ b/demos/droppable/photo-manager.html @@ -0,0 +1,160 @@ + + + + jQuery UI Droppable - Simple photo manager + + + + + + + + + + + + +
    + + + +
    +

    Trash Trash

    +
    + +
    + +
    + +

    You can delete an image either by dragging it to the Trash or by clicking the trash icon.

    +

    You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.

    +

    You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.

    + +
    + + diff --git a/demos/droppable/photo_manager.html b/demos/droppable/photo_manager.html deleted file mode 100644 index 16a816ea4..000000000 --- a/demos/droppable/photo_manager.html +++ /dev/null @@ -1,160 +0,0 @@ - - - - jQuery UI Droppable - Simple photo manager - - - - - - - - - - - - -
    - - - -
    -

    Trash Trash

    -
    - -
    - -
    - -

    You can delete an image either by dragging it to the Trash or by clicking the trash icon.

    -

    You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.

    -

    You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.

    - -
    - - diff --git a/demos/slider/index.html b/demos/slider/index.html index 2319efad6..19b9fea96 100644 --- a/demos/slider/index.html +++ b/demos/slider/index.html @@ -14,11 +14,11 @@
  • Range slider
  • Range with fixed minimum
  • Range with fixed maximum
    • -
  • Vertical slider
    • -
  • Vertical range slider
    • -
  • Multiple sliders
    • +
  • Vertical slider
    • +
  • Vertical range slider
    • +
  • Multiple sliders
  • Simple colorpicker
    • -
  • Simple scrollbar
    • +
  • Simple scrollbar
    • diff --git a/demos/slider/multiple-vertical.html b/demos/slider/multiple-vertical.html new file mode 100644 index 000000000..a4aab977c --- /dev/null +++ b/demos/slider/multiple-vertical.html @@ -0,0 +1,90 @@ + + + + jQuery UI Slider - Multiple sliders + + + + + + + + + + +
    + +

    + +Master volume +

    + +
    + +

    + +Graphic EQ +

    + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +

    Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.

    + +
    + + + diff --git a/demos/slider/multiple_vertical.html b/demos/slider/multiple_vertical.html deleted file mode 100644 index a4aab977c..000000000 --- a/demos/slider/multiple_vertical.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - jQuery UI Slider - Multiple sliders - - - - - - - - - - -
    - -

    - -Master volume -

    - -
    - -

    - -Graphic EQ -

    - -
    -
    -
    -
    -
    -
    -
    - -
    - -
    - -

    Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.

    - -
    - - - diff --git a/demos/slider/range-vertical.html b/demos/slider/range-vertical.html new file mode 100644 index 000000000..37f5c601e --- /dev/null +++ b/demos/slider/range-vertical.html @@ -0,0 +1,47 @@ + + + + jQuery UI Slider - Vertical range slider + + + + + + + + + + +
    + +

    + + +

    + +
    + +
    + +
    + +

    Change the orientation of the range slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."

    + +
    + + + diff --git a/demos/slider/range_vertical.html b/demos/slider/range_vertical.html deleted file mode 100644 index 37f5c601e..000000000 --- a/demos/slider/range_vertical.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - jQuery UI Slider - Vertical range slider - - - - - - - - - - -
    - -

    - - -

    - -
    - -
    - -
    - -

    Change the orientation of the range slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."

    - -
    - - - diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html new file mode 100644 index 000000000..af0cdaf69 --- /dev/null +++ b/demos/slider/side-scroll.html @@ -0,0 +1,134 @@ + + + + jQuery UI Slider - Slider scrollbar + + + + + + + + + + +
    + +
    +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    5
    +
    6
    +
    7
    +
    8
    +
    9
    +
    10
    +
    11
    +
    12
    +
    13
    +
    14
    +
    15
    +
    16
    +
    17
    +
    18
    +
    19
    +
    20
    +
    +
    +
    +
    +
    + + + +
    + + + +
    + +

    Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.

    + +
    + + + diff --git a/demos/slider/side_scroll.html b/demos/slider/side_scroll.html deleted file mode 100644 index af0cdaf69..000000000 --- a/demos/slider/side_scroll.html +++ /dev/null @@ -1,134 +0,0 @@ - - - - jQuery UI Slider - Slider scrollbar - - - - - - - - - - -
    - -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    5
    -
    6
    -
    7
    -
    8
    -
    9
    -
    10
    -
    11
    -
    12
    -
    13
    -
    14
    -
    15
    -
    16
    -
    17
    -
    18
    -
    19
    -
    20
    -
    -
    -
    -
    -
    - - - -
    - - - -
    - -

    Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.

    - -
    - - - diff --git a/demos/slider/slider-vertical.html b/demos/slider/slider-vertical.html new file mode 100644 index 000000000..1cc7fbcfd --- /dev/null +++ b/demos/slider/slider-vertical.html @@ -0,0 +1,49 @@ + + + + jQuery UI Slider - Vertical slider + + + + + + + + + + +
    + +

    + + +

    + +
    + +
    + +
    + +

    Change the orientation of the slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."

    + +
    + + + diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html deleted file mode 100644 index 1cc7fbcfd..000000000 --- a/demos/slider/slider_vertical.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - jQuery UI Slider - Vertical slider - - - - - - - - - - -
    - -

    - - -

    - -
    - -
    - -
    - -

    Change the orientation of the slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."

    - -
    - - - -- cgit v1.2.3