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 相关文章推荐
Javascript 作用域使用说明
Aug 13 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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 静态化实现代码
2009/03/20 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
解析php中反射的应用
2013/06/18 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
ThinkPHP安装和设置
2015/07/27 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
基于python实现把图片转换成素描
2019/11/13 Python
python定义类的简单用法
2020/07/24 Python
python 制作磁力搜索工具
2021/03/04 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
机械专业技术员求职信
2014/06/14 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers