本节书摘来自异步社区《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>
01
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>
09
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>
18
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>
22
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26　
27　　$('#target').buttonset();
28　　
29 });
30 </script>
31 </body>
32 </html>

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

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

  1. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  2. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17　技巧：使用多个列

    本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第9章,第9.17节,作者:[荷]Adriaan de Jonge , [美]Phil ...

  3. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3　技巧：生成类名

    本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第3章,第3.3节,作者:[荷]Adriaan de Jonge , [美]Phil ...

  4. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.7　技巧：指定过渡动画

    本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第9章,第9.7节,作者:[荷]Adriaan de Jonge , [美]Phil ...

  5. 关于jQuery UI 使用心得及技巧

    最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助.文章结尾附源码下载. 1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javasc ...

  6. jQuery UI 使用心得及技巧

    最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助.文章结尾附源码下载. 1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javasc ...

  7. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  8. jQuery、jQury UI、jQuery Mobile----读书笔记

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> <meta name ...

  9. 第四十四课：jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

最新文章

  1. JavaScript 的面向对象编程
  2. 前端架构之移动端混合架构（hybrid）
  3. pyhanlp 分词与词性标注
  4. hdu 3681(bfs+dfs+状态压缩)
  5. asp.net MVC分页
  6. 帧间、帧内像素块预测
  7. [转] polymorphic databinding solutions
  8. mysql 体重 类型 身高_MySQL 数据类型
  9. android studio开发个人备忘录算法设计_Android Studio 4.1 发布，全方位提升开发体验...
  10. php pdf转为jpg 插件,php使用Image Magick将PDF文件转换为JPG文件的方法
  11. 安卓系统修改分辨率.2022.01.05
  12. iPhone配置实用工具介绍
  13. 二次上市，中通打响快递头牌捍卫战
  14. MySQL笔记---DQL语言
  15. Grbl limit.c代码分析
  16. 搜索引擎涉及的数据结构
  17. 密集子图挖掘算法的相关知识
  18. 现实中的无人机也可以像蜘蛛侠一样“吐丝”了
  19. 自托管 NodeJS ChatGPT Discord 机器人
  20. ERP的核心管理思想

热门文章

  1. 如何注释python中html,Python在HTML中提取带注释的代码,python,html,被
  2. linux sed 正则转义,Linux运维云升笔记 （一）正则表达式以及文档编辑器sed
  3. suse查看mysql内存使用情况_MySQL 慢查询日志(Slow Query Log)
  4. php-fpm 启动拥有者,php-fpm 的各种启动方式
  5. linux中循环删除脚本,shell脚本：遍历删除
  6. tensorflow 保存训练loss_tensorflow2.0保存和加载模型 (tensorflow2.0官方教程翻译)
  7. 2016重庆计算机一级考试题型,重庆计算机一级考试真题2016年最新(笔试+上机)
  8. html分页实现w3c,分页_w3cschool
  9. 中print中加f_Python3中的格式化输出
  10. one more step_KDA新歌《MORE》的一些冷知识：伊芙琳换回原声，摩托车是定制的