jQuery-UI,知问前端--按钮 UI

学习要点:

  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 的某个选项。

button()方法,将一个按钮元素,执行按钮效果,参数接收一个对象,以键值对方式设置各种参数

jQuery-UI,图标

disabled false/布尔值 默认为 false,设置为 true 时,按钮是非激活的。

label 无/字符串 对应按钮上的文字。如果没有,HTML 内容将被作为按钮的文字。

icons 无/字符串对应按钮上的图标。在按钮文字前面和后面都可以放置一个图标,通过对象键值对的方式完成:
{
primary : 'ui-icon-search',
secondary : 'ui-icon-search'
}

text true/布尔值 当时设置为 false 时,不会显示文字,但必须指定一个图标。

    $('#search_button').button({
//disabled:true, //disabled false/布尔值 默认为 false,设置为 true 时,按钮是非激活的。
label:'搜索', //label 无/字符串 对应按钮上的文字。如果没有,HTML 内容将被作为按钮的文字。
icons:{ //icons 无/字符串对应按钮上的图标。在按钮文字前面和后面都可以放置一个图标,通过对象键值对的方式完成
primary : 'ui-icon-search', //按钮文字前图标
secondary : 'ui-icon-search' //按钮文字后图标
},
text:false //隐藏按钮文字
});

button 的事件方法create

注意:对于 button 的事件方法,只有一个:create,当创建 button 时调用。

    $('#search_button').button({
create:function () { //当创建 button 时调用
alert('创建');
}
});

四.button('action', param)

button('action', param)方法能设置和获取按钮。action 表示指定操作的方式。

button('disable') jQuery 对象 禁用按钮

    $('#search_button').button({
label:'搜索'
});
$('#search_button').button('disable'); //button('disable') jQuery 对象 禁用按钮

button('enable') jQuery 对象 启用按钮

    $('#search_button').button({
label:'搜索'
});
$('#search_button').button('disable'); //button('disable') jQuery 对象 禁用按钮
$('#search_button').button('enable'); //button('enable') jQuery 对象 启用按钮

button('destroy') jQuery 对象 删除按钮,直接阻断了 button。

    $('#search_button').button({
label:'搜索'
});
$('#search_button').button('destroy'); //button('destroy') jQuery 对象 删除按钮,直接阻断了 button。

button('refresh') jQuery 对象 更新按钮布局。

    $('#search_button').button({
label:'搜索'
});
$('#search_button').button('refresh'); //button('refresh') jQuery 对象 更新按钮布局。

button('widget') jQuery 对象 获取按钮的 jQuery 对象

    $('#search_button').button({
label:'搜索'
});
alert($('#search_button').button('widget')); //button('widget') jQuery 对象 获取按钮的 jQuery 对象

button('option', param) 一般值 获取 options 属性的值,第二个参数是要获取的属性,

    $('#search_button').button({
label:'搜索'
});
alert($('#search_button').button('option', 'label')); //button('option', param) 一般值 获取 options 属性的值

button('option', param, value) jQuery 对象 设置 options 属性的值,第二个参数是要设置的属性,第三个参数是要设置的值

    $('#search_button').button({
label:'搜索'
});
$('#search_button').button('option', 'label','搜索一下'); //button('option', param, value) jQuery 对象 设置 options 属性的值,第二个参数是要设置的属性,第三个参数是要设置的值

五.单选框、复选框

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

单选框

html

<div id="reg">
<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>
</div>
//jQuery 单选框
$('#reg input[type=radio]').button();
//jQuery 单选框改
$('#reg').buttonset();

复选框

html

<div id="reg">
<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>
</div>
        //复选框
$('#reg input[type=checkbox]').button();
//复选框改
$('#reg').buttonset();

 buttonset()将一个元素下的所有按钮,单选框,复选框,执行按钮化ui

第一百七十九节,jQuery-UI,知问前端--按钮 UI-图标的更多相关文章

  1. 第一百七十八节,jQuery-UI,知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  2. 第一百八十三节,jQuery-UI,知问前端--验证插件

    jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...

  3. 第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装

    第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...

  4. 知问前端——按钮UI

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

  5. 第一百七十六节,jQuery,插件

    jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 ...

  6. 第一百八十九节,jQueryUI,折叠菜单 UI

    jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.acco ...

  7. 第一百七十五节,jQuery,工具函数

    jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...

  8. 第一百七十四节,jQuery,Ajax进阶

    jQuery,Ajax进阶 学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我 ...

  9. 第一百六十九节,jQuery,基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

随机推荐

  1. svn的安装(整合apache、ldap)包括错误解决post commit FS processing had error

    2013年12月5日 admin 发表评论 阅读评论 以下是centos环境下,以yum安装apache及其相关软件.svn使用源码包编译,使用官网最新的1.8.5版本. 一.安装apache ope ...

  2. Java程序员到架构师的推荐阅读书籍

    作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...

  3. Flexbox兼容性语法汇总

    Flexbox版本 flexbox从第一次出现至今总共有三个语法版本,他们分别是: "display:box;"  —  2009年的老版本 "display:flexb ...

  4. D3.js系列——布局:打包图和地图

    一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...

  5. https://v2ex.com/t/170386

    https://v2ex.com/t/170386 https://cnodejs.org/topic/5566952ad4ca459f5267ac59 https://segmentfault.co ...

  6. U盘制作linux centos6.5

    2015年8月4日 1.下载ULTIso软件,注册 2.DVD1的那个拖进去 3.[一定要双击那个进去]才“写入硬盘镜像”,否则只“写入‘,还是一个iso文件,不是提取出来的文件. 4.覆盖相应的文件 ...

  7. SQL Server 2008R2发布与订阅的配置

    使用SQL Server的发布与订阅可以将一个数据库的数据实时传送到另一个数据库中,使用这种方式与Link Server相比可以减少对数据库的连接次数.下面介绍SQL Server 2008R2发布与 ...

  8. BOS中定区关联客户

    1. 首先发布crm服务 第一步:创建动态的web项目crm,导入hessian的jar 第二步:创建一个crm数据库和t_customer表 第三步:在crm项目的web.xml中配置spring的 ...

  9. MATLAB 的运算符

    在MATLAB中,提供了丰富的运算符,运算主要包括算数运算.关系运算和逻辑运算. 一.算数运算符 分为标量和数组运算和矩阵运算.需要注意:对于a/b,是a除以b,对于a\b,是b除以a.在MATLAB ...

  10. Parallel小记

    List<Temp> tList = new List<Temp>(); ; i < ; i++) { tList.Add(new Temp() { id = i, na ...