第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标

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