diff options
Diffstat (limited to 'demos/tabs')
| -rw-r--r-- | demos/tabs/ajax.html | 13 | ||||
| -rw-r--r-- | demos/tabs/bottom.html | 13 | ||||
| -rw-r--r-- | demos/tabs/collapsible.html | 13 | ||||
| -rw-r--r-- | demos/tabs/default.html | 13 | ||||
| -rw-r--r-- | demos/tabs/index.html | 24 | ||||
| -rw-r--r-- | demos/tabs/manipulation.html | 53 | ||||
| -rw-r--r-- | demos/tabs/mouseover.html | 15 | ||||
| -rw-r--r-- | demos/tabs/sortable.html | 21 | ||||
| -rw-r--r-- | demos/tabs/vertical.html | 13 |
9 files changed, 55 insertions, 123 deletions
diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html index f47c1c6a3..a7146c7af 100644 --- a/demos/tabs/ajax.html +++ b/demos/tabs/ajax.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Content via Ajax</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -25,8 +25,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> @@ -40,14 +38,9 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>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.</p> <p>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.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/bottom.html b/demos/tabs/bottom.html index ba35914f0..1618166d3 100644 --- a/demos/tabs/bottom.html +++ b/demos/tabs/bottom.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Tabs at bottom</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -32,8 +32,6 @@ </head> <body> -<div class="demo"> - <div id="tabs" class="tabs-bottom"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -53,13 +51,8 @@ </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 --> - +</div> </body> </html> diff --git a/demos/tabs/collapsible.html b/demos/tabs/collapsible.html index 3bf4a6769..7faac574d 100644 --- a/demos/tabs/collapsible.html +++ b/demos/tabs/collapsible.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Collapse content</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -19,8 +19,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -41,15 +39,10 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the selected tab to toggle its content closed/open. To enable this functionality, set the <code>collapsible</code> option to true.</p> <pre><code>collapsible: true </code></pre> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/default.html b/demos/tabs/default.html index 9795334cc..5b95757ea 100644 --- a/demos/tabs/default.html +++ b/demos/tabs/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -17,8 +17,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -37,13 +35,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click tabs to swap between content that is broken into logical sections.</p> -</div><!-- End demo-description --> - +</div> </body> </html> 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 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs Demos</title> - <link rel="stylesheet" href="../demos.css"> </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="ajax.html">Content via Ajax</a></li> - <li><a href="mouseover.html">Open on mouseover</a></li> - <li><a href="collapsible.html">Collapse content</a></li> - <li><a href="sortable.html">Sortable</a></li> - <li><a href="manipulation.html">Simple manipulation</a></li> - <li><a href="bottom.html">Tabs below content</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="ajax.html">Content via Ajax</a></li> + <li><a href="mouseover.html">Open on mouseover</a></li> + <li><a href="collapsible.html">Collapse content</a></li> + <li><a href="sortable.html">Sortable</a></li> + <li><a href="manipulation.html">Simple manipulation</a></li> + <li><a href="bottom.html">Tabs below content</a></li> +</ul> </body> </html> diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html index a115e1470..67ed3d304 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Simple manipulation</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -85,37 +85,30 @@ </head> <body> -<div class="demo"> - - <div id="dialog" title="Tab data"> - <form> - <fieldset class="ui-helper-reset"> - <label for="tab_title">Title</label> - <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /> - <label for="tab_content">Content</label> - <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> - </fieldset> - </form> - </div> - - <button id="add_tab">Add Tab</button> - - <div id="tabs"> - <ul> - <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></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="dialog" title="Tab data"> + <form> + <fieldset class="ui-helper-reset"> + <label for="tab_title">Title</label> + <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /> + <label for="tab_content">Content</label> + <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> + </fieldset> + </form> +</div> + +<button id="add_tab">Add Tab</button> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></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><!-- End demo --> - - +</div> <div class="demo-description"> <p>Simple tabs adding and removing.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/mouseover.html b/demos/tabs/mouseover.html index ef362fbc1..631fd84c0 100644 --- a/demos/tabs/mouseover.html +++ b/demos/tabs/mouseover.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Open on mouseover</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -19,8 +19,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -39,15 +37,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p> -<pre><code>event: 'mouseover' -</code></pre> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/sortable.html b/demos/tabs/sortable.html index 2580ce496..59a0ba963 100644 --- a/demos/tabs/sortable.html +++ b/demos/tabs/sortable.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Sortable</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> @@ -25,8 +25,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -45,20 +43,9 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Drag the tabs above to re-order them.</p> -<p> -Making tabs sortable is as simple as calling -<code>.sortable()</code> -on the -<code>.ui-tabs-nav</code> -element. -</p> -</div><!-- End demo-description --> - +<p>Making tabs sortable is as simple as calling <code>.sortable()</code> on the <code>.ui-tabs-nav</code> element.</p> +</div> </body> </html> diff --git a/demos/tabs/vertical.html b/demos/tabs/vertical.html index 5e4716837..b68ec50c8 100644 --- a/demos/tabs/vertical.html +++ b/demos/tabs/vertical.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Vertical Tabs functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -26,8 +26,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -49,13 +47,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click tabs to swap between content that is broken into logical sections.</p> -</div><!-- End demo-description --> - +</div> </body> </html> |