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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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中的字符串函数
2006/10/09 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
canvas绘制多边形
2017/02/24 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
毕业生自我推荐
2013/11/04 职场文书
行政主管岗位职责
2013/11/18 职场文书
高中生学习的自我评价
2013/12/14 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
公司庆典欢迎词
2015/01/26 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Mysql忘记密码解决方法
2022/02/12 MySQL