博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第一百七十九节,jQuery-UI,知问前端--按钮 UI-图标
阅读量:6242 次
发布时间:2019-06-22

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

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

//jQuery 单选框$('#reg input[type=radio]').button();//jQuery 单选框改$('#reg').buttonset();

复选框

html

//复选框        $('#reg input[type=checkbox]').button();        //复选框改        $('#reg').buttonset();

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

转载地址:http://omsia.baihongyu.com/

你可能感兴趣的文章
有没有可以共享的桌面便签?
查看>>
Mars说光场(3)— 光场采集
查看>>
24、商品列表页之数据渲染和传值
查看>>
源码分析-react3-创建dom
查看>>
C# 获取QQ好友列表信息的实现
查看>>
System.ComponentModel.Win32Exception解决方案
查看>>
设计模式之死磕策略模式(原创)
查看>>
IDEA无法导入Maven工程
查看>>
谈谈FLUX的使用
查看>>
4-Java面向对象-继承(上)
查看>>
mysql 生成随机手机号和随机中文名
查看>>
磁盘 IO 和网络 IO 该如何评估、监控、性能定位和优化?
查看>>
【iOS 开发】父视图外部子视图点击响应 - hitTest
查看>>
Android仿简书长按文章生成图片效果
查看>>
linux安装redis内存数据库
查看>>
官方实锤!微软宣布以 75 亿美元收购 GitHub
查看>>
vuejs深入浅出—基础篇
查看>>
View的绘制过程
查看>>
AI助力机器人市场,机器人升级2.0迫在眉睫
查看>>
Android Studio: Plugin with id 'android-library' not found
查看>>