1 | <!DOCTYPE html>
|
---|
2 | <html lang="en">
|
---|
3 | <head>
|
---|
4 | <title>Button Static Test : Default</title>
|
---|
5 | <link rel="stylesheet" href="../static.css" type="text/css" />
|
---|
6 | <link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
|
---|
7 | <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
|
---|
8 | <script type="text/javascript" src="../../../jquery-1.4.1.js"></script>
|
---|
9 | <script type="text/javascript" src="../static.js"></script>
|
---|
10 | <style>
|
---|
11 | div { margin: 0 0 1em; }
|
---|
12 | h2 { margin: 2em 0 1em; }
|
---|
13 | </style>
|
---|
14 | </head>
|
---|
15 | <body>
|
---|
16 |
|
---|
17 | <h2>Using button elements</h2>
|
---|
18 |
|
---|
19 | <div>
|
---|
20 | <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
|
---|
21 | <span class="ui-button-text">Button</span>
|
---|
22 | </button>
|
---|
23 |
|
---|
24 | <button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
|
---|
25 | <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
|
---|
26 | <span class="ui-button-text">Button</span>
|
---|
27 | </button>
|
---|
28 |
|
---|
29 | <button class="ui-button ui-button-text-icon ui-widget ui-state-default ui-corner-all">
|
---|
30 | <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
|
---|
31 | <span class="ui-button-text">Button</span>
|
---|
32 | </button>
|
---|
33 |
|
---|
34 | <button class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
|
---|
35 | <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
|
---|
36 | <span class="ui-button-text">Button</span>
|
---|
37 | <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
|
---|
38 | </button>
|
---|
39 |
|
---|
40 | <button class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
|
---|
41 | <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
|
---|
42 | <span class="ui-button-text">Button</span>
|
---|
43 | <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
|
---|
44 | </button>
|
---|
45 | </div>
|
---|
46 |
|
---|
47 | <h2>Using anchor elements</h2>
|
---|
48 |
|
---|
49 | <div>
|
---|
50 | <a href="#" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
|
---|
51 | <span class="ui-button-text">Button</span>
|
---|
52 | </a>
|
---|
53 |
|
---|
54 | <a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
|
---|
55 | <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
|
---|
56 | <span class="ui-button-text">Button</span>
|
---|
57 | </a>
|
---|
58 |
|
---|
59 | <a href="#" class="ui-button ui-button-text-icon ui-widget ui-state-default ui-corner-all">
|
---|
60 | <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
|
---|
61 | <span class="ui-button-text">Button</span>
|
---|
62 | </a>
|
---|
63 |
|
---|
64 | <a href="#" class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
|
---|
65 | <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
|
---|
66 | <span class="ui-button-text">Button</span>
|
---|
67 | <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
|
---|
68 | </a>
|
---|
69 |
|
---|
70 | <a href="#" class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
|
---|
71 | <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
|
---|
72 | <span class="ui-button-text">Button</span>
|
---|
73 | <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
|
---|
74 | </a>
|
---|
75 | </div>
|
---|
76 |
|
---|
77 |
|
---|
78 |
|
---|
79 | <h2>Using label elements (used when proxying to radio or check inputs)</h2>
|
---|
80 |
|
---|
81 | <div>
|
---|
82 | <label class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
|
---|
83 | <span class="ui-button-text">Button</span>
|
---|
84 | </label>
|
---|
85 |
|
---|
86 | <label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
|
---|
87 | <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
|
---|
88 | <span class="ui-button-text">Button</span>
|
---|
89 | </label>
|
---|
90 |
|
---|
91 | <label class="ui-button ui-button-text-icon ui-widget ui-state-default ui-corner-all">
|
---|
92 | <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
|
---|
93 | <span class="ui-button-text">Button</span>
|
---|
94 | </label>
|
---|
95 |
|
---|
96 | <label class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
|
---|
97 | <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
|
---|
98 | <span class="ui-button-text">Button</span>
|
---|
99 | <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
|
---|
100 | </label>
|
---|
101 |
|
---|
102 | <label class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
|
---|
103 | <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
|
---|
104 | <span class="ui-button-text">Button</span>
|
---|
105 | <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
|
---|
106 | </label>
|
---|
107 | </div>
|
---|
108 |
|
---|
109 |
|
---|
110 | <h2>Button Sets</h2>
|
---|
111 |
|
---|
112 | <div class="ui-button-set">
|
---|
113 | <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-left"><span class="ui-button-text">Simple button</span></button>
|
---|
114 | <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Simple button</span></button>
|
---|
115 | <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-right"><span class="ui-button-text">Simple button</span></button>
|
---|
116 | </div>
|
---|
117 |
|
---|
118 |
|
---|
119 |
|
---|
120 | <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
|
---|
121 | <script>
|
---|
122 | $('<div/>').css({
|
---|
123 | position: "absolute",
|
---|
124 | right: 10,
|
---|
125 | top: 10
|
---|
126 | }).appendTo(document.body).themeswitcher();
|
---|
127 | </script>
|
---|
128 | </body>
|
---|
129 | </html>
|
---|