学习要点:
1.使用 button 按钮
2.修改 button 样式
3.button()方法的属性
4.button('action', param)
5.单选、复选按钮
按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观。它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮。
一.使用 button 按钮
使用 button 按钮 UI 的时候,不一定必须是 input 按钮形式,普通的文本也可以设置成button 按钮。
$('#search_button').button();
二.修改 button 样式
在弹出的 button 对话框中,在火狐浏览器中打开 Firebug 或者右击->查看元素。这样,我们可以看看 button 的样式,根据样式进行修改。我们为了和网站主题符合,对 dialog 的标题背景进行修改。
//无须修改 ui 里的 CSS,直接用 style.css 替代掉 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background:url(../img/ui_header_bg.png); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url(../img/ui_white.png); }
注意:其他修改方案类似。
三.button()方法的属性
按钮方法有两种形式:1.button(options),options 是以对象键值对的形式传参,每个键值对表示一个选项;2.button('action', param),action 是操作对话框方法的字符串,param 则是 options 的某个选项。
$('#search_button').button({ disabled : false, icons : { primary : 'ui-icon-search', }, label : '查找', text : false, });
注意:对于 button 的事件方法,只有一个:create,当创建 button 时调用。
四.button('action', param)
button('action', param)方法能设置和获取按钮。action 表示指定操作的方式。
//禁用按钮 $('#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 上自带的按钮, 比如 dialog 上的,我们可以通过 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 单选框 $('#reg input[type=radio]').button();
//jQuery 单选框改 $('#reg').buttonset(); //HTML部分做成一行即可
//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 复选框 $('#reg input[type=radio]').button();
//jQuery 复选框改 $('#reg').buttonset();
相关推荐
16、优化:扩展-备份还原数据UI体验,支持目录从根显示 17、增加:标签解析调试模块,用于分析标签解析效率 18、扩展:内容评论使用新编辑器,支持图片上传 19、扩展:标签管理,增加创建与修改时间(文件创建与修改时间...
16.优化:扩展-备份还原数据UI体验,支持目录从根显示;17.增加:标签解析调试模块,用于分析标签解析效率;18.扩展:内容评论使用新编辑器,支持图片上传;19.扩展:标签管理,增加创建与修改时间(文件创建与修改时间);...
16、优化:扩展-备份还原数据UI体验,支持目录从根显示 17、增加:标签解析调试模块,用于分析标签解析效率 18、扩展:内容评论使用新编辑器,支持图片上传 19、扩展:标签管理,增加创建与修改时间(文件创建与修改时间...
第1章 了解、深入、动手做 1.1 红透半边天的Android 1.2 本书目的及范例涵盖范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装Android SDK与ADT/DDMS 2.2 创建第一个Android项目...
第1章 了解、深入、动手做 1.1 红透半边天的Android 1.2 本书目的及范例涵盖范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装Android SDK与ADT/DDMS 2.2 创建第一个Android项目...
第1章 了解、深入、动手做 1.1 红透半边天的Android 1.2 本书目的及范例涵盖范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装Android SDK与ADT/DDMS 2.2 创建第一个Android项目...
第1章 了解、深入、动手做 1.1 红透半边天的Android 1.2 本书目的及范例涵盖范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站 第2章 Android初体验 2.1 安装Android SDK与ADT/DDMS 2.2 创建第一个Android项目...
更新:前端UI界面全部优化 更新:抽奖支持多轮抽奖,可以内定 2017.6.25 更新:摇一摇功能全面优化升级,支持多轮摇一摇游戏 2017.6.14 更新:现在对对碰签到完成即可参与 更新:优化手机签到页背景 更新:部分文字...
第六章 认我测在线检测服务系统实现与测试 33 6.1认我测在线检测服务框架设计 33 6.2 系统运行环境搭建及配置 34 6.2.1 AndroidManifest.xml主程序环境配置 34 6.2.2 移动端工程资源布局 35 6.3 认我测在线认证检测...