《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.4　示例：使用按钮集装饰单选框

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.4节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

7.4 示例：使用按钮集装饰单选框

除了button，jQuery UI还提供了buttonset（按钮集）。代码清单7-4演示了如何使用buttonset将一组单选框装饰成普通按钮的样式，其中每次只能选中一个按钮。

代码清单7-4 装饰一组单选框

00 !DOCTYPE html 

02 html lang="en" 

03 head 

04 title jQuery UI Radio /title 

05 link type="text/css" rel="stylesheet" href=

06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css" 

07 /head 

08 body 

10 div id="target" 

11 label for="first" First /label 

12 input type="radio" name="my-radio" id="first" br 

13 label for="second" Second /label 

14 input type="radio" name="my-radio" id="second" br 

15 label for="third" Third /label 

16 input type="radio" name="my-radio" id="third" br 

17 /div 

19 script src="http://code.jquery.com/jquery-1.7.1.min.js" /script 

20 script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js" 

21 /script 

23 script 

24 // 请将下列代码移至一个外部的.js文件中

25 $(document).ready(function() {

27 $(#target).buttonset();

29 });

30 /script 

31 /body 

32 /html 

可以将相似的代码用于复选框或其他一组传统的按钮。

【前端】使用jQuery封装一套UI组件 - 级联选择器组件 本篇文章来讲解下级联选择器组件 级联选择器，在实际项目中也是比较常用的组件，比如：省市区三级关联，上下级联动等 最后面会附上全部代码
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件 本篇文章来讲解下是和否的滑动切换组件 切换滑动组件，使用的场景实际上就是一个开和关的场景，一般有是和否，开和关，禁用和启用等等，只需要设置0和1即可
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件 【首先要声明一点，技术不分好坏，能用好就行，不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始，看到比较新颖的移动端时间选择组件是在某款手机上，分年月日下拉选择，UI界面也挺好看的 除了讲解实现的步骤以及关键点，文章最后面会有完整的代码
【前端】使用jQuery封装一套UI组件 - 单选框 目前前端技术发展非常快，各大厂都开源和分享了自家的前端框架，非常多成熟的UI组件供大家选择，很实用也很方便，给开发上节省了不少时间成本，当然少不了学习成本，不过也不会占用太多时间，只要有前端基础的话，原理基本都是通用的，只是写法不一样。 因此，除了学习现有的优秀前端之外，最好能自己根据原理封装一套自己的UI组件，目的是为了更好的理解前端知识点以及锻炼编程逻辑
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。