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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
three.js 如何制作魔方
Jul 31 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
菜单效果
2006/10/14 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python实现图片素描效果
2020/09/26 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
毕业证丢失证明
2014/01/15 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
Golang并发工具Singleflight
2022/05/06 Golang