jQuery Mobile基本UI組件

時間 2019-11-19

原文原文鏈接

基本頁面構造

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>header</h1>
  </div>

  <div data-role="content">
    <p>content</p>
  </div>

  <div data-role="footer">
  <h1>footer</h1>
  </div>
</div> 

</body>
</html>

多頁面

將頁面做爲對話框：data-rel="dialog" -line31php

設置過渡效果：data-transition -line17css

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
 5 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 6 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 7 </head>
 8 <body>
 9 
10 <div data-role="page" id="page1">
11   <div data-role="header">
12     <h1>header</h1>
13   </div>
14 
15   <div data-role="content">
16     <!-- 轉到外部頁面使用href="xxx.html" -->
17     <a href="#page2" data-transition="slide">轉到頁面二</a>
18   </div>
19 
20   <div data-role="footer">
21   <h1>footer</h1>
22   </div>
23 </div> 
24 
25 <div data-role="page" id="page2">
26   <div data-role="header">
27     <h1>header</h1>
28   </div>
29 
30   <div data-role="content">
31     <a href="#dialog1" data-rel="dialog">彈出對話框</a>
32   </div>
33 
34   <div data-role="footer">
35   <h1>footer</h1>
36   </div>
37 </div> 
38 
39 <div data-role="page" id="dialog1">
40   <div data-role="header">
41     <h1>header</h1>
42   </div>
43 
44   <div data-role="content">
45     <a href="#page1">轉到頁面一</a>
46   </div>
47 
48   <div data-role="footer">
49   <h1>footer</h1>
50   </div>
51 </div> 
52 
53 </body>
54 </html>

按鈕

建立按鈕（使用a標籤構建按鈕的時候又用到了data-role）html

<button>button</button>
<input type="button" value="button" />
<a href="#" data-role="button">button</a>

行內按鈕，可讓按鈕自適應內容而不會整屏顯示。jquery

<a href="#" data-role="button" data-inline="true">button</a>

按鈕組合框，能夠把一些具備相關功能的按鈕組合到一塊兒。我的感受太僵硬了，主要是很差調整，沒什麼太大用處。web

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button">button1</a>
    <a href="#" data-role="button">button2</a>
    <a href="#" data-role="button">button3</a>
</div>

後退按鈕，用data-rel實現。咱們前面使用data-rel實現過將頁面做爲彈出對話框。框架

<a href="#" data-role="button" data-rel="back">後退</a>

其餘控制按鈕自己樣式的屬性，conrners/mini/shadow。ide

<!-- 默認按鈕 -->
<a href="#" data-role="button" data-inline="true">button</a>
<!-- 直角按鈕 -->
<a href="#" data-role="button" data-inline="true" data-corners="false">button</a>
<!-- 小型按鈕 -->
<a href="#" data-role="button" data-inline="true" data-mini="true">button</a>
<!-- 無陰影按鈕 -->
<a href="#" data-role="button" data-inline="true" data-shadow="false">button</a>

jQuery Mobile的預置按鈕圖標，data-icon。工具

<a href="#" data-role="button" data-inline="true" data-icon="search">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-l">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-r">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="delete">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="info">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="home">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="back">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid">button</a>

預置的東西只是預置的，如何自定義使用data-icon，甚至怎樣去封裝一個icon到一個標籤裏纔是真正值得深思的，不然永遠只能跟着別人的屁股走，沒意思。post

圖標定位，data-iconpos。ui

<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="top">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="bottom">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="left">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="right">button</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid" data-iconpos="notext">button</a>

好像混進了什麼奇怪的東西，notext什麼鬼？

工具欄

標題欄/頁眉/header，還記得怎麼寫嗎？

<div data-role="header">
　　<h1>header</h1>
</div>

header內容許添加最多兩個按鈕，好比說兩個按鈕

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome</h1>
  <a href="#" data-role="button">Search</a>
</div>

好比說一個按鈕在左邊

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome</h1>
</div>

好比說一個按鈕在右邊

<div data-role="header">
  <h1>歡迎來到個人主頁</h1>
  <a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>

在JM的css文件中搜一把就能看到ui-btn-right是什麼鬼。

.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }

頁腳/footer

頁腳添加的按鈕個數是沒有限制的

<div data-role="footer" class="ui-btn">
    <a href="#" data-role="button">button</a>
    <a href="#" data-role="button">button</a>
    <a href="#" data-role="button">button</a>
</div>

至於這個ui-btn，咱們審查一下就知道了。主要是爲了去掉邊距而且將內容居中顯示。

.ui-btn {
    display: block;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin: .5em 0;
    padding: 0;
}

定位頁眉和頁腳，data-position

你可讓頁眉頁腳分別顯示在頁面的兩端，滑到頁面的頂點才能夠看到頁眉頁腳

<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

也可讓頁眉頁腳定位在你可視範圍內的上下兩端，不管你瀏覽到頁面的哪一個位置，頁眉頁腳老是出如今頁面的兩端

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

再設置一下data-fullscreen，開啓全屏看片模式，讓你擼出血

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

導航欄/navbar

能夠寫在頁眉中，也能夠寫在頁腳中，不過我特麼就沒怎麼看過誰會把導航欄寫在頁腳。

<div data-role="header">
    <h1>header</h1>
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active ui-state-persist">你是狗</a></li>
            <li><a href="#">你是狗</a></li>
            <li><a href="#">你是狗</a></li>
        </ul>
    </div>
</div>

ui-btn-active代碼以下

.ui-btn-active {
    border: 1px solid #2373a5;
    background: #5393c5;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    text-shadow: 0 1px 0 #3373a5;
    text-decoration: none;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
    background-image: -webkit-linear-gradient(#5393c5,#6facd5);
    background-image: -moz-linear-gradient(#5393c5,#6facd5);
    background-image: -ms-linear-gradient(#5393c5,#6facd5);
    background-image: -o-linear-gradient(#5393c5,#6facd5);
    background-image: linear-gradient(#5393c5,#6facd5);
    font-family: Helvetica,Arial,sans-serif;
}

而ui-state-persist則是在JS中做用

// Buttons in the navbar with ui-state-persist class should regain their active state before page show
$navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {
    $navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
});

最後說一點，navbar中的a標籤會自動轉換成button，下文中提到的list也是如此。

可摺疊的內容塊Collapsible

內容塊默認是摺疊的

<div data-role="collapsible">
    <h1>show</h1>
    <p>content</p>
</div>

也能夠改爲展開的

<div data-role="collapsible" data-collapsed="false">
    <h1>show</h1>
    <p>content</p>
</div>

能夠嵌套

<div data-role="collapsible">
    <h1>show1</h1>
    <p>content1</p>
    <div data-role="collapsible">
        <h1>show2</h1>
        <p>content2</p>
    </div>
</div>

還能夠寫成組合模式（組合模式下僅能打開一個內容塊）

<div data-role="collapsible-set">
    <div data-role="collapsible">
        <h1>show1</h1>
        <p>content1</p>
    </div>
    <div data-role="collapsible">
        <h1>show2</h1>
        <p>content2</p>
    </div>
</div>

列表

列表視圖/listview

<ul data-role="listview" data-inset="true">
  <li><a href="#">item1</a></li>
  <li><a href="#">item2</a></li>
  <li><a href="#">item3</a></li>
</ul>

有時候你的列表須要分隔符，因而

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">seprator</li>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li data-role="list-divider">seprator</li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
    <li data-role="list-divider">seprator</li>
    <li><a href="#">item5</a></li>
    <li><a href="#">item6</a></li>
</ul>

有時候要像通信錄那樣建立首字母大寫的分隔符

<ul data-role="listview" data-inset="true" data-autodividers="true">
    <li><a href="#">A</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">Z</a></li>
    <li><a href="#">W</a></li>
    <li><a href="#">D</a></li>
</ul>

再來個搜索框，修改一下placeholder，更像咱們平時用的手機應用了

<ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Search...">
    <li><a href="#">A</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">Z</a></li>
    <li><a href="#">W</a></li>
    <li><a href="#">D</a></li>
</ul>

加個計數泡沫，就像咱們平時看到的郵箱頁面那樣

<ul data-role="listview" data-inset="true">
    <li><a href="#">已發送<span class="ui-li-count">100</span></a></li>
    <li><a href="#">收件箱<span class="ui-li-count">100</span></a></li>
    <li><a href="#">垃圾箱<span class="ui-li-count">100</span></a></li>
</ul>

表單

表單必需要設置method和action

<form method="post" action="test.php">
</form>

表單內的元素必需要有惟一id，還要有一個label來匹配，注意label的for和input的id是對應的，不要搞成name了，特此區分開。

<form method="post" action="test.php">
    <label for="testName">Name</label>
    <input type="text" name="userName" id="testName" />
</form>

加上ui-hidden-accessible類能夠隱藏label

<label for="testName" class="ui-hidden-accessible">Name</label>

域容器/fieldcontain，處理表單在寬屏上的顯示，沒什麼卵用，不過我仍是記一下，萬一見鬼了呢！

<form method="post" action="test.php">
    <div data-role="fieldcontain">
        <label for="testName">Name</label>
        <input type="text" name="userName" id="testName" />
        <label for="testSex">Sex</label>
        <input type="text" name="userSex" id="testSex" />
    </div>
    <input type="submit" data-inline="true" value="submit" />
</form>

接下來是各類表單組件，主要分爲輸入/選擇/滑塊三種組件類型。

單行文本輸入之text

<label for="testName">Name</label>
<input type="text" name="userName" id="testName" />

單行文本輸入之date

<label for="testDate">Name</label>
<input type="date" name="userDate" id="testDate" />

單行文本輸入之email

<label for="testMail">Name</label>
<input type="email" name="userMail" id="testMail" />

多行文本/textarea

<label for="testContent">Name</label>
<textarea name="userContent" id="testContent" />

搜索框/search

<label for="mySearch">Search</label>
<input type="email" name="searchText" id="mySearch" />

單選/radio

首先你能夠有一個包裝的容器

<fieldset data-role="controlgroup">
</fieldset>

而後這個容器還能夠有個標題

<fieldset data-role="controlgroup">
  <legend>title</legend>
</fieldset>

最後把選項放進去,發現label是顯示在input上的，不要把value理解成label，單選框的name值是同樣的，不要搞混了。

<fieldset data-role="controlgroup">
    <legend>Gender</legend>
    <label for="male">男性</label>
    <input type="radio" name="gender" id="male" value="male">
    <label for="female">女性</label>
    <input type="radio" name="gender" id="female" value="female">    
</fieldset>

複選/checkbox 同理

<fieldset data-role="controlgroup">
    <legend>Color</legend>
    <label for="myRed">紅色</label>
    <input type="checkbox" name="color" id="myRed" value="reded">
    <label for="myYellow">黃色</label>
    <input type="checkbox" name="color" id="myYellow" value="yellow">
    <label for="myBlue">藍色</label>
    <input type="checkbox" name="color" id="myBlue" value="blue">    
    <label for="myGreen">綠色</label>
    <input type="checkbox" name="color" id="myGreen" value="green">    
</fieldset>

下拉選擇之select&option

<label for="day">日期</label>
<select name="myDay" id="day">
    <option value="mon">星期一</option>
    <option value="tue">星期二</option>
    <option value="wed">星期三</option>
    <option value="thu">星期四</option>
    <option value="fri">星期五</option>
    <option value="sat">星期六</option>
    <option value="sun">星期日</option>
</select>

也能夠像listview那樣插入分隔符

<label for="day">日期</label>
<select name="myDay" id="day">
    <optgroup id="weekdays">
        <option value="mon">星期一</option>
        <option value="tue">星期二</option>
        <option value="wed">星期三</option>
        <option value="thu">星期四</option>
        <option value="fri">星期五</option>
    </otpgroup>
    <otpgroup id="weekends">
        <option value="sat">星期六</option>
        <option value="sun">星期日</option>
    </otpgroup>
</select>

滑塊之range

<label for="myVolume">Volume</label>
<input type="range" name="volume" id="myVolume" value="50" min="0" max="100" data-highlight="true">

滑塊之slider

<select data-role="slider">
   <option value="on" selected>On</option>
   <option value="off">Off</option>
</select>

框架的組件是學不完的，學會如何封裝組件的功能和樣式纔是最關鍵的，只有這樣才能開發出屬於本身，能讓本身心儀/滿意/駕輕就熟/真正想要的組件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。