diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html new file mode 100644 index 000000000..4309c9a84 --- /dev/null +++ b/demos/button/checkbox.html @@ -0,0 +1,46 @@ + + + + jQuery UI Button - Checkboxes demo + + + + + + + + + + + +
+ + + +
+ + + +
+ +
+ + + +
+ +

TODO

+ +
+ + + + + diff --git a/demos/button/default.html b/demos/button/default.html new file mode 100644 index 000000000..c07d2e7bd --- /dev/null +++ b/demos/button/default.html @@ -0,0 +1,43 @@ + + + + jQuery UI Button - Default demo + + + + + + + + + + + +
+ + + + + + 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 new file mode 100644 index 000000000..fa5c63981 --- /dev/null +++ b/demos/button/icons.html @@ -0,0 +1,62 @@ + + + + jQuery UI Button - Icons demo + + + + + + + + + + + +
+ + + + + + +
+ + + +
+ +

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 new file mode 100644 index 000000000..7752d72e2 --- /dev/null +++ b/demos/button/index.html @@ -0,0 +1,22 @@ + + + + jQuery UI Button Demos + + + + +
+

Examples

+ +
+ + + diff --git a/demos/button/radio.html b/demos/button/radio.html new file mode 100644 index 000000000..d8e8643b2 --- /dev/null +++ b/demos/button/radio.html @@ -0,0 +1,45 @@ + + + + jQuery UI Button - Radio Buttons demo + + + + + + + + + + + +
+ +
+
+ + + +
+
+ +
+ + + +
+ +

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

+ +
+ + + + + diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html new file mode 100644 index 000000000..182fb6999 --- /dev/null +++ b/demos/button/splitbutton.html @@ -0,0 +1,57 @@ + + + + jQuery UI Button - Default demo + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+ +

An example of a split button built with two buttons: A plan 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 new file mode 100644 index 000000000..dc35241cb --- /dev/null +++ b/demos/button/toolbar.html @@ -0,0 +1,123 @@ + + + + jQuery UI Button - Toolbar demo + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + +
+ + + +
+ +

+ 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/other-months.html b/demos/datepicker/other-months.html index 19a090449..9f65c91b5 100644 --- a/demos/datepicker/other-months.html +++ b/demos/datepicker/other-months.html @@ -1,33 +1,33 @@ - - - - jQuery UI Datepicker - Dates in other months - - - - - - - - - - -
- -

Date:

- -
- -
- -

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

- -
- - - + + + + jQuery UI Datepicker - Dates in other months + + + + + + + + + + +
+ +

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 59305d4d4..e80dca6dc 100644 --- a/demos/datepicker/show-week.html +++ b/demos/datepicker/show-week.html @@ -1,35 +1,35 @@ - - - - jQuery UI Datepicker - Show week of the year - - - - - - - - - - -
- -

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.

- -
- - - + + + + jQuery UI Datepicker - Show week of the year + + + + + + + + + + +
+ +

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/dialog/animated.html b/demos/dialog/animated.html index 2bb96d369..dd84b25d4 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -17,7 +17,7 @@ + diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index d3eb00d77..ffcdd70fc 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -7,6 +7,7 @@ + @@ -23,7 +24,6 @@ div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } - .ui-button { outline: 0; margin: 0; padding: .4em 1em .5em; text-decoration: none; cursor: pointer; position: relative; text-align: center; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } @@ -112,29 +112,11 @@ - $('#create-user').click(function() { - $('#dialog-form').dialog('open'); - }) - .hover( - function() { - $(this).addClass("ui-state-hover"); - }, - function() { - $(this).removeClass("ui-state-hover"); - } - ) - .focus(function() { - $(this).addClass('ui-state-focus'); - }) - .blur(function() { - $(this).removeClass('ui-state-focus'); - }) - .mousedown(function() { - $(this).addClass("ui-state-active"); - }) - .mouseup(function() { - $(this).removeClass("ui-state-active"); - }); + $('#create-user') + .button() + .click(function() { + $('#dialog-form').dialog('open'); + }); }); @@ -181,7 +163,7 @@ - + diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index fc1abb3b2..0fdae6a06 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -7,6 +7,7 @@ + diff --git a/demos/index.html b/demos/index.html index c7b1f8eae..d62ed9c7d 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,6 +11,7 @@ + @@ -255,6 +256,7 @@
Sortable
Widgets
Accordion
+
Button
Datepicker
Dialog
Progressbar
diff --git a/demos/position/cycler.html b/demos/position/cycler.html index 20ef6cd39..3fd150662 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -6,7 +6,6 @@ - @@ -23,7 +22,7 @@ $.fn.position2 = function(options) { return this.position($.extend({ of: window, - by: function(to) { + using: function(to) { $(this).css({ top: to.top, left: to.left @@ -33,27 +32,27 @@ }, options)); } - $.fn.left = function(by) { + $.fn.left = function(using) { return this.position2({ my: "right middle", at: "left middle", offset: "25 0", - by: by + using: using }); } - $.fn.right = function(by) { + $.fn.right = function(using) { return this.position2({ my: "left middle", at: "right middle", offset: "-25 0", - by: by + using: using }); } - $.fn.center = function(by) { + $.fn.center = function(using) { return this.position2({ my: "center middle", at: "center middle", - by: by + using: using }); }; diff --git a/demos/position/default.html b/demos/position/default.html index 098b62b88..94b82ccec 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -6,6 +6,7 @@ + @@ -44,23 +45,23 @@ - - - - - - - - - - - -
- -
- -
- -
-

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.

- -
- - - + + + + jQuery UI Slider - Snap to increments + + + + + + + + + + + + + +
+ +
+ +
+ +
+

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/tabs/bottom.html b/demos/tabs/bottom.html index ebf307ad7..27636ce80 100644 --- a/demos/tabs/bottom.html +++ b/demos/tabs/bottom.html @@ -1,59 +1,59 @@ - - - - jQuery UI Tabs - Tabs at bottom - - - - - - - - - - - -
- -
- -
-

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.

-
-
- -
- -
- -

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

- -
- - - + + + + jQuery UI Tabs - Tabs at bottom + + + + + + + + + + + +
+ +
+ +
+

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.

+
+
+ +
+ +
+ +

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/manipulation.html b/demos/tabs/manipulation.html index 34a73ab4d..1197b20e8 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -6,6 +6,7 @@ + @@ -67,13 +68,11 @@ } // addTab button: just opens the dialog - $('#add_tab').click(function() { - $dialog.dialog('open'); - }).hover(function() { - $(this).addClass("ui-state-hover"); - }, function() { - $(this).removeClass("ui-state-hover"); - }); + $('#add_tab') + .button() + .click(function() { + $dialog.dialog('open'); + }); // close icon: removing the tab on click // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924 @@ -99,7 +98,7 @@ - +