首页 > 程序开发 > web前端 > JavaScript >

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

2013-04-03

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

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

相关文章
最新文章
热点推荐