jQuery 入门教程(26): jQuery UI Button示例（一）

jQuery Button 组件可以增强表单（Form)中的Buttons，Inputs和Anchor元素，使其具有按钮显示风格，能够正确对鼠标滑动做出反应。
基本用法
下例显示把表单中的button,input和anchor元素都变为按钮风格的jQuery Button组件。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9     <script>
10         $(function () {
11             $("input[type=submit], a, button")
12               .button()
13               .click(function (event) {
14                   event.preventDefault();
15               });
16         });
17     </script>
18 </head>
19 <body>
20  
21     <button>A button element</button>
22  
23     <input type="submit" value="A submit button" />
24  
25     <a href="#">An anchor</a>
26  
27 </body>
28 </html>


20130316006

checkboxes
除了支持基本的按钮外，jQuery Button组件可以把类型为checkbox的input元素变为按钮，这种按钮可以有两种状态，原态和按下状态。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9     <script>
10         $(function () {
11             $("input[type=submit], a, button")
12               .button()
13               .click(function (event) {
14                   event.preventDefault();
15               });
16         });
17     </script>
18 </head>
19 <body>
20     <button>A button element</button>
21     <input type="submit" value="A submit button" />
22     <a href="#">An anchor</a>
23 </body>
24 </html>

20130316007

显示图标
按钮也可以添加图标，可以支持多个图标，分别使用primary和secondary来指明。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9     <script>
10         $(function () {
11             $("button:first").button({
12                 icons: {
13                     primary: "ui-icon-locked"
14                 },
15                 text: false
16             }).next().button({
17                 icons: {
18                     primary: "ui-icon-locked"
19                 }
20             }).next().button({
21                 icons: {
22                     primary: "ui-icon-gear",
23                     secondary: "ui-icon-triangle-1-s"
24                 }
25             }).next().button({
26                 icons: {
27                     primary: "ui-icon-gear",
28                     secondary: "ui-icon-triangle-1-s"
29                 },
30                 text: false
31             });
32         });
33     </script>
34 </head>
35 <body>
36     <button>Button with icon only</button>
37     <button>Button with icon on the left</button>
38     <button>Button with two icons</button>
39     <button>Button with two icons and no text</button>
40 </body>
41 </html>

20130316008

Radio单选钮
同样，jQuery也把type为radio的一组Radio按钮构成一组单选钮，使用.buttonset 将多个单选钮定义为一个组，其中只有一个可以是选中状态。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9     <script>
10         $(function () {
11             $("#radio").buttonset();
12         });
13   </script>
14 </head>
15 <body>
16  
17 <form>
18   <div id="radio">
19       <input type="radio" id="radio1" name="radio" />
20       <label for="radio1">Choice 1</label>
21       <input type="radio" id="radio2" name="radio" checked="checked" />
22       <label for="radio2">Choice 2</label>
23       <input type="radio" id="radio3" name="radio" />
24       <label for="radio3">Choice 3</label>
25   </div>
26 </form>
27  </body>
28 </html>

20130316009

 

 

posted @ 2013-03-24 11:54  javawebsoa  Views(357)  Comments(0)    收藏  举报