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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
List Installed Hot Fixes
Jun 12 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 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
一些星际专用术语解释
2020/03/04 星际争霸
SONY ICF-SW55的电路分析
2021/03/02 无线电
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Zabbix实现微信报警功能
2016/10/09 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python如何更新包
2020/06/11 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
护士自荐信
2013/10/25 职场文书
英文导游欢迎词
2014/01/11 职场文书
日化店促销方案
2014/03/26 职场文书
财产公证书
2014/04/10 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
农村文化建设标语
2014/10/07 职场文书
优秀教师先进材料
2014/12/16 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
交通安全主题班会
2015/08/12 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
《比尾巴》教学反思
2016/02/24 职场文书