按钮(button) , 可以给生硬的原生按钮或者文本提供更多丰富多彩的外观。 它不单单
可以设置按钮或文本,还可以设置单选按钮和多选按钮。
一. 使用 button 按钮
使用 button 按钮 UI 的时候,不一定必须是 input 按钮形式,普通的文本也可以设置
button 按钮。

  1. $('#search_button').button();

  二. 修改 button 样式
在弹出的 button 对话框中,在火狐浏览器中打开 Firebug 或者右击->查看元素。这样,
我们可以看看 button 的样式,根据样式进行修改。我们为了和网站主题符合,对 dialog 的标题背景进行修改。

//无须修改 ui 里的 CSS,直接用 style.css 替代掉

  1. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  2. background:url(../img/ui_header_bg.png);
  3. }
  4. .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  5. background:url(../img/ui_white.png);
  6. }

  注意:其他修改方案类似。

三. button()方法的属性
按钮方法有两种形式: 1.button(options), options 是以对象键值对的形式传参,每个键
值对表示一个选项; 2.button('action', param), action 是操作对话框方法的字符串, param 则
是 options 的某个选项。

  1. $('#search_button').button({
  2. disabled : false,
  3. icons : {
  4. primary : 'ui-icon-search',
  5. },
  6. label : '查找',
  7. text : false,
  8. });

  注意:对于 button 的事件方法,只有一个: create,当创建 button 时调用。
四. button('action', param)
button('action', param)方法能设置和获取按钮。 action 表示指定操作的方式。

  1. //禁用按钮
  2. $('#search_button').button('disable');
  3. //启用按钮
  4. $('#search_button').button('enable');
  5. //删除按钮
  6. $('#search_button').button('destroy');
  7. //更新按钮,刷新按钮
  8. $('#search_button').button('refresh');
  9. //得到 button 的 jQuery 对象
  10. $('#search_button').button('widget');
  11. //得到 button 的 options 值
  12. alert($('#search_button').button('option', 'label'));
  13. //设置 button 的 options 值
  14. $('#search_button').button('option', 'label', '搜索');

  注意: 对于 UI 上自带的按钮, 比如 dialog 上的, 我们可以通过 Firebug 查找得到 jQuery
对象。

  1. $('#reg').parent().find('button').eq(1).button('disable');

  五. 单选框、复选框
button 按钮不但可以设置普通的按钮,对于单选框、复选框同样有效。

  1. //HTML 单选框
  2. <input type="radio" name="sex" value="male" id="male">
  3. <label for="male">男</label>
  4. </input>
  5. <input type="radio" name="sex" value="female" id="female">
  6. <label for="female">女</label>
  7. </input>
  8. //jQuery 单选框
  9. $('#reg input[type=radio]').button();
  10. //jQuery 单选框改
  11. $('#reg').buttonset(); //HTML 部分做成一行即可
  12. //HTML 复选框
  13. <input type="checkbox" name="color" value="red" id="red">
  14. <label for="red">红</label>
  15. </input>
  16. <input type="checkbox" name="color" value="green" id="green">
  17. <label for="green">绿</label>
  18. </input>
  19. <input type="checkbox" name="color" value="yellow" id="yellow">
  20. <label for="yellow">黄</label></input>
  21. <input type="checkbox" name="color" value="orange" id="orange">
  22. <label for="orange">橙</label>
  23. </input>
  24. //jQuery 复选框
  25. $('#reg input[type=radio]').button();
  26. //jQuery 复选框改
  27. $('#reg').buttonset();

  

20151216JqueryUI学习笔记---按钮的更多相关文章

  1. Dynamic CRM 2013学习笔记(十八)根据主表状态用JS控制子表自定义按钮

    有时要根据主表的审批状态来控制子表上的按钮要不要显示,比如我们有一个需求审批通过后就不能再上传文件了. 首先打开Visual Ribbon Editor, 如下图,我们可以利用Enable Rules ...

  2. Dynamic CRM 2013学习笔记(二十一)自定义审批流2 - 配置按钮

    上次介绍了 Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示 现在开始介绍如何配置审批流,首先在form上添加三个按钮,Submit, Agree, Reject: 1. ...

  3. amazeui学习笔记--css(常用组件3)--按钮组Button-group

    amazeui学习笔记--css(常用组件3)--按钮组Button-group 一.总结 1.按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group . 2.按钮工具栏: ...

  4. amazeui学习笔记--css(HTML元素1)--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  5. amazeui学习笔记--js插件(UI增强2)--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

  6. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  7. Flutter学习笔记(26)--返回拦截WillPopScope,实现1秒内点击两次返回按钮退出程序

    如需转载,请注明出处:Flutter学习笔记(26)--返回拦截WillPopScope,实现1秒内点击两次返回按钮退出程序 在实际开发中,为了防止用户误触返回按钮导致程序退出,通常会设置为在1秒内连 ...

  8. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  9. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

随机推荐

  1. hadoop学习笔记——基础知识及安装

    1.核心 HDFS  分布式文件系统    主从结构,一个namenoe和多个datanode, 分别对应独立的物理机器 1) NameNode是主服务器,管理文件系统的命名空间和客户端对文件的访问操 ...

  2. HDU 2647

    思路:拓扑排序 #include<stdio.h> #include<string.h> typedef struct { int to; int next; }EdgeNod ...

  3. Problem - 433C - Codeforces解题报告

    对于这题本人刚开始的时候的想法是:先把最大两数差的位置找到然后merge计算一个值再与一连串相同的数做merge后计算一个值比较取最大值输出:可提交后发现不对,于是本人就搜了一下正解发现原来这题的正确 ...

  4. HDOJ-ACM1425 sort 简单hash应用

    其实快排也可以通过这个问题~不是考点 没想到考点是这个,简单hash应用,空间换时间 初始化一个长度为1000001的数组(由于数字的范围为[-500000,500000]) 如果存在这个数m,数组下 ...

  5. HDU1671 - Phone List(Trie树)

    题目大意 给定一些电话号码,判断是否有电话号码是其他电话号码的前缀 题解 裸Trie树嘛~~~~只需要一个插入过程即可,假设X是Y的前缀,在插入的过程中有两种情况,X在Y之前插入,那么在插入Y的时候经 ...

  6. 人工神经网络(Artificial Neural Networks)

    人工神经网络的产生一定程度上受生物学的启发,因为生物的学习系统是由相互连接的神经元相互连接的神经元组成的复杂网络.而人工神经网络跟这个差不多,它是一系列简单的单元相互密集连接而成的.其中每个单元有一定 ...

  7. HDU 1102 Constructing Roads (最小生成树)

    最小生成树模板(嗯……在kuangbin模板里面抄的……) 最小生成树(prim) /** Prim求MST * 耗费矩阵cost[][],标号从0开始,0~n-1 * 返回最小生成树的权值,返回-1 ...

  8. 教程-MessageBox 使用方法

    对应对象:TApplication 声明:function MessageBox(Text,Caption:PChar;Flags:Word):Integer; 功能:MessageBox方法可以显示 ...

  9. poj 1144 Network【双连通分量求割点总数】

    Network Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11042   Accepted: 5100 Descript ...

  10. D3D游戏编程系列(三):自己动手编写即时战略游戏之寻路

    说起即时战略游戏,不得不提的一个问题是如何把一个物体从一个位置移动到另一个位置,当然,我说的不是瞬移,而是一个移动的过程,那么在这个移动的过程中我们如何来规划路线呢,这就不得不提到寻路了. 我所了解到 ...