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>
+<pre><code>icons: {
+ header: "ui-icon-circle-arrow-e",
+ headerSelected: "ui-icon-circle-arrow-s"
+}
+</code></pre>
</div><!-- End demo-description -->
Modified: trunk/demos/accordion/fillspace.html
==============================================================================
--- trunk/demos/accordion/fillspace.html (original)
+++ trunk/demos/accordion/fillspace.html Tue Dec 30 21:01:58 2008
@@ -75,7 +75,8 @@
<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 to the height of the parent container. Try
re-sizing the outer box to see the accordion fill the height of the box.
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: <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:
This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with
the 'x' icon.
Sed vel diam id libero <a href="http://example.com">rutrum
convallis</a>. 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.
Sed vel diam id libero <a href="http://example.com">rutrum
convallis</a>. 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.
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
Sed vel diam id libero <a href="http://example.com">rutrum
convallis</a>. 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.
Sed vel diam id libero <a href="http://example.com">rutrum
convallis</a>. 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.
This is a default dialog which opens in a floating layer above the page
content protected with an iframe. It is created by simply calling .dialog
on the ID of the content like this: <pre>$("#dialog").dialog();</pre>
A basic dialog window has a title bar and a content area. If the
content length exceeds the size of the window, a scrollbar will
automatically appear. The dialog window can be moved, resized and closed
with the 'x' icon by default.
+This is a default dialog which opens in a floating layer above the page
content protected with an iframe.
+It is created by simply calling .dialog on the dialog content element,
like this:
+
+A basic dialog window has a title bar and a content area.
+If the content length exceeds the maximum height (maxHeight option), a
scrollbar will automatically appear.
+The dialog window can be moved, resized and closed with the 'x' icon by
default.
+
Your age:
The default slider has a single handle and is horizontal. The handle
can be moved with the mouse or by using the arrow keys and has full ARIA
attributes for accessibility. The current value for the slider can be set
with the value option:
+The default slider has a single handle and is horizontal.
+The handle can be moved with the mouse or by using the arrow keys and has
full ARIA attributes for accessibility.
+
This example shows how easy it is to add multiple sliders to a page,
each with their own options, to make a UI for a music player.
+This example shows how easy it is to add multiple sliders to a page, each
with their own options, to make a UI for a music player.
+
Example of a range slider that had two drag handles and a filled bar
that connects the two handles to indicate that the values between them are
selected. This is created by setting the range option:
Target sales goal (Millions):
+<label for="amount">Target sales goal (Millions):</label>
+<input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;" />
+
This is an example of a vertical range slider created by setting the
orientation to vertical:
+This is an example of a vertical range slider created by setting the
orientation to vertical:
+
It's important to note that a vertical slider needs a height set. You
can do this via .height() or by setting the height through CSS.
+It's important to note that a vertical slider needs a height set.
+You can do this via <code>.height()</code> or by setting the height
through CSS.
+
+This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
+
Minimum number of bedrooms: <input type="text" id="amount"
style="border:0; color:#f6931f; font-weight:bold;"/>
+<labe for="amount">Minimum number of bedrooms:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;" />
+
An example of a range slider that has the filled bar hard-coded to the
maximum value plus a single slider. This makes it clear that selecting a
value will also include all values above the selection. This is a range
option type:
This demo also shows how the current slider value can be used to
populate a standard form input that can also be used for user feedback.
+An example of a range slider that has the filled bar hard-coded to the
maximum value plus a single slider.
+This makes it clear that selecting a value will also include all values
above the selection.
+This is a range option type:
+
+This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
+
Maximum price: <input type="text" id="amount" style="border:0;
color:#f6931f; font-weight:bold;"/>
+<label for="amount">Maximum price:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;" />
+
An example of a range slider that has the filled bar hard-coded to the
minimum value plus a single slider. This makes it clear that selecting a
value will also include all values below the selection. This is a range
option type:
This demo also shows how the current slider value can be used to
populate a standard form input that can also be used for user feedback.
+An example of a range slider that has the filled bar hard-coded to the
minimum value plus a single slider.
+This makes it clear that selecting a value will also include all values
below the selection.
+This is a range option type:
+
+This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
+
Volume: <input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;"/>
+<label for="amount">Volume:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;"/>
+
This is an example of a minimum range vertical slider created by
setting the orientation to vertical:
It's important to note that a vertical slider needs a height set. You
can do this via the script options or by adding a height through CSS.
This demo also shows how the current slider value can be used to
populate a standard form input that can also be used for user feedback.
+This is an example of a minimum range vertical slider created by setting
the orientation to vertical:
+
+It's important to note that a vertical slider needs a height set.
+You can do this via <code>.height()</code> or by setting the height
through CSS.
+
+This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
+
Donation amount ($50 increments): <input type="text" id="amount"
style="border:0; color:#f6931f; font-weight:bold;"/>
+<label for="amount">Donation amount ($50 increments):</label>
+<input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;"/>
+
+This slider has a step value set that will only allow for increments of 50
to be selected.
+The default step increment is 1.
+The drag handle will snap to drop points every 50 units.
+This is set in an option called step:
+
+This demo also shows how the current slider value can be used to populate
a standard form input that can also be used for user feedback.
+
This slider has a step value set that will only allow for increments of
50 to be selected. The default step increment is 1. The drag handle will
snap to drop points every 50 units. This is set in an option called
step:
This demo also shows how the current slider value can be used to
populate a standard form input that can also be used for user feedback.
This example allows the tab strip to be toggled closed by setting the
delectable option to true like this: <pre>deselectable: true</pre>
+This example allows the tab strip to be toggled closed by setting the
delectable option to true like this:
+
This example changes the default swap event from a click to mouseover
by changing the event option: <pre>event: 'mouseover'</pre>
+This example changes the default swap event from a click to mouseover by
changing the event option:
+