Skip to content

Commit

Permalink
demos: added <code> inside <pre>. some other minor updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@rdworth
rdworth committed Dec 31, 2008
1 parent fff23b3 commit 58a11a7
Show file tree
Hide file tree
Showing 14 changed files with 160 additions and 89 deletions.
10 changes: 5 additions & 5 deletions demos/accordion/custom_icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@ <h3><a href="#">Section 4</a></h3>

<p>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 -->

Expand Down
3 changes: 2 additions & 1 deletion demos/accordion/fillspace.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ <h3><a href="#">Section 4</a></h3>
<div class="demo-description">

<p>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.</p>
<pre>fillSpace: true</pre>
<pre><code>fillSpace: true
</code></pre>

</div><!-- End demo-description -->

Expand Down
4 changes: 3 additions & 1 deletion demos/accordion/mouseover.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@ <h3><a href="#">Section 4</a></h3>

<div class="demo-description">

<p>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></p>
<p>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:</p>
<pre><code>event: "mouseover"
</code></pre>

</div><!-- End demo-description -->

Expand Down
50 changes: 29 additions & 21 deletions demos/dialog/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,36 +19,44 @@

<div class="demo">

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>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.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
<p>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.</p>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>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.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
<p>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.</p>
</div><!-- End sample page content -->

</div><!-- End demo -->

<div class="demo-description">

<p>
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:
</p>

<div class="demo-description">
<pre><code>$("#dialog").dialog();
</code></pre>

<p>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></p>
<p>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. </p>
<p>
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.
</p>

</div><!-- End demo-description -->


</body>
</html>
11 changes: 5 additions & 6 deletions demos/slider/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,24 @@
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider({
value: 37
});
$("#slider").slider();
});
</script>
</head>
<body>

<div class="demo">

<p>Your age:</p>
<div id="slider"></div>

</div><!-- End demo -->

<div class="demo-description">

<p>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:</p>
<pre>value: 37</pre>
<p>
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.
</p>

</div><!-- End demo-description -->

Expand Down
5 changes: 4 additions & 1 deletion demos/slider/multiple_vertical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Graphic EQ
</p>

<div id="slider1" style="height:120px; float:left; margin:15px"></div>
<div id="slider2" style="height:120px; float:left; margin:15px"></div>
<div id="slider3" style="height:120px; float:left; margin:15px"></div>
Expand All @@ -78,7 +79,9 @@

<div class="demo-description" style="clear:left;">

<p>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.</p>
<p>
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.
</p>

</div><!-- End demo-description -->

Expand Down
5 changes: 2 additions & 3 deletions demos/slider/range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,8 @@
<div class="demo-description">

<p>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:</p>
<pre>
range: true
</pre>
<pre><code>range: true
</code></pre>

</div><!-- End demo-description -->

Expand Down
34 changes: 25 additions & 9 deletions demos/slider/range_vertical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,47 @@
$("#slider-range").slider({
orientation: "vertical",
range: true,
values: [45, 67]
values: [17, 67],
slide: function(event, ui) {
$("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
}
});
$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>

<div class="demo">

<p>Target sales goal (Millions):</p>
<p>
<label for="amount">Target sales goal (Millions):</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range" style="height:250px;"></div>

</div><!-- End demo -->



<div class="demo-description">

<p>This is an example of a vertical range slider created by setting the orientation to vertical:</p>
<pre>
orientation: "vertical",
<p>
This is an example of a vertical range slider created by setting the orientation to vertical:
</p>

<pre><code>orientation: "vertical",
range: true,
values: [17, 67]
</pre>
<p>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. </p>
</code></pre>

<p>
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.
</p>

<p>
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.
</p>

</div><!-- End demo-description -->

Expand Down
26 changes: 17 additions & 9 deletions demos/slider/rangemax.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
$(function() {
$("#slider-range-max").slider({
range: "max",
min:1,
max:10,
min: 1,
max: 10,
value: 2,
slide: function(event, ui) {
$("#amount").val(ui.value);
Expand All @@ -26,20 +26,28 @@

<div class="demo">

<p>Minimum number of bedrooms: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p>
<p>
<labe for="amount">Minimum number of bedrooms:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range-max"></div>

</div><!-- End demo -->

<div class="demo-description">

<p>
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:
</p>

<div class="demo-description">
<pre><code>range: "max"
</code></pre>

<p>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:</p>
<pre>
range: "max",
</pre>
<p>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.</p>
<p>
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.
</p>

</div><!-- End demo-description -->

Expand Down
28 changes: 18 additions & 10 deletions demos/slider/rangemin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
$("#slider-range-min").slider({
range: "min",
value: 37,
min:1,
max:700,
min: 1,
max: 700,
slide: function(event, ui) {
$("#amount").val('$' + ui.value);
}
Expand All @@ -26,23 +26,31 @@

<div class="demo">

<p>Maximum price: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p>
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range-min"></div>

</div><!-- End demo -->

<div class="demo-description">

<p>
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:
</p>

<div class="demo-description">
<pre><code>range: "min"
</code></pre>

<p>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:</p>
<pre>
range: "min",
</pre>
<p>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.</p>
<p>
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.
</p>

</div><!-- End demo-description -->


</body>
</html>
24 changes: 18 additions & 6 deletions demos/slider/slider_vertical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,34 @@
</head>
<body>


<div class="demo">

<p>Volume: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p>
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
</p>

<div id="slider-vertical" style="height:200px;"></div>

</div><!-- End demo -->

<div class="demo-description">

<p>
This is an example of a minimum range vertical slider created by setting the orientation to vertical:
</p>

<div class="demo-description">
<pre><code>orientation: "vertical"
</code></pre>

<p>This is an example of a minimum range vertical slider created by setting the orientation to vertical:</p> <pre>orientation: "vertical",</pre>
<p>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. </p>
<p>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.</p>
<p>
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.
</p>

<p>
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.
</p>

</div><!-- End demo-description -->

Expand Down
Loading

0 comments on commit 58a11a7

Please sign in to comment.