r1356 - trunk/demos/tabs

Author: fg.todd
Date: Tue Dec 30 11:12:57 2008
New Revision: 1356
Added:
trunk/demos/tabs/collapsable.html
Modified:
trunk/demos/tabs/ajax.html
trunk/demos/tabs/default.html
trunk/demos/tabs/index.html
trunk/demos/tabs/mouseover.html
Log:
Added container divs and descriptions
Modified: trunk/demos/tabs/ajax.html
==============================================================================
--- trunk/demos/tabs/ajax.html    (original)
+++ trunk/demos/tabs/ajax.html    Tue Dec 30 11:12:57 2008
@@ -15,18 +15,30 @@
</head>
<body>
+<div class="demo">
+
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
-        <li><a href="ajax/content1.html">Ajax Tab</a></li>
-        <li><a href="ajax/content2.html">Ajax Tab</a></li>
+        <li><a href="ajax/content1.html">Ajax Tab 1</a></li>
+        <li><a href="ajax/content2.html">Ajax Tab 2</a></li>
    </ul>
    <div id="tabs-1">

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.

Mauris vitae ante. Curabitur augue. Nulla purus nibh, lobortis ut,
feugiat at, aliquam id, purus. Sed venenatis, lorem venenatis volutpat
commodo, purus quam lacinia justo, mattis interdum pede pede a odio. Fusce
nibh. Morbi nisl mauris, dapibus in, tristique eget, accumsan et, pede.
Donec mauris risus, pulvinar ut, faucibus eu, mollis in, nunc. In augue
massa, commodo a, cursus vehicula, varius eu, dui. Suspendisse sodales
suscipit lorem. Morbi malesuada, eros quis condimentum dignissim, lectus
nibh tristique urna, non bibendum diam massa vel risus. Morbi suscipit.
Proin egestas, eros at scelerisque scelerisque, dolor lacus fringilla
lacus, ut ullamcorper mi magna at quam. Aliquam sed elit. Aliquam turpis
purus, congue quis, iaculis id, ullamcorper sit amet, justo. Maecenas sed
mauris. Proin magna justo, interdum in, tincidunt eu, viverra eu, turpis.
Suspendisse mollis. In magna. Phasellus pellentesque, urna pellentesque
convallis pellentesque, augue sem blandit pede, at rhoncus libero nisl a
odio.

Sed vitae nibh non magna semper tempor. Duis dolor. Nam congue
laoreet arcu. Fusce lobortis enim quis ligula. Maecenas commodo odio id mi.
Maecenas scelerisque tellus eu odio. Etiam dolor purus, lacinia a,
imperdiet in, aliquam et, eros. In pellentesque. Nullam ac massa. Integer
et turpis. Ut quam augue, congue non, imperdiet id, eleifend ac, nisi.
Etiam ac arcu. Cras iaculis accumsan erat. Nullam vulputate sapien nec nisi
pretium rhoncus. Aliquam a nibh. Vivamus est ante, fermentum a, tincidunt
ut, imperdiet nec, velit. Aenean non tortor. Sed nec mauris eget tellus
condimentum rutrum.

</div>
</div>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

This example fetches in external content via AJAX for the 2nd and 3rd
tabs just by setting an href for the tabs. While the AJAX request is
waiting for a response, the tab label changes to say "Loading...", then
returns to the normal label once loaded.

+
+</div>
+
+
</body>
</html>
Added: trunk/demos/tabs/collapsable.html
==============================================================================
--- (empty file)
+++ trunk/demos/tabs/collapsable.html    Tue Dec 30 11:12:57 2008
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Tabs - Collapsable Demo</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+    <script type="text/javascript" src="../../ui/ui.core.js"></script>
+    <script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+    <script type="text/javascript">
+    $(function() {
+        $("#tabs").tabs({
+            deselectable: true
+        });
+    });
+    </script>
+</head>
+<body>
+
+<div class="demo">
+
+<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">
+

<strong>Click this tab again to close the content pane.</strong></b>
+

+    </div>
+    <div id="tabs-2">
+

<strong>Click this tab again to close the content pane.</strong></b>
+

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.

+ <div id="tabs-3">
+

<strong>Click this tab again to close the content pane.</strong></b>
+

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.

+ </div>
+</div>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

This example allows the tab strip to be toggled closed by setting the
delectable option to true like this: <pre>deselectable: true</pre>

+
+</div>
+
+
+
+</body>
+</html>
Modified: trunk/demos/tabs/default.html
==============================================================================
--- trunk/demos/tabs/default.html    (original)
+++ trunk/demos/tabs/default.html    Tue Dec 30 11:12:57 2008
@@ -15,6 +15,8 @@
</head>
<body>
+<div class="demo">
+
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
@@ -23,20 +25,25 @@
    </ul>
    <div id="tabs-1">

    </div>
    <div id="tabs-2">

Maecenas mattis ante at nisi adipiscing interdum. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Curabitur faucibus vulputate nibh.
Cras vehicula tincidunt neque. Suspendisse rhoncus scelerisque turpis. In
et nisl. Nunc ac pede at pede semper convallis. Pellentesque lorem. Sed
sapien. Maecenas mollis sollicitudin ante. Nunc leo. Suspendisse dapibus
rhoncus mi.

    </div>
    <div id="tabs-3">

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.

Ut dui. Aenean lacinia ante. Nunc tincidunt congue ipsum. Cras vel
sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; In turpis nulla, molestie quis, imperdiet nec,
accumsan vel, erat. Proin consequat. Aenean gravida tristique arcu. Duis ut
purus convallis nisl ultrices sodales. Vivamus nisi. Ut semper, sem
adipiscing ultricies fringilla, quam diam facilisis odio, ut tempus neque
dui interdum leo. Donec eros nibh, scelerisque in, gravida ultrices,
rhoncus sed, purus. Donec non orci. Etiam id arcu vel ipsum consequat
tristique. Mauris vitae velit.

Morbi consectetur pellentesque nulla. Proin dolor. Nulla mi nunc,
varius pharetra, adipiscing vitae, porttitor ut, felis. Praesent urna mi,
fringilla id, semper et, convallis a, est. 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. Donec ut nibh ac turpis ultrices
porttitor. Sed et est vel lectus eleifend suscipit. Nam suscipit libero id
mi. Donec magna turpis, molestie eu, lacinia ut, lobortis ac, mauris.
Curabitur vulputate interdum libero.

</div>
</div>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

This the basic default tab strip that swaps between different blocks of
content.

+
+</div>
</body>
</html>
Modified: trunk/demos/tabs/index.html
==============================================================================
--- trunk/demos/tabs/index.html    (original)
+++ trunk/demos/tabs/index.html    Tue Dec 30 11:12:57 2008
@@ -9,9 +9,9 @@
<div class="demos-nav">
    <h4>Tabs</h4>
    <ul>
-        <li class="demo-config-on"><a href="default.html">Default</a></li>
-        <li><a href="ajax.html">Ajax</a></li>
-        <li><a href="deselectable.html">Deselectable</a></li>
+        <li class="demo-config-on"><a href="default.html">Default tabs</a></li>
+        <li><a href="ajax.html">Ajax tabs</a></li>
+        <li><a href="collapsable.html">Collapsable tabs</a></li>
        <li><a href="mouseover.html">Mouseover (Event)</a></li>
    </ul>
</div>
Modified: trunk/demos/tabs/mouseover.html
==============================================================================
--- trunk/demos/tabs/mouseover.html    (original)
+++ trunk/demos/tabs/mouseover.html    Tue Dec 30 11:12:57 2008
@@ -17,6 +17,8 @@
</head>
<body>
+<div class="demo">
+
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
@@ -25,20 +27,27 @@
    </ul>
    <div id="tabs-1">

    </div>
    <div id="tabs-2">

    </div>
    <div id="tabs-3">

</div>
</div>
+
+</div>
+
+
+
+<div class="demo-description">
+
+

This example changes the default swap event from a click to mouseover
by changing the event option: <pre>event: 'mouseover'</pre>

+
+</div>
+
+
</body>
</html>