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 相关文章推荐
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
vue语法自动转typescript(解放双手)
Sep 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
COM in PHP (winows only)
2006/10/09 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php 如何获取数组第一个值
2013/08/06 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
删除重复数据的算法
2006/11/23 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python操作xml文件示例
2014/04/07 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
pytorch 数据集图片显示方法
2018/07/26 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
幼儿园小班教学反思
2014/02/02 职场文书
经典洗发水广告词
2014/03/13 职场文书
电钳工人个人求职信
2014/05/10 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书