知问前端——按钮UI

时间  2019-12-05
标签 前端 按钮 繁體版
原文   原文链接

   按钮（button），能够给生硬的原生按钮或者文本提供更多丰富多彩的外观。它不仅仅能够设置按钮或文本，还能够设置单选按钮和多选按钮。javascript

   使用button按钮css

   使用button按钮UI的时候，不必定必须是input按钮形式，普通的文本也能够设置成button按钮。html

$('#search_button').button();

   修改button样式前端

   在弹出的button对话框中，在火狐浏览器中打开Firebug或者右击->查看元素。这样，咱们能够看看button的样式，根据样式进行修改。咱们为了和网站主题符合，对dialog的标题背景进行修改。java

   无须修改ui里的CSS，直接用style.css替代掉：jquery

/* 按钮正常状态的背景 */
.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的某个选项。ui

   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); //2
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按钮不但能够设置普通的按钮，对于单选框、复选框一样有效。

   一、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(); //无空隙

   二、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(); //无空隙
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程