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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
JavaScript Archive Network 集合
May 12 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
详解vue中axios请求的封装
Apr 08 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中memcache的应用
2013/06/18 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
使用正则替换变量
2007/05/05 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
JS库之Waypoints的用法详解
2017/09/13 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
vue实现购物车案例
2020/05/30 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python实现实时视频流播放代码实例
2020/01/11 Python
python语言中有算法吗
2020/06/16 Python
Python如何操作docker redis过程解析
2020/08/10 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
卫校中专生的自我评价
2014/01/15 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2015年中个人总结范文
2015/03/10 职场文书
员工自我评价范文
2015/03/11 职场文书
歼十出击观后感
2015/06/11 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android