diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-01-07 03:19:50 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-01-07 03:19:50 +0000 |
| commit | 90fb45dffafc2e891b1ebca948ad33e6b94de112 (patch) | |
| tree | 6bd09ea116ef2cdd86ec0fa70bf740617f67d441 /demos | |
| parent | 975b02a82cdff29fd8469bfe4324472c2ae3f954 (diff) | |
| download | jquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.tar.gz jquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.zip | |
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests).
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/button/checkbox.html | 46 | ||||
| -rw-r--r-- | demos/button/default.html | 43 | ||||
| -rw-r--r-- | demos/button/icons.html | 62 | ||||
| -rw-r--r-- | demos/button/index.html | 22 | ||||
| -rw-r--r-- | demos/button/radio.html | 45 | ||||
| -rw-r--r-- | demos/button/splitbutton.html | 57 | ||||
| -rw-r--r-- | demos/button/toolbar.html | 123 | ||||
| -rw-r--r-- | demos/datepicker/other-months.html | 66 | ||||
| -rw-r--r-- | demos/datepicker/show-week.html | 70 | ||||
| -rw-r--r-- | demos/dialog/animated.html | 2 | ||||
| -rw-r--r-- | demos/dialog/default.html | 2 | ||||
| -rw-r--r-- | demos/dialog/modal-confirmation.html | 1 | ||||
| -rw-r--r-- | demos/dialog/modal-form.html | 32 | ||||
| -rw-r--r-- | demos/dialog/modal-message.html | 1 | ||||
| -rw-r--r-- | demos/index.html | 2 | ||||
| -rw-r--r-- | demos/position/cycler.html | 15 | ||||
| -rw-r--r-- | demos/position/default.html | 9 | ||||
| -rw-r--r-- | demos/slider/multiple-vertical.html | 2 | ||||
| -rw-r--r-- | demos/slider/tabs.html | 132 | ||||
| -rw-r--r-- | demos/tabs/bottom.html | 118 | ||||
| -rw-r--r-- | demos/tabs/manipulation.html | 15 |
21 files changed, 624 insertions, 241 deletions
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Checkboxes demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#check").button();
+ $("#format").buttonset();
+ });
+ </script>
+ <style>
+ #format { margin-top: 2em; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <input type="checkbox" id="check" /><label for="check">Toggle</label>
+
+ <div id="format">
+ <input type="checkbox" id="check1" /><label for="check1">B</label>
+ <input type="checkbox" id="check2" /><label for="check2">I</label>
+ <input type="checkbox" id="check3" /><label for="check3">U</label>
+ </div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>TODO</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Default demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("button, input:submit, a").button();
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <button>A button element</button>
+
+ <input type="submit" value="A submit button">
+
+ <a href="#">An anchor</a>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Icons demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("button:first").button({
+ icons: {
+ primary: 'ui-icon-locked'
+ },
+ text: false
+ }).next().button({
+ icons: {
+ primary: 'ui-icon-locked'
+ }
+ }).next().button({
+ icons: {
+ primary: 'ui-icon-gear',
+ secondary: 'ui-icon-triangle-1-s'
+ }
+ }).next().button({
+ icons: {
+ primary: 'ui-icon-gear',
+ secondary: 'ui-icon-triangle-1-s'
+ },
+ text: false
+ });
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <button>Button with icon only</button>
+ <button>Button with icon on the left</button>
+ <button>Button with two icons</button>
+ <button>Button with two icons and no text</button>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+ <li><a href="radio.html">Radios</a></li>
+ <li><a href="checkbox.html">Checkboxes</a></li>
+ <li><a href="icons.html">Icons</a></li>
+ <li><a href="toolbar.html">Toolbar</a></li>
+ <li><a href="splitbutton.html">Split Button</a></li>
+ </ul>
+</div>
+
+</body>
+</html>
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Radio Buttons demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#radio1").buttonset();
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <form>
+ <div id="radio1">
+ <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
+ <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
+ <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
+ </div>
+ </form>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>A set of three radio buttons transformed into a button set.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Default demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#rerun").button().click(function() {
+ alert("Running the last action");
+ })
+ .next()
+ .button({
+ text: false,
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ }
+ })
+ .click(function() {
+ alert("Could display a menu to select an action");
+ })
+ .parent()
+ .buttonset();
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <div>
+ <button id="rerun">Run last action</button>
+ <button id="select">Select an action</button>
+ </div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>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.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Toolbar demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #toolbar { + padding: 10px 4px; + } + </style> + <script type="text/javascript">
+ $(function() {
+ $('#beginning').button({ + text: false, + icons: { + primary: 'ui-icon-seek-start' + } + });
+ $('#rewind').button({ + text: false, + icons: { + primary: 'ui-icon-seek-prev' + } + });
+ $('#play').button({ + text: false, + icons: { + primary: 'ui-icon-play' + } + }) + .click(function() { + var options; + if ($(this).text() == 'play') { + options = { + label: 'pause', + icons: { + primary: 'ui-icon-pause' + } + }; + } else { + options = { + label: 'play', + icons: { + primary: 'ui-icon-play' + } + }; + } + $(this).button('option', options); + });
+ $('#stop').button({ + text: false, + icons: { + primary: 'ui-icon-stop' + } + })
+ .click(function() {
+ $('#play').button('option', {
+ label: 'play',
+ icons: {
+ primary: 'ui-icon-play'
+ }
+ });
+ });
+ $('#forward').button({ + text: false, + icons: { + primary: 'ui-icon-seek-next' + } + });
+ $('#end').button({ + text: false, + icons: { + primary: 'ui-icon-seek-end' + } + });
+ $("#shuffle").button();
+ $("#repeat").buttonset();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+ <span id="toolbar" class="ui-widget-header ui-corner-all"> + <button id="beginning">go to beginning</button> + <button id="rewind">rewind</button> + <button id="play">play</button> + <button id="stop">stop</button> + <button id="forward">fast forward</button> + <button id="end">go to end</button>
+
+ <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
+
+ <span id="repeat">
+ <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
+ <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
+ <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
+ </span> + </span>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>
+ 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.
+</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
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 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Datepicker - Dates in other months</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("#datepicker").datepicker({showOtherMonths: true, selectOtherMonths: true});
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<p>Date: <input type="text" id="datepicker"></p>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>The datepicker can show dates that come from other than the main month
- being displayed. These other dates can also be made selectable.</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Datepicker - Dates in other months</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("#datepicker").datepicker({showOtherMonths: true, selectOtherMonths: true}); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p>Date: <input type="text" id="datepicker"></p> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>The datepicker can show dates that come from other than the main month + being displayed. These other dates can also be made selectable.</p> + +</div><!-- End demo-description --> + +</body> +</html> 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 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Datepicker - Show week of the year</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("#datepicker").datepicker({showWeek: true, firstDay: 1});
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<p>Date: <input type="text" id="datepicker"></p>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>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.</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Datepicker - Show week of the year</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("#datepicker").datepicker({showWeek: true, firstDay: 1}); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p>Date: <input type="text" id="datepicker"></p> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>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.</p> + +</div><!-- End demo-description --> + +</body> +</html> 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 @@ <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> - $.ui.dialog.defaults.stackfix = true; + $.ui.dialog.prototype.options.stackfix = true; // increase the default animation speed to exaggerate the effect $.fx.speeds._default = 1000; $(function() { diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 66f052d82..62638f399 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -14,7 +14,7 @@ <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> - $.ui.dialog.defaults.stackfix = true; + $.ui.dialog.prototype.options.stackfix = true; $(function() { $("#dialog").dialog(); }); diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index bbb785c4b..8c5c0ba89 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -7,6 +7,7 @@ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> 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 @@ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> @@ -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'); + }); }); </script> @@ -181,7 +163,7 @@ </tbody> </table> </div> -<button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button> +<button id="create-user">Create new user</button> </div><!-- End demo --> 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 @@ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> 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 @@ <script type="text/javascript" src="../ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="../ui/jquery.ui.stackfix.js"></script> <script type="text/javascript" src="../ui/jquery.ui.accordion.js"></script> + <script type="text/javascript" src="../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../ui/jquery.ui.datepicker.js"></script> <script type="text/javascript" src="../ui/jquery.ui.dialog.js"></script> <script type="text/javascript" src="../ui/jquery.ui.draggable.js"></script> @@ -255,6 +256,7 @@ <dd><a href="sortable/index.html">Sortable</a></dd> <dt>Widgets</dt> <dd><a href="accordion/index.html">Accordion</a></dd> + <dd><a href="button/index.html">Button</a></dd> <dd><a href="datepicker/index.html">Datepicker</a></dd> <dd><a href="dialog/index.html">Dialog</a></dd> <dd><a href="progressbar/index.html">Progressbar</a></dd> 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 @@ <script type="text/javascript" src="../../jquery-1.3.2.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> @@ -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 @@ <script type="text/javascript" src="../../jquery-1.3.2.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> @@ -44,23 +45,23 @@ <script type="text/javascript"> $(function() { - function position(by) { + function position(using) { $('.positionable').position({ of: $('#parent'), my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(), offset: $('#offset').val(), - by: by, + using: using, collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() }); } $('.positionable').css("opacity", 0.5); - $(':input').bind('click keyup change', position); + $(':input').bind('click keyup change', function() { position(); }); $("#parent").draggable({ - drag: position + drag: function() { position(); } }); $('.positionable').draggable({ diff --git a/demos/slider/multiple-vertical.html b/demos/slider/multiple-vertical.html index d488f113a..046384be5 100644 --- a/demos/slider/multiple-vertical.html +++ b/demos/slider/multiple-vertical.html @@ -18,7 +18,7 @@ <script type="text/javascript"> $(function() { // change defaults for range, animate and orientation - $.extend($.ui.slider.defaults, { + $.extend($.ui.slider.prototype.options, { range: "min", animate: true, orientation: "vertical" diff --git a/demos/slider/tabs.html b/demos/slider/tabs.html index f8d3e2918..dca6150a0 100644 --- a/demos/slider/tabs.html +++ b/demos/slider/tabs.html @@ -1,66 +1,66 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Slider - Snap to increments</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #demo-frame > div.demo { padding: 10px !important; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#tabs").tabs({
- select: function(event, ui) {
- $("#slider").slider("value", ui.index);
- }
- });
- $("#slider").slider({
- min: 0,
- max: $("#tabs").tabs("length") - 1,
- slide: function(event, ui) {
- $("#tabs").tabs("select", ui.value);
- }
- });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<div id="slider" style="width:100px"></div>
-
-<div id="tabs">
- <ul>
- <li><a href="#tabs-1">Nunc tincidunt</a></li>
- <li><a href="#tabs-2">Proin dolor</a></li>
- <li><a href="#tabs-3">Aenean lacinia</a></li>
- </ul>
- <div id="tabs-1">
- <p>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.</p>
- </div>
- <div id="tabs-2">
- <p>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.</p>
- </div>
- <div id="tabs-3">
- <p>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.</p>
- <p>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.</p>
- </div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>Control tabs with a slider.</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Slider - Snap to increments</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #demo-frame > div.demo { padding: 10px !important; } + </style> + <script type="text/javascript"> + $(function() { + $("#tabs").tabs({ + select: function(event, ui) { + $("#slider").slider("value", ui.index); + } + }); + $("#slider").slider({ + min: 0, + max: $("#tabs").tabs("length") - 1, + slide: function(event, ui) { + $("#tabs").tabs("select", ui.value); + } + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div id="slider" style="width:100px"></div> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a></li> + <li><a href="#tabs-2">Proin dolor</a></li> + <li><a href="#tabs-3">Aenean lacinia</a></li> + </ul> + <div id="tabs-1"> + <p>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.</p> + </div> + <div id="tabs-2"> + <p>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.</p> + </div> + <div id="tabs-3"> + <p>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.</p> + <p>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.</p> + </div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Control tabs with a slider.</p> + +</div><!-- End demo-description --> + +</body> +</html> 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 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Tabs - Tabs at bottom</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("#tabs").tabs();
- $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
- .removeClass("ui-corner-all ui-corner-top")
- .addClass("ui-corner-bottom");
- });
- </script>
- <style>
- #tabs { height: 200px; }
- .tabs-bottom { position: relative; }
- .tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; }
- .tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; }
- .tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
- .ui-tabs-selected { margin-top: -3px !important; }
- </style>
-</head>
-<body>
-
-<div class="demo">
-
-<div id="tabs" class="tabs-bottom">
- <ul>
- <li><a href="#tabs-1">Nunc tincidunt</a></li>
- <li><a href="#tabs-2">Proin dolor</a></li>
- <li><a href="#tabs-3">Aenean lacinia</a></li>
- </ul>
- <div id="tabs-1">
- <p>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.</p>
- </div>
- <div id="tabs-2">
- <p>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.</p>
- </div>
- <div id="tabs-3">
- <p>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.</p>
- <p>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.</p>
- </div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Tabs - Tabs at bottom</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("#tabs").tabs(); + $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *") + .removeClass("ui-corner-all ui-corner-top") + .addClass("ui-corner-bottom"); + }); + </script> + <style> + #tabs { height: 200px; } + .tabs-bottom { position: relative; } + .tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; } + .tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } + .tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; } + .ui-tabs-selected { margin-top: -3px !important; } + </style> +</head> +<body> + +<div class="demo"> + +<div id="tabs" class="tabs-bottom"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a></li> + <li><a href="#tabs-2">Proin dolor</a></li> + <li><a href="#tabs-3">Aenean lacinia</a></li> + </ul> + <div id="tabs-1"> + <p>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.</p> + </div> + <div id="tabs-2"> + <p>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.</p> + </div> + <div id="tabs-3"> + <p>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.</p> + <p>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.</p> + </div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.</p> + +</div><!-- End demo-description --> + +</body> +</html> 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 @@ <script type="text/javascript" src="../../jquery-1.3.2.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> @@ -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 @@ </form> </div> - <button id="add_tab" class="ui-button ui-state-default ui-corner-all">Add Tab</button> + <button id="add_tab">Add Tab</button> <div id="tabs"> <ul> |