JqueryUI實戰操作 按鈕篇

weixin_34236869發表於2017-10-23
jQueryUI

本節知識點

  • jqueryUI的引入
  • jqueryUI的按鈕

jqueryUi的引入

  • 第一步去下載jqueryUI
    jqueryUi的使用必須要引入3個檔案
    <link rel="stylesheet" href="css/jquery-ui.css"/> <!--引入UI的 css-->
    <script src="js/jquery.min.js"></script> <!--引入jquery-->
    <script src="js/jquery-ui.js"></script> <!--引入UIjs-->

然後接著引入自定義的CSS和JS檔案

 <script src="js/style.js"></script><!--引入自定義的style.js檔案-->
 <link rel="stylesheet" href="css/style.css"/><!--引入自定義的css-->

自己的自定義內容寫到自定義檔案裡

知問前端按鈕UI篇

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf8">
    <title>jqueryUI</title>
    <link rel="shortcut icon" href="iph.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/jquery-ui.css"/> <!--引入UI的 css-->
    <script src="js/jquery.min.js"></script> <!--引入jquery-->
    <script src="js/jquery-ui.js"></script> <!--引入UIjs-->
    <script src="js/style.js"></script><!--引入自定義的style.js檔案-->
    <link rel="stylesheet" href="css/style.css"/><!--引入自定義的css-->
</head>
<body>
<!--<input type="button" value="提交">-->
<div id="header">
  <div class="header_content">
        <h1>知問</h1>
       <div class="header_search">
           <input type="text" class="search" name="search_1">
       </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>
<!--表單區-->
<div id="dialog" title="會員註冊">
    表單區
</div>
<!--表單區結束-->
</body>
</html>

使用button按鈕

使用說明:使用button按鈕UI的時候，不一定是input按鈕形式，普通的文字可以設定為button按鈕形式。要是用input則顯示不出來圖示

$("#sear_button").button();

button屬性和方法

  • label

字串，對應按鈕上的文字，如果沒有,HTML內容將被作為按鈕上的文字

  • icons 字串 對應按鈕上的圖示，在按鈕文字前面和後面都可以放置圖片，通過鍵值對的方式完成.
{
    primary:  "ui-icon-search",//這兩個只能留一個,不能一起寫
    secondary: "ui-icon-search"
}
  • text true/false 當設定為false時候，不會顯示文字，但必須指定一個圖示
$("#search_button").button({
        disabled:false,
        icons:{
        primary: " ui-icon-search"
        },
       label: "查詢",
       text: false //不顯示文字只顯示圖示
})

單選框 核取方塊

button 按鈕不但可以設定為普通的按鈕，對於單選框，核取方塊同樣有效。
//html單選框

<input type="radio" name="sex" value="male" id="male">
<label for="male">男</label>
</input>

//jQuery單選框

$("#reg input[type=radio]").button();

本節說明

button按鈕也就3個屬性 
label: 代表文字。
icons:{}圖示
text:代表文字沒有而必須寫圖片.

相關文章