博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
知问前端——按钮UI
阅读量:5988 次
发布时间:2019-06-20

本文共 4587 字,大约阅读时间需要 15 分钟。

   按钮(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按钮选项

属性 默认值/类型 说明
disabled false/布尔值 默认为false,设置为true时,按钮是非激活的
label 无/字符串 对应按钮上的文字。如果没有,HTML内容将被作为按钮的文字
icons 无/字符串 对应按钮上的图标。 在按钮文字前面和后面都可以放置一个图标,通过对象键值对的方式完成:
{
  primary : 'ui-icon-search',
  secondary : 'ui-icon-search'
}
text true/布尔值 当时设置为false时,不会显示文字,但必须指定一个图标

   index.html:

    
知问前端

   jQuery代码:

$("#search_button").button({    disabled:true, //disabled设为true,按钮是非激活状态的    label:"搜索", //对应按钮上的文字});

   如果要使用icons属性,那么index.html中按钮必须修改为:

   jQuery代码:

$("#search_button").button({    icons:{      primary:"ui-icon-search",      //secondary:"ui-icon-triangle-1-s"    },    text:false});

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

   button('action',param)

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

   button('action',param)方法

方法 返回值 说明
button('disabled') jQuery对象 禁用按钮
button('enable') jQuery对象 启用按钮
button('destroy') jQuery对象 删除按钮,直接阻断了button
button('refresh') jQuery对象 更新按钮布局
button('widget') jQuery对象 获取对话框的jQuery对象
button('options',param) 一般值 获取options属性的值
button('options',param,value) jQuery对象 设置options属性的值

   禁用按钮:

$("#search_button").button("disable");

   启用按钮:

$("#search_button").button("enable");

   删除按钮:

$("#search_button").button("destroy"); //变成普通按钮

   更新按钮,刷新按钮:

$("#search_button").button("refresh"); //感觉没什么鸟用

   得到button的jQuery对象(与dialog类似):

alert($("#search_button").button("widget"));

   得到button的options值:

alert($("#search_button").button("option","label"));//查询

   设置button的options值:

$("#search_button").button("option","label","搜索");

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

   index.html:

    
知问前端

   jQuery代码:

$("#search_button").button({    icons:{        primary:"ui-icon-search",      //secondary:"ui-icon-triangle-1-s"    }});$("#reg").dialog({    buttons:{        '提交':function() {        }    }});

   如何禁用对话框中的“提交按钮”?

alert($("#reg").parent().find("button").length); //2alert($("#reg").parent().find("button").eq(1).html()); //提交$("#reg").parent().find("button").eq(1).button("disable");

   或者

$("#reg").dialog("widget").find("button").eq(1).button("disable");

   单选框、复选框

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

   1、html单选框

   index.html:

    
知问前端

   jQuery代码:

$("#reg input[type=radio]").button(); //按钮之间还是有空隙的

   或

$("#reg").buttonset(); //无空隙

   2、html复选框

   index.html:

    
知问前端

   jQuery代码:

$("#reg input[type=checkbox]").button(); //按钮之间还是有空隙的

   或

$("#reg").buttonset(); //无空隙

 

转载于:https://www.cnblogs.com/yerenyuan/p/5446660.html

你可能感兴趣的文章
DedeCMS Error: (PHP 5.3 and above) Please set r...
查看>>
发邮件mailto用法
查看>>
一小时包教会 —— webpack 入门指南
查看>>
Vue.js——60分钟组件快速入门(上篇)
查看>>
iOS Code Review 1.0
查看>>
格式化文档生成的利器-- Markdown
查看>>
mysql 5.7.11 zip 安装
查看>>
Spring Cloud Config Client配置说明
查看>>
java集合学习笔记 ---set
查看>>
如何控制CSS使一个div位于最上层
查看>>
初识Java EE
查看>>
详解Linux目录(目录树详细解释)[RHEL5.4]
查看>>
php 位运算
查看>>
网络工程师为何要学好Linux
查看>>
Perforce 在 Intellij IDEA 中的核心设置
查看>>
tornado总结3-html模板使用1
查看>>
Hibernate主键生成策略
查看>>
如何处理大量数据并发操作
查看>>
jsp自定义标签属性<body-content>值类型
查看>>
Smail代码调试LogUtil
查看>>