Ticket #5589: default.html

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