source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/tests/visual/button/default.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

Oran code for supporting format changes to document.
  • Property svn:executable set to *
File size: 5.5 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>Button Visual push: Default</title>
5 <link rel="stylesheet" href="../visual.css" type="text/css" />
6 <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
7 <style type="text/css">
8 #toolbar { margin-top: 2em; padding:0.2em; }
9 #ops1, #ops2, #format, #mode { margin-right: 1em }
10 </style>
11 <script type="text/javascript" src="../../../jquery-1.4.1.js"></script>
12 <script type="text/javascript" src="../../../external/jquery.metadata.js"></script>
13 <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
14 <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
15 <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
16 <script type="text/javascript">
17 $(function() {
18 var buttons = $('#push button, #check').button();
19 var buttonSets = $('#radio0, #radio1, #radio2, #ops1, #format, #ops2, #mode, #inputs, #anchors').buttonset();
20
21 buttons.add(buttonSets).click(function(event) {
22 var target = $(event.target);
23 if (target.closest('.ui-button:not(.ui-state-disabled)').length) {
24 $("<div></div>")
25 .text("Clicked " + (target.text() || target.val()))
26 .appendTo("#log");
27 window.console && console.log(this, arguments);
28 }
29 });
30
31 $("#disable-widgets").toggle(function() {
32 buttons.button("disable");
33 buttonSets.buttonset("disable");
34 }, function() {
35 buttons.button("enable");
36 buttonSets.buttonset("enable");
37 });
38 $("#toggle-widgets").toggle(function() {
39 buttons.button();
40 buttonSets.buttonset();
41 }, function() {
42 buttons.button("destroy");
43 buttonSets.buttonset("destroy");
44 }).click();
45 });
46 </script>
47</head>
48<body>
49
50<div id="push">
51 <div>
52 No icon
53 <button>Simple button, only text</button>
54 <button class="ui-priority-secondary">Secondary priority button</button>
55 </div>
56 <br/>
57 <div>
58 With icon
59 <button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
60 <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
61 <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
62 <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
63 </div>
64</div>
65
66<div id="toggle" style="margin-top: 2em;">
67 <input type="checkbox" id="check" /><label for="check">Toggle</label>
68</div>
69
70<div id="radio0" style="margin-top: 2em;">
71 <input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label>
72 <input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label>
73 <input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label>
74</div>
75<form>
76 <div id="radio1" style="margin-top: 2em;">
77 <input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label>
78 <input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label>
79 <input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label>
80 </div>
81</form>
82<form>
83 <div id="radio2" style="margin-top: 2em;">
84 <input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label>
85 <input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label>
86 <input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label>
87 </div>
88</form>
89
90<div id="toolbar" class="ui-widget-header ui-corner-all ui-helper-clearfix">
91 <span id="ops1">
92 <button class="{button:{icons:{primary:'ui-icon-folder-open'},text:false}}">Open</button>
93 <button class="{button:{icons:{primary:'ui-icon-disk'},text:false}}">Save</button>
94 <button class="{button:{icons:{primary:'ui-icon-trash'},text:false}}">Delete</button>
95 </span>
96 <span id="format">
97 <input type="checkbox" id="check1" /><label for="check1">B</label>
98 <input type="checkbox" id="check2" /><label for="check2">I</label>
99 <input type="checkbox" id="check3" /><label for="check3">U</label>
100 </span>
101 <span id="ops2">
102 <button class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Print...</button>
103 <button class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Mail to...</button>
104 </span>
105 <span id="mode">
106 <input type="radio" id="mode1" name="radio2" checked="checked" /><label for="mode1">Edit</label>
107 <input type="radio" id="mode2" name="radio2" /><label for="mode2">View</label>
108 </span>
109</div>
110
111<div id="inputs" style="margin-top: 2em;">
112 <input type="submit" value="Submit button" />
113 <input type="reset" value="Reset button" class="{button:{label:'Custom reset'}}" />
114</div>
115
116<div id="anchors" style="margin-top: 2em;">
117 <a href="#">Anchor 1</a>
118 <a href="#" class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Anchor 2</a>
119 <a href="#" class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Anchor 3</a>
120 <a href="#">Anchor 4</a>
121</div>
122
123<div style="margin-top: 2em;">
124 <button id="disable-widgets">Toggle disabled</button>
125 <button id="toggle-widgets">Toggle widget</button>
126</div>
127<div id="log"></div>
128
129<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
130<script type="text/javascript">
131 $.fn.themeswitcher && $('<div></div>').css({
132 position: "absolute",
133 right: 10,
134 top: 10
135 }).appendTo(document.body).themeswitcher();
136</script>
137</body>
138</html>
Note: See TracBrowser for help on using the repository browser.