r1333 - trunk/demos/accordion

Author: fg.todd
Date: Tue Dec 30 08:15:57 2008
New Revision: 1333
Added:
trunk/demos/accordion/collapsable.html
trunk/demos/accordion/custom_icons.html
Modified:
trunk/demos/accordion/fillspace.html
trunk/demos/accordion/index.html
trunk/demos/accordion/mouseover.html
Log:
Added new custom icon and collapsable demos, updated index
Added: trunk/demos/accordion/collapsable.html
==============================================================================
--- (empty file)
+++ trunk/demos/accordion/collapsable.html    Tue Dec 30 08:15:57 2008
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Accordion - 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.accordion.js"></script>
+    <script type="text/javascript">
+    $(function() {
+        $("#accordion").accordion({
+            header: "h3",
+            alwaysOpen: false
+        });
+    });
+    </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="accordion">
+    <div>
+        <h3><a href="#">Section 1</a></h3>
+        <div>
+

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum
sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo
ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque
vulputate.

+        </div>
+    </div>
+    <div>
+        <h3><a href="#">Section 2</a></h3>
+        <div>
+

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit
amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis
porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non
quam. In suscipit faucibus urna.

+        </div>
+    </div>
+    <div>
+        <h3><a href="#">Section 3</a></h3>
+        <div>
+

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus
ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna
quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis
dui.

+            <ul>
+                <li>List item one</li>
+                <li>List item two</li>
+                <li>List item three</li>
+            </ul>
+        </div>
+    </div>
+    <div>
+        <h3><a href="#">Section 4</a></h3>
+        <div>
+

Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer
dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos.

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

By default, accordions always keep one section open. To allow for all
sections to be be collapsable, set the alwaysOpen option to false. Click on
the currently open section to collapse the section in the example above.

+
+
+</div>
+
+</body>
+</html>
Added: trunk/demos/accordion/custom_icons.html
==============================================================================
--- (empty file)
+++ trunk/demos/accordion/custom_icons.html    Tue Dec 30 08:15:57 2008
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Accordion - Custom Icon 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.accordion.js"></script>
+    <script type="text/javascript">
+    $(function() {
+        $("#accordion").accordion({
+            header: "h3",
+            icons: {
+          header: "ui-icon-circle-arrow-e",
+              headerSelected: "ui-icon-circle-arrow-s"}
+        });
+    });
+    </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="accordion">
+    <div>
+        <h3><a href="#">Section 1</a></h3>
+        <div>
+

+        </div>
+    </div>
+    <div>
+        <h3><a href="#">Section 2</a></h3>
+        <div>
+

+        </div>
+    </div>
+    <div>
+        <h3><a href="#">Section 3</a></h3>
+        <div>
+

Suspendisse eu nisl. Nullam ut libero. Integer
dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos.

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

The icons used for the open and closed accordions can be any of the
standard icons in the css framework or even a custom css class you create
with an icon background image. For this example, we're using the arrow in a
circle icons:
+
+<pre>
+icons: {
+header: "ui-icon-circle-arrow-e",
+headerSelected: "ui-icon-circle-arrow-s"}
+</pre>
+
+</div>
+
+</body>
+</html>
Modified: trunk/demos/accordion/fillspace.html
==============================================================================
--- trunk/demos/accordion/fillspace.html    (original)
+++ trunk/demos/accordion/fillspace.html    Tue Dec 30 08:15:57 2008
@@ -69,7 +69,7 @@
<div class="demo-description">
-

In this example, the fillSpace option is used to make the accordion fit
within a specific height and/or width. The script will automatically set
the dimensions of the accordion sections and add scrollbars as needed.

In this example, the fillSpace option is used to make the accordion fit
within a specific height and/or width. The script will automatically set
the dimensions of the accordion to the height of the parent container.

<pre>fillSpace: true</pre>
</div>
Modified: trunk/demos/accordion/index.html
==============================================================================
--- trunk/demos/accordion/index.html    (original)
+++ trunk/demos/accordion/index.html    Tue Dec 30 08:15:57 2008
@@ -9,8 +9,10 @@
        <h4>Accordion</h4>
        <ul>
            <li class="demo-config-on"><a href="default.html">Basic accordion
(default)</a></li>
-            <li><a href="mouseover.html">Mouseover accordion</a></li>
+            <li><a href="mouseover.html">Mouseover event</a></li>
            <li><a href="fillspace.html">FillSpace example</a></li>
+            <li><a href="custom_icons.html">Custom icons</a></li>
+            <li><a href="collapsable.html">Collapsable</a></li>
        </ul>
    </div>
</body>
Modified: trunk/demos/accordion/mouseover.html
==============================================================================
--- trunk/demos/accordion/mouseover.html    (original)
+++ trunk/demos/accordion/mouseover.html    Tue Dec 30 08:15:57 2008
@@ -58,8 +58,7 @@
<div class="demo-description">
-

In this example, we've customized the event to have sections open on
mouseover instead of on click. This is done by simply adding this option to
the accordion:

-<pre>event: "mouseover"</pre>
+

In this example, we've customized the event to have sections open on
mouseover instead of on click. This is done by simply adding this option
event: "mouseover" to the accordion:

</div>