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原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
javascript实现简易计算器功能
Sep 23 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 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
业务主管岗位职责
2013/11/20 职场文书
服务整改报告
2014/11/06 职场文书
社区元宵节活动总结
2015/02/06 职场文书
学校党支部承诺书
2015/04/30 职场文书
企业工会工作总结2015
2015/05/13 职场文书
2015年路政工作总结
2015/05/22 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技
mysql数据库如何转移到oracle
2022/12/24 MySQL