您的位置：首页 > Web前端 > JQuery

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

2013-03-24 08:11 411 查看

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

1	<!doctypehtml>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQueryUIDemos</ 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")

.button()

13	.click(function(event){

14	event.preventDefault();

});

});

17	</ script >

</

head

body

21	< button >Abuttonelement</ button >

23	< input type = "submit" value = "Asubmitbutton" />

25	< a href = "#" >Ananchor</ a >

</

body

</

html

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

1	<!doctypehtml>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQueryUIDemos</ 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")

.button()

13	.click(function(event){

14	event.preventDefault();

});

});

17	</ script >

</

head

body

20	< button >Abuttonelement</ button >

21	< input type = "submit" value = "Asubmitbutton" />

22	< a href = "#" >Ananchor</ a >

</

body

</

html

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

1	<!doctypehtml>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQueryUIDemos</ 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({

icons:{

13	primary:"ui-icon-locked"

},

15	text:false

16	}).next().button({

icons:{

18	primary:"ui-icon-locked"

20	}).next().button({

icons:{

22	primary:"ui-icon-gear",

23	secondary:"ui-icon-triangle-1-s"

25	}).next().button({

icons:{

27	primary:"ui-icon-gear",

28	secondary:"ui-icon-triangle-1-s"

},

30	text:false

});

});

33	</ script >

</

head

body

36	< button >Buttonwithicononly</ button >

37	< button >Buttonwithiconontheleft</ button >

38	< button >Buttonwithtwoicons</ button >

39	< button >Buttonwithtwoiconsandnotext</ button >

</

body

</

html

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

1	<!doctypehtml>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQueryUIDemos</ 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();

});

13	</ script >

</

head

body

form

18	< div id = "radio" >

19	< input type = "radio" id = "radio1" name = "radio" />

20	< label for = "radio1" >Choice1</ label >

21	< input type = "radio" id = "radio2" name = "radio" checked = "checked" />

22	< label for = "radio2" >Choice2</ label >

23	< input type = "radio" id = "radio3" name = "radio" />

24	< label for = "radio3" >Choice3</ label >

</

div

</

form

</

body

</

html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航