按钮（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：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>知问前端</title>

    <script type="text/javascript" src="jquery-1.12.3.js"></script>

    <script type="text/javascript" src="jquery-ui.js"></script>

    <script type="text/javascript" src="index.js"></script>

    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <div id="header">

        <div class="header_main">

            <h1>知问</h1>

            <div class="header_search">

                <input type="text" name="search" class="search" />

            </div>

            <div class="header_button">

                <input type="button" value="查询" id="search_button" />

            </div>

            <div class="header_member">

                <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>

            </div>

        </div>

    </div>

</body>

</html>

jQuery代码：

$("#search_button").button({

    disabled:true, //disabled设为true，按钮是非激活状态的

    label:"搜索", //对应按钮上的文字

});

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

<button id="search_button">查询</button>

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：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>知问前端</title>

    <script type="text/javascript" src="jquery-1.12.3.js"></script>

    <script type="text/javascript" src="jquery-ui.js"></script>

    <script type="text/javascript" src="index.js"></script>

    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <div id="header">

        <div class="header_main">

            <h1>知问</h1>

            <div class="header_search">

                <input type="text" name="search" class="search" />

            </div>

            <div class="header_button">

                <button id="search_button">查询</button>

            </div>

            <div class="header_member">

                <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>

            </div>

        </div>

    </div>

    <div id="reg" title="会员注册">

    </div>

</body>

</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); //

alert($("#reg").parent().find("button").eq(1).html()); //<span class="ui-button-text">提交</span>

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

或者

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

单选框、复选框

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

1、html单选框

index.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>知问前端</title>

    <script type="text/javascript" src="jquery-1.12.3.js"></script>

    <script type="text/javascript" src="jquery-ui.js"></script>

    <script type="text/javascript" src="index.js"></script>

    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <div id="header">

        <div class="header_main">

            <h1>知问</h1>

            <div class="header_search">

                <input type="text" name="search" class="search" />

            </div>

            <div class="header_button">

                <!-- <input type="button" value="查询" id="search_button" /> -->

                <button id="search_button">查询</button>

            </div>

            <div class="header_member">

                <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>

            </div>

        </div>

    </div>

    <div id="reg" title="会员注册">

        <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>

</body>

</html>

jQuery代码：

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

或

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

2、html复选框

index.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>知问前端</title>

    <script type="text/javascript" src="jquery-1.12.3.js"></script>

    <script type="text/javascript" src="jquery-ui.js"></script>

    <script type="text/javascript" src="index.js"></script>

    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <div id="header">

        <div class="header_main">

            <h1>知问</h1>

            <div class="header_search">

                <input type="text" name="search" class="search" />

            </div>

            <div class="header_button">

                <!-- <input type="button" value="查询" id="search_button" /> -->

                <button id="search_button">查询</button>

            </div>

            <div class="header_member">

                <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>

            </div>

        </div>

    </div>

    <div id="reg" title="会员注册">

        <input type="checkbox" name="color" value="red" id="red"><label for="red">红</label></input>

        <input type="checkbox" name="color" value="yellow" id="yellow"><label for="yellow">黄</label></input>

        <input type="checkbox" name="color" value="green" id="green"><label for="green">绿</label></input>

        <input type="checkbox" name="color" value="orange" id="orange"><label for="orange">橙</label></input>

    </div>

</body>

</html>

jQuery代码：

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

或

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

知问前端——按钮UI的更多相关文章

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

    jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

  2. 第一百八十二节，jQuery-UI，知问前端--日历 UI

    jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...

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

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

  4. 知问前端——对话框UI(一)

    对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...

  5. 知问前端——日历UI(三)

    datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...

  6. 知问前端——日历UI(二)

    datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...

  7. 知问前端——日历UI(一)

    日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...

  8. 知问前端——工具提示UI

    工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...

  9. 知问前端——对话框UI(二)

    dialog()方法的事件 除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...

随机推荐

  1. FPGA等占空比奇偶分频和半整数分频

    1. 偶数分频比较简单,如果分频系数是N(如果N是偶数,那么N/2是整数),那么在输入时钟的每隔N/2个周期时(计数器从0到N/2-1),改变输出时钟的电平即可得到50%固定占空比的时钟.需要的代码如 ...

  2. iOS开发中常见的一些异常

    iOS开发中常见的异常包括以下几种NSInvalidArgumentExceptionNSRangeExceptionNSGenericExceptionNSInternallnconsistency ...

  3. storm_jdbc 最完整的版本

    开头:我这里是根据bolt与trident进行分类的,写入和读取的方法可能会在同一个类中,最后会展示一个测试的类来说明怎么用. JdbcSpout:这个类是我写入数据和读取数据的公用spout,细节注 ...

  4. [Effective Java] 创建和销毁对象篇

    [Effective Java] 创建和销毁对象篇 1. 优先考虑用静态工厂方法代替构造器 优点: - 静态工厂方法相比于构造器,它们有名称 - 不需要每次在使用的时候创建一个对象 - 可以返回原返回 ...

  5. MySQL统计数据库大小

    select concat(truncate(sum(data_length)/1024/1024,2),'mb') as data_size, concat(truncate(sum(max_dat ...

  6. c# 复选下拉框

    引用dll: http://pan.baidu.com/s/1qXa97UO 自定义类: namespace TMI_S { /// <summary> /// 功能描述:自定义多选下拉框 ...

  7. Qt5.6关联VS2013，配置VAssistX

    1. 安装Qt qt-creator-opensource-windows-x86-4.2.0.exe 2. 安装Qt VS插件 qt-vs-addin-1.2.5.exe 3. 配置ASSISTX ...

  8. qemu的device参数解释 包括ｓｏｃｋｅｔ的一些知识

    前面一片是driver,是把这个新的设备“插入到虚机中”,device 是准备驱动了.device 都是和设备配合使用的.要怎么去驱动一个设备,包括使用的驱动函数是啥,device后面的函数根据驱动的 ...

  9. win7中输入文件夹首字母跳到相应的文件或者文件夹，却在搜索栏出现输入的字母

    组织->文件夹和搜索选项->查看->在视图中选择键入项

  10. [BZOJ5417] [NOI2018]你的名字

    Description 小A 被选为了ION2018 的出题人,他精心准备了一道质量十分高的题目,且已经把除了题目命名以外的工作都做好了. 由于ION 已经举办了很多届,所以在题目命名上也是有规定的, ...