知問前端——按鈕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教程