[jquery-ui] r3605 committed - Button: added toolbar demo.

codesite...@google.com

unread,

Jan 3, 2010, 9:24:18 PM1/3/10

to jquery...@googlegroups.com

Revision: 3605
Author: scott.gonzalez
Date: Sun Jan 3 18:23:58 2010
Log: Button: added toolbar demo.
http://code.google.com/p/jquery-ui/source/detail?r=3605

Added:
/branches/dev/demos/button/toolbar.html
Modified:
/branches/dev/demos/button/index.html

=======================================
--- /dev/null
+++ /branches/dev/demos/button/toolbar.html Sun Jan 3 18:23:58 2010
@@ -0,0 +1,102 @@
+<!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" />
+ <style type="text/css">
+ #toolbar {
+ padding: 10px 4px;
+ }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $('#beginning').button({
+ text: false,
+ icons: {
+ primary: 'ui-icon-seek-first'
+ }
+ });
+ $('#rewind').button({
+ text: false,
+ icons: {
+ primary: 'ui-icon-seek-prev'
+ }
+ });
+ $('#play').button({
+ text: false,
+ icons: {
+ primary: 'ui-icon-play'
+ }
+ })
+ .click(function() {
+ var options;
+ if ($(this).text() == 'play') {
+ options = {
+ label: 'pause',
+ icons: {
+ primary: 'ui-icon-pause'
+ }
+ };
+ } else {
+ options = {
+ label: 'play',
+ icons: {
+ primary: 'ui-icon-play'
+ }
+ };
+ }
+ $(this).button('option', options);
+ });
+ $('#stop').button({
+ text: false,
+ icons: {
+ primary: 'ui-icon-stop'
+ }
+ });
+ $('#forward').button({
+ text: false,
+ icons: {
+ primary: 'ui-icon-seek-next'
+ }
+ });
+ $('#end').button({
+ text: false,
+ icons: {
+ primary: 'ui-icon-seek-end'
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+ <span id="toolbar" class="ui-widget-header ui-corner-all">
+ <button id="beginning">go to beginning</button>
+ <button id="rewind">rewind</button>
+ <button id="play">play</button>
+ <button id="stop">stop</button>
+ <button id="forward">fast forward</button>
+ <button id="end">go to end</button>
+ </span>
+
+</div>
+
+
+
+<div class="demo-description">
+
+<p>TODO</p>
+
+</div>
+
+
+
+</body>
+</html>
=======================================
--- /branches/dev/demos/button/index.html Sun Jan 3 05:04:03 2010
+++ /branches/dev/demos/button/index.html Sun Jan 3 18:23:58 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="toolbar.html">Toolbar</a></li>
</ul>
</div>

Scott González

unread,

Jan 3, 2010, 9:26:11 PM1/3/10

to jquery...@googlegroups.com

While implementing this, I noticed two things related to CSS:

1) I had to add padding to the wrapper span to make it tall enough to contain the buttons.

2) We have some inconsistent icon names, e.g., ui-icon-seek-first and ui-icon-seek-end (should be first/last or start/end).

--

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

unread,

Jan 4, 2010, 10:04:08 AM1/4/10

to jquery...@googlegroups.com

While implementing this, I noticed two things related to CSS:

1) I had to add padding to the wrapper span to make it tall enough to contain the buttons.

[TP] That makes sense. We should style the buttons to work well with the various icon spans, then remove them and ensure that the height and padding looks consistent without. You probably had to do some fiddling to make it work but the goal would be to have buttons that look the same height regardless of the underlying markup and icons used (might be hard to get this to happen 100%).

2) We have some inconsistent icon names, e.g., ui-icon-seek-first and ui-icon-seek-end (should be first/last or start/end).

[TP] Ummm, yeah we might have made a few mistakes with naming all those icons. You could assign a correct name in addition to the legacy one in the CSS so we don't break the icon for people already using it. I say fix 'em when you see 'em.

Jörn Zaefferer

unread,

Jan 4, 2010, 10:43:09 AM1/4/10

to jquery-ui-dev

I think Scott was referring to the padding of the toolbar-element, while it sounds like Todd is referring to the button-element. The buttons themselve seem to work fine...

I've added ui-icon-seek-start as a replacement for ui-icon-seek-first.

Jörn