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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
详解JSON.parse和JSON.stringify用法
Feb 18 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php反弹shell实现代码
2009/04/22 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
Node.js assert断言原理与用法分析
2019/01/04 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
基于FME使用Python过程图解
2020/05/13 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
公司授权委托书范文
2014/08/02 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
捐款通知怎么写
2015/04/24 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
国富论读书笔记
2015/06/26 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript