4.jQuery UI 按钮UI
来源:互联网 发布:培训环节知乎 编辑:程序博客网 时间:2024/06/03 21:24
按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观。它不
单单可以设置按钮或文本,还可以设置单选按钮和多选按钮。
一.使用button 按钮
使用button 按钮UI 的时候,不一定必须是input 按钮形式,普通的文本也可以设
置成button 按钮。
$('#button').button();
二.修改button 样式
在弹出的button 对话框中,在火狐浏览器中打开Firebug 或者右击->查看元素。这
样,可以看看button 的样式,根据样式进行修改。为了和网站主题符合,对button 的标
题背景进行修改。
//无须修改ui 里的CSS,直接用style.css 替代掉.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background:url(../img/xxx.png);}.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url(../img/yyy.png);}
三.button()方法的属性
按钮方法有两种形式:1.button(options),options 是以对象键值对的
形式传参,每个键值对表示一个选项;2.button('action', param),action
是操作对话框方法的字符串,param 则是options 的某个选项。
默认值/类型
说明
disabled
false/布尔值
默认为false,设置为true 时,按钮是非激活的。
label
无/字符串
对应按钮上的文字。如果没有,HTML 内容将被
作为按钮的文字。
icons 无/字符串
对应按钮上的图标。在按钮文字前面和后面都可以
放置一个图标,通过对象键值对的方式完成:
{
primary : 'ui-icon-search',
secondary : 'ui-icon-search'
}
text true/布尔值
当时设置为false 时,不会显示文字,但必须指定
一个图标。
$('#search_button').button({disabled : false, icons : { primary : 'ui-icon-search', }, label : 'search', text : false,});
注意:对于button 的事件方法,只有一个:create,当创建button 时调用。
四.button('action', param) 方法
button('action', param)方法能设置和获取按钮。action 表示指定操作的方式。
返回值
说明
button('disable')
jQuery 对象
禁用按钮
button('enable')
jQuery 对象
启用按钮
button('destroy')
jQuery 对象
删除按钮,直接阻断了button
button('refresh')
jQuery 对象
更新按钮布局
button('widget')
jQuery 对象
获取对话框的jQuery 对象
button('option', param)
一般值
获取options 属性的值
button('option', param, value)
jQuery 对象
设置options 属性的值
//禁用按钮$('#search_button').button('disable');//启用按钮$('#search_button').button('enable');//删除按钮$('#search_button').button('destroy');//更新按钮,刷新按钮$('#search_button').button('refresh');//得到button 的jQuery 对象$('#search_button').button('widget');//得到button 的options 值alert($('#search_button').button('option', 'label'));//设置button 的options 值$('#search_button').button('option', 'label', '搜索');
注意:对于UI 上自带的按钮,比如button 上的,可以通过Firebug 查找得到jQuery对象。
$('#reg').parent().find('button').eq(1).button('disable');
五.单选框、复选框
button 按钮不但可以设置普通的按钮,对于单选框、复选框同样有效。
单选框 :
html :
<input type="radio" name="sex" value="male" id="male"> <label for="male">男</label></input><input type="radio" name="sex" value="female" id="female"> <label for="female">女</label></input>
jQuery :
//jQuery 单选框$('#reg input[type=radio]').button();//jQuery 单选框 表格内的全部button设置$('#reg').buttonset();
复选框 :
html :
<input type="checkbox" name="color" value="red" id="red"> <label for="red">红</label></input><input type="checkbox" name="color" value="green" id="green"> <label for="green">绿</label></input><input type="checkbox" name="color" value="yellow" id="yellow"> <label for="yellow">黄</label></input><input type="checkbox" name="color" value="orange" id="orange"> <label for="orange">橙</label></input>
jQuery :
//jQuery 复选框$('#reg input[type=checkbox]').button();//jQuery 复选框 表格内全部button设置$('#reg').buttonset();
0 0
- 4.jQuery UI 按钮UI
- jquery UI 隐藏关闭按钮
- 按钮ui
- JQuery Dialog UI按钮文字国际化
- jQuery Easy UI LinkButton(按钮)组件
- jquery-ui datepicker 修改today按钮事件;close按钮事件
- jquery ui
- jQuery - UI
- jquery ui
- jquery ui
- jquery ui
- JQuery Ui
- jquery ui
- jQuery UI
- jQuery UI
- jquery UI
- JQuery-ui
- jQuery UI
- java堆栈和垃圾回收
- Codeforces Round #260 (Div. 2)C. Boredom
- 人见人爱A^B
- hdu 2522 A simple problem(模拟)
- eclipse中查看java String类的源代码
- 4.jQuery UI 按钮UI
- java中DAO模式的好处
- What is SMS and how does it work?
- cocos2dx 动态加载网络图片
- JAVA求解大数
- javaScript 联动函数
- poj1486 sorting slides (二分图最大匹配的唯一性)
- 反向代理
- 自己整理的KMP算法