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

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

本节书摘来自异步社区《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>

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

相关文章
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
159 1
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
218 4
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
386 21
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
240 7
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
187 1
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
142 1
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
228 0
|
前端开发 JavaScript
jquery单选框radio值改变change事件
2015年11月25日 13:39:03 1 $().ready(function(){ 2 //默认显示#input_div 3 if ($("input[name='type']:checked").
2978 0
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件

相关课程

更多
下一篇
开通oss服务