aboutsummaryrefslogtreecommitdiffstats
path: root/demos/tabs
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
committerScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
commit303f20e1b3c977d75047bed1a3533a180d73fab5 (patch)
treec8cf97b57f2493313dfd92c1dfceedb29d137d67 /demos/tabs
parent9e259c6e5369bf272dd14df7aea1372c5b064300 (diff)
downloadjquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz
jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip
Demos: Cleanup.
Diffstat (limited to 'demos/tabs')
-rw-r--r--demos/tabs/ajax.html11
-rw-r--r--demos/tabs/bottom.html11
-rw-r--r--demos/tabs/collapsible.html11
-rw-r--r--demos/tabs/default.html9
-rw-r--r--demos/tabs/index.html24
-rw-r--r--demos/tabs/manipulation.html51
-rw-r--r--demos/tabs/mouseover.html13
-rw-r--r--demos/tabs/sortable.html19
-rw-r--r--demos/tabs/vertical.html11
9 files changed, 47 insertions, 113 deletions
diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html
index f47c1c6a3..97d3cf8c0 100644
--- a/demos/tabs/ajax.html
+++ b/demos/tabs/ajax.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -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..3ffb3d8b5 100644
--- a/demos/tabs/bottom.html
+++ b/demos/tabs/bottom.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -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..0645dd1d2 100644
--- a/demos/tabs/collapsible.html
+++ b/demos/tabs/collapsible.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -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..03aa65c8c 100644
--- a/demos/tabs/default.html
+++ b/demos/tabs/default.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -37,13 +37,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..fbd85b9bf 100644
--- a/demos/tabs/manipulation.html
+++ b/demos/tabs/manipulation.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -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..052cd24b4 100644
--- a/demos/tabs/mouseover.html
+++ b/demos/tabs/mouseover.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -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..3e1d3f87e 100644
--- a/demos/tabs/sortable.html
+++ b/demos/tabs/sortable.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -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..1d901d7fb 100644
--- a/demos/tabs/vertical.html
+++ b/demos/tabs/vertical.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 22:27:11 +0000