r3312 committed - button: static markup

r3312 committed - button: static markup


Revision: 3312
Author: joern.zaefferer
Date: Mon Sep 28 10:11:52 2009
Log: button: static markup
http://code.google.com/p/jquery-ui/source/detail?r=3312
Added:
/branches/dev/tests/static/button
/branches/dev/tests/static/button/default.html
=======================================
--- /dev/null
+++ /branches/dev/tests/static/button/default.html    Mon Sep 28 10:11:52 2009
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Button Visual push: Default</title>
+    <link rel="stylesheet" href="../static.css" type="text/css" />
+    <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+    <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+    <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+    <style>
+        #toolbar { margin-top: 2em; }
+        #toolbar span { margin-right: 1em }
+    </style>
+</head>
+<body>
+
+    <div>
+        No icon
+        <button class="ui-button ui-widget ui-state-default
ui-corner-all">Simple button, only text</button>
+        <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all">Secondary priority button</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all">Highlight button</button>
+        <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all">Error button</button>
+    </div>
+    <div>
+        No icon (hover)
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Simple button, only text</button>
+        <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all ui-state-hover">Secondary priority
button</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Highlight button</button>
+        <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Error button</button>
+    </div>
+    <div>
+        No icon (active)
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Simple button, only text</button>
+        <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all ui-state-active">Secondary priority
button</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Highlight button</button>
+        <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Error button</button>
+    </div>
+    <div>
+        No icon (disabled)
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled">Simple button, only text</button>
+        <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all ui-state-disabled">Secondary priority
button</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Highlight button</button>
+        <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Error button</button>
+    </div>
+    <div>
+        With icon
+        <button class="ui-button ui-widget ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-locked"></span> Button with icon on the left</button>
+        <button class="ui-button ui-widget ui-state-default
ui-corner-all">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
+        <button class="ui-button ui-widget ui-state-default
ui-corner-all">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div>
+        With icon, highlight
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div>
+        With icon (hover)
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div>
+        With icon, highlight (hover)
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover"><span class="ui-icon ui-icon-locked"></span>
Button with icon on the left</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Button with icon on the right<span
class="ui-icon ui-icon-scissors"></span></button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div>
+        With icon (active)
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div>
+        With icon, highlight (active)
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active"><span class="ui-icon ui-icon-locked"></span>
Button with icon on the left</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Button with icon on the right<span
class="ui-icon ui-icon-scissors"></span></button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div>
+        With icon (disabled)
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div>
+        With icon, highlight (disabled)
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled"><span class="ui-icon
ui-icon-locked"></span> Button with icon on the left</button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Button with icon on the right<span
class="ui-icon ui-icon-scissors"></span></button>
+        <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+    </div>
+    <div class="ui-button-set">
+        Set
+        <button class="ui-button ui-widget ui-state-default
ui-corner-left">Simple button, only text</button>
+        <button class="ui-button ui-widget ui-state-default">Simple button, only
text</button>
+        <button class="ui-button ui-widget ui-state-default
ui-corner-right">Simple button, only text</button>
+    </div>
+    <div class="ui-button-set">
+        Set (hover)
+        <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-hover">Simple button, only text</button>
+        <button class="ui-button ui-widget ui-state-default
ui-state-hover">Simple button, only text</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-hover">Simple button, only text</button>
+    </div>
+    <div class="ui-button-set">
+        Set (active)
+        <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active">Simple button, only text</button>
+        <button class="ui-button ui-widget ui-state-default
ui-state-active">Simple button, only text</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-active">Simple button, only text</button>
+    </div>
+    <div class="ui-button-set">
+        Set (disabled)
+        <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-disabled">Simple button, only text</button>
+        <button class="ui-button ui-widget ui-state-default
ui-state-disabled">Simple button, only text</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-disabled">Simple button, only text</button>
+    </div>
+
+    <div class="ui-widget-header ui-corner-all ui-helper-clearfix"
id="toolbar">
+        <button class="ui-button ui-widget ui-state-default
ui-corner-all">Toolbar</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Toolbar</button>
+        <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Toolbar</button>
+        <span>
+            <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-folder-open"/></button>
+            <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-disk"/></button>
+            <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-trash"/></button>
+        </span>
+        <span class="ui-button-set">
+            <input type="checkbox" id="check1" style="display: none;"/><button
class="ui-button ui-widget ui-state-default
ui-corner-left">B</button><label for="check1" style="display:
none;">B</label>
+            <input type="checkbox" id="check2" style="display: none;"/><button
class="ui-button ui-widget ui-state-default">I</button><label for="check2"
style="display: none;">I</label>
+            <input type="checkbox" id="check3" style="display: none;"/><button
class="ui-button ui-widget ui-state-default
ui-corner-right">U</button><label for="check3" style="display:
none;">U</label>
+        </span>
+        <span>
+            <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-print"/></button>
+            <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-mail-closed"/></button>
+        </span>
+        <span id="mode" class="ui-button-set">
+            <input type="radio" name="radio" id="mode1" style="display:
none;"/><button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active">Edit</button><label for="mode1" style="display:
none;">Edit</label>
+            <input type="radio" name="radio" id="mode2" style="display:
none;"/><button class="ui-button ui-widget ui-state-default
ui-corner-right">View</button><label for="mode2" style="display:
none;">View</label>
+        </span>
+    </div>
+
+<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+<script>
+    $('<div/>').css({
+        position: "absolute",
+        right: 10,
+        top: 10
+    }).appendTo(document.body).themeswitcher();
+</script>
+</body>
+</html>