[jquery-ui] r3596 committed - button: first draft for demos

0 views
Skip to first unread message

codesite...@google.com

unread,
Jan 3, 2010, 8:06:04 AM1/3/10
to jquery...@googlegroups.com
Revision: 3596
Author: joern.zaefferer
Date: Sun Jan 3 05:04:03 2010
Log: button: first draft for demos
http://code.google.com/p/jquery-ui/source/detail?r=3596

Added:
/branches/dev/demos/button
/branches/dev/demos/button/checkbox.html
/branches/dev/demos/button/default.html
/branches/dev/demos/button/index.html
/branches/dev/demos/button/radio.html
Modified:
/branches/dev/demos/index.html

=======================================
--- /dev/null
+++ /branches/dev/demos/button/checkbox.html Sun Jan 3 05:04:03 2010
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Checkboxes 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="../../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() {
+ $("#check").button();
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <input type="checkbox" id="check" /><label for="check">Toggle</label>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>TODO</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/demos/button/default.html Sun Jan 3 05:04:03 2010
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Default 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="../../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>Button Label</button>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>TODO</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/demos/button/index.html Sun Jan 3 05:04:03 2010
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <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>
+ </ul>
+</div>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/demos/button/radio.html Sun Jan 3 05:04:03 2010
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button - Radio Buttons 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="../../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() {
+ $("#radio1").buttonset();
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+ <form>
+ <div id="radio1" style="margin-top: 2em;">
+ <input type="radio" id="radio11" name="radio" /><label
for="radio11">Choice 1</label>
+ <input type="radio" id="radio12" name="radio" checked="checked"
/><label for="radio12">Choice 2</label>
+ <input type="radio" id="radio13" name="radio" /><label
for="radio13">Choice 3</label>
+ </div>
+ </form>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>TODO</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
=======================================
--- /branches/dev/demos/index.html Tue Dec 22 13:11:49 2009
+++ /branches/dev/demos/index.html Sun Jan 3 05:04:03 2010
@@ -259,6 +259,7 @@
<dt>Widgets</dt>
<dd><a href="accordion/index.html">Accordion</a></dd>
<dd><a href="autocomplete/index.html">Autocomplete</a></dd>
+ <dd><a href="button/index.html">Button</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd>
<dd><a href="dialog/index.html">Dialog</a></dd>
<dd><a href="progressbar/index.html">Progressbar</a></dd>

Todd Parker

unread,
Jan 3, 2010, 3:25:53 PM1/3/10
to jquery...@googlegroups.com
This is a good start. I'd like to suggest a few demo page ideas...

- default page with individual standard buttons made from a range of different markup types - input, button, link, etc. 

- icon examples that show all the different icon configurations (primary, secondary, both, icon only, icon + arrow, etc.)

- button group: series of groups made from a range of markup types

- checkbox: individual buttons and a button set example

- radio: button set example (like you have)

- toolbar: like our visual test page with all different types and groupings on a container, could show a few different toolbars that mimic real-work situations (word processor formatting, app open/save/delete toolbar, etc.)

Think that would cover most of what this does, which is a lot!

_t


--

You received this message because you are subscribed to the Google Groups "jQuery UI Development" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to jquery-ui-de...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jquery-ui-dev?hl=en.





todd.parker  .: .   filament group inc.  
102 south street #3 boston, ma 02111  

phone + 617.482.7120 
fax     + 617.687.0212
web     + filamentgroup.com


Jörn Zaefferer

unread,
Jan 4, 2010, 11:00:04 AM1/4/10
to jquery-ui-dev
Added an icons demo and extended the default and checkbox demos. Toolbar is also present, with a mix of buttons. buttonset seems to be well covered by those.

Jörn

Jörn Zaefferer

unread,
Jan 4, 2010, 11:09:38 AM1/4/10
to jquery-ui-dev
Also added a splitbutton demo to replicate the one visual design of the wiki page: http://jquery-ui.googlecode.com/svn/branches/dev/demos/button/splitbutton.html

Jörn

2010/1/4 Jörn Zaefferer <joern.z...@googlemail.com>

Todd Parker

unread,
Jan 4, 2010, 11:12:29 AM1/4/10
to jquery...@googlegroups.com
Very cool. Ideally, we'd get rid of the doubled up borders between the two buttons but this looks nice. Just need to get that menu plugin done now.

_t



todd.parker  .: .   filament group inc.  
102 south street #3 boston, ma 02111  

phone + 617.482.7120 
fax     + 617.687.0212
web     + filamentgroup.com


Reply all
Reply to author
Forward
0 new messages