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 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
JavaScript数组去重算法实例小结
May 07 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 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实现的获取URL信息的类
2007/01/02 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php获取地址栏信息的代码
2008/10/08 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
js 省地市级联选择
2010/02/07 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
python九九乘法表的实例
2017/09/26 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python实战购物车项目的实现参考
2019/02/20 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
python -v 报错问题的解决方法
2020/09/15 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
物流专业求职信
2014/06/30 职场文书
村班子对照检查材料
2014/08/18 职场文书
详解Python牛顿插值法
2021/05/11 Python