r3610 committed - button: icons demo, descriptions, extended default and checkbox demos
Revision: 3610
Author: joern.zaefferer
Date: Mon Jan 4 07:57:26 2010
Log: button: icons demo, descriptions, extended default and checkbox demos
http://code.google.com/p/jquery-ui/source/detail?r=3610
Added:
/branches/dev/demos/button/icons.html
Modified:
/branches/dev/demos/button/checkbox.html
/branches/dev/demos/button/default.html
/branches/dev/demos/button/index.html
/branches/dev/demos/button/radio.html
/branches/dev/demos/button/toolbar.html
=======================================
--- /dev/null
+++ /branches/dev/demos/button/icons.html Mon Jan 4 07:57:26 2010
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Icons demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../external/jquery.metadata.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript"
src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript"
src="../../ui/jquery.ui.button.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("button").button();
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <button
class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with
icon only</button>
+ <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with
icon on the left</button>
+ <button
class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button
with two icons</button>
+ <button
class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button
with two icons and no text</button>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+Some buttons with various combinations of text and icons, here
specified via metadata.
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
=======================================
--- /branches/dev/demos/button/checkbox.html Sun Jan 3 05:04:03 2010
+++ /branches/dev/demos/button/checkbox.html Mon Jan 4 07:57:26 2010
@@ -11,10 +11,11 @@
<script type="text/javascript">
$(function() {
$("#check").button();
+ $("#format").buttonset();
});
</script>
<style>
-
+ #format { margin-top: 2em; }
</style>
</head>
<body>
@@ -22,6 +23,12 @@
<div class="demo">
<input type="checkbox" id="check" /><label for="check">Toggle</label>
+
+ <div id="format">
+ <input type="checkbox" id="check1" /><label for="check1">B</label>
+ <input type="checkbox" id="check2" /><label for="check2">I</label>
+ <input type="checkbox" id="check3" /><label for="check3">U</label>
+ </div>
</div><!-- End demo -->
=======================================
--- /branches/dev/demos/button/default.html Sun Jan 3 05:04:03 2010
+++ /branches/dev/demos/button/default.html Mon Jan 4 07:57:26 2010
@@ -10,7 +10,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("button").button();
+ $("button, input:submit, a").button();
});
</script>
<style>
@@ -21,7 +21,11 @@
<div class="demo">
- <button>Button Label</button>
+ <button>A button element</button>
+
+ <input type="submit" value="A submit button">
+
+ <a href="#">An anchor</a>
</div><!-- End demo -->
@@ -29,7 +33,7 @@
<div class="demo-description">
-TODO
+Examples of the markup that can be used for buttons: A button element,
an input of type submit and an anchor.
</div><!-- End demo-description -->
=======================================
--- /branches/dev/demos/button/index.html Sun Jan 3 18:23:58 2010
+++ /branches/dev/demos/button/index.html Mon Jan 4 07:57:26 2010
@@ -12,6 +12,7 @@
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
<li><a href="radio.html">Radios</a></li>
<li><a href="checkbox.html">Checkboxes</a></li>
+ <li><a href="icons.html">Icons</a></li>
<li><a href="toolbar.html">Toolbar</a></li>
</ul>
</div>
=======================================
--- /branches/dev/demos/button/radio.html Mon Jan 4 02:50:31 2010
+++ /branches/dev/demos/button/radio.html Mon Jan 4 07:57:26 2010
@@ -35,7 +35,7 @@
<div class="demo-description">
-TODO
+A set of three radio buttons transformed into a button set.
</div><!-- End demo-description -->
=======================================
--- /branches/dev/demos/button/toolbar.html Mon Jan 4 07:40:12 2010
+++ /branches/dev/demos/button/toolbar.html Mon Jan 4 07:57:26 2010
@@ -110,7 +110,10 @@
<div class="demo-description">
-TODO
+
+ A mediaplayer toolbar. Take a look at the underlying markup: A few button
elements,
+ an input of type checkbox for the Shuffle button, and three inputs of
type radio for the Repeat options.
+
</div><!-- End demo-description -->
--