jQuery之按钮组件的深入解析


Posted in Javascript onJune 19, 2013

按钮组件:
     $(selector).button([options]);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ButtonIcon</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.widget.js"></script>
<script type="text/javascript" src="JS/jquery.ui.button.js"></script>
<script>
$(document).ready(function(){
 $("input,button").button({
  icons: {
            primary: "ui-icon-locked"
    // secondary: "ui-icon-triangle-1-s"
        }
 });
 $("a,div").button({
  icons: {
            secondary: "ui-icon-triangle-1-s"
        }
 });
});
</script>
<style>
body{ padding:30px; font-size:9px; }
</style>
</head>
<body>
<input type="button" value="Button 1" />
<input type="submit" value="Submit Button" />
<button>Button 2</button>
<input type="checkbox" id="check1" /><label for="check1">Check 1</label>
<input type="radio" id="radio1" /><label for="radio1">Radio1</label>
<a>Anchor</a>
<div>DIV</div>
</body>
</html>

效果图:  jQuery之按钮组件的深入解析
Javascript 相关文章推荐
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
js实现验证码功能
Jul 24 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
jQuery之自动完成组件的深入解析
Jun 19 #Javascript
jQuery之折叠面板的深入解析
Jun 19 #Javascript
jQuery之选择组件的深入解析
Jun 19 #Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 #Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 #Javascript
解析JavaScript中的标签语句
Jun 19 #Javascript
解析window.open的使用方法总结
Jun 19 #Javascript
You might like
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
子页向父页传值示例
2013/11/27 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python多维数组切片方法
2018/04/13 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
贯彻学习两会心得体会范文
2014/03/17 职场文书
运动会演讲稿100字
2014/08/25 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
用python批量解压带密码的压缩包
2021/05/31 Python
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android