CHAPTER 4 - jQuery Mobile 元件
介紹 jQuery Mobile 元件 ( 以下簡稱 jqm 元件 ) 之前,一定得先提一下 jQuery Mobile ,jQuery Mobile 是一個 jQuery 的 framework,主要用來創建行動網頁使用,目前的版本是 1.4.5 版,相較於之前的版本,1.4 版開始修正了很多原本的架構,所以速度變快非常多。
如果單純用在開發行動網頁,或是以 web view 為主的 App,jQuery Mobile 是非常的方便好用的一個 framework,EZoApp 原生內建了 jQuery Mobile,也因此 jqm 元件也是必備的,更特別的一點,因為 EZoApp 採用了標準的開發語法,如果內建的元件找不到我們想要的,可以直接上 jQuery Mobile 的官網查詢 ( http://demos.jquerymobile.com/1.4.5/ ) 直接把程式碼貼上就可以產生元件,相當的方便!
這篇開始的連續幾篇,會從 jqm 元件開始,介紹 EZoApp 所有的元件,至少在大家在學會使用元件之後,就已經可以快速開發標準的界面囉!( 之後會有章節介紹如何撰寫 )
EZoApp jqm 元件清單列表 ( 點選看詳細介紹 ) :
1. header
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5010871373791232
<div data-role="header" data-position="fixed">
<h3>Header</h3>
</div>
這是每個頁面最上方的檔頭,在 App 的設計裡頭主要會放置該頁面的標題,或是左右放上兩顆常用的按鈕的按鈕,若使用 EZoApp,也可以直接點選 header 的文字進行修改,或在屬性面板做相對應的調整。
2. footer
範例:http://jqmdesigner.appspot.com/designer.html#&ref=6136771280633856
<div data-role="footer" data-position="fixed">
<h3>Footer</h3>
</div>
footer 和 header 類似,基本上也是 App 的畫面必備的,也是可以直接點選文字修改,或在屬性面板上坐相對應的調整。
3. Grid
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5941219272163328
<div class="ui-grid-b" style="height:95px">
<div class="ui-block-a" style="height:100%"></div>
<div class="ui-block-b" style="height:100%"></div>
<div class="ui-block-c" style="height:100%"></div>
</div>
jqm 元件最特別的元素,看起來像表格卻又不是表格,純粹利用 div + class 產生類似表格的框架,裡頭比較需要注意的,就是欄位的數量是由 a、b、c、d、e 來定義,外層是 ui-grid-a,表示內含 ui-block-a 和 ui-block-b,外層如果是 ui-grid-d ,就表示內含了 abcde 五個,而最多一列只能有五欄,再多的話就會變成兩欄一列的排列方式。
<div class="ui-grid-d" style="height:95px">
<div class="ui-block-a" style="height:100%"></div>
<div class="ui-block-b" style="height:100%"></div>
<div class="ui-block-c" style="height:100%"></div>
<div class="ui-block-d" style="height:100%"></div>
<div class="ui-block-e" style="height:100%"></div>
</div>
4. navbar
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5993873960599552
<div data-role="navbar">
<ul>
<li>
<a>One</a>
</li>
<li>
<a>Two</a>
</li>
</ul>
</div>
App 裡頭常見的按鈕選單,主要由 li 構成,使用 EZoApp 的話同樣可以直接點選編輯文字,或是由屬性面板調控,與 grid 類似的地方,按鈕一列不能超過五個,多的話就會變成兩個一列囉!
5. tabbar
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5573821327212544
<div data-position="fixed" data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-icon="home">BtnA</a>
</li>
<li>
<a data-icon="star">BtnB</a>
</li>
</ul>
</div>
</div>
把 footer 和 navbar 結合的置底選單,這類型的選單在 App 也是屢見不鮮,控制方式也如同 navbar 和 footer 一般。
6. gk-text
範例:http://jqmdesigner.appspot.com/designer.html#&ref=6596240439508992
<h1 is="gk-text">Text</h1>
文字的元件,使用 EZoApp 也可以直接藉由點選或屬性面板調整。
7. text-input
範例:http://jqmdesigner.appspot.com/designer.html#&ref=6025110184001536
<div class="ui-field-contain">
<label for="gk-113ZKMM">Title</label>
<input type="text" name id="gk-113ZKMM">
</div>
這只是一個單純的文字輸入框,比較特別的是加上了一些 CSS 的效果,如果不需要外面的 label 的話,直接拿掉 label 也是沒問題的,甚至你也可以用滑鼠直接把輸入框拖拉到外面,而且同時可以利用屬性面板對輸入框做設定,例如把 clearBtn 設為 true,輸入的時候後面就會出現 x 的符號,點選就可以刪除輸入的內容。
8. range-input
範例:http://jqmdesigner.appspot.com/designer.html#&ref=6604113651433472
<div class="ui-field-contain">
<label for="gk-1138IX0">Title</label>
<input id="gk-1138IX0" value="50" min="0" max="100" type="range">
</div>
調整數值的滑動桿,因為在手機或平板的操作上,對於調整數值遠不如電腦上操作來得方便,因此很多時候我們必須使用這種便於調整的元件,而這個 jqm range 元件,你可以直接用屬性面板設定最大值和最小值以及初始值,還可以設定滑動的間隔單位要多少、左側是否要有顏色...等。
9. search-input
範例:http://jqmdesigner.appspot.com/designer.html#&ref=6519575004839936
<div class="ui-field-contain">
<label for="gk-113fglk">Title</label>
<input type="search" name id="gk-113fglk">
</div>
搜尋的輸入欄位,基本上與 text-input 大同小異,差別在於前面多了一個搜尋的 icon,然後程式碼的 type 不是 text 也不是 number 或 password,而是 search。
10. date-input
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5285372128919552
<div class="ui-field-contain">
<label for="gk-113BeiH">Date1</label>
<input id="gk-113BeiH" type="date">
</div>
日期輸入元件,你千萬不要小看這個元件,不要以為他長得跟上面的 input 很像 ( 不過說實在是真的很像,差別只在 type="date" ) 但如果我們預覽的話,或是用手機預覽,就會發現它是可以直接叫出日曆,或是手機的滾動選擇日曆,相當的方便噢!
11. time-input
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5462160230580224
<div class="ui-field-contain">
<label for="gk-113WHfb">Date1</label>
<input id="gk-113WHfb" type="time">
</div>
與 date-input 相同,可以讓使用者直接調整時間,不需要自己手動輸入的元件。
12. collapsibleset
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5430924007178240
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Section</h3>
這是隱藏的內容
這是隱藏的內容
</div>
</div>
可以把一些內容隱藏起來,點選 + 號可以打開,點選 - 可以收起來。
13. icon
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5940879567093760
<div is="icon" style="width:85px; height:90px; position:relative">
<span class="ui-li-count" style="position:absolute; display:none; z-index:1; right:0; top:6px;"></span>
<a href="#" class="ui-btn ui-mini ui-corner-all ui-shadow" style="display:block;margin:5px;height:50%;background-image: url(圖片網址); background-size: 95% 80%; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></a>
<div style="text-align:center;">Icon</div>
</div>
利用 CSS 背景圖片的方式作出類似 App 裡頭可以點選的圖示。
14. button
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5891616426426368
<a class="ui-btn">Button</a>
由程式碼可以看到,按鈕其實就是一個加上了 ui-btn 樣式的超連結,也因為如此,你也可以自己修改樣式,就可以變成客製化的按鈕。
15. listview
範例:http://jqmdesigner.appspot.com/designer.html#&ref=4833352993472512
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Divider</li>
<li>
<a href="#">
<img src="清單圖片網址" class="ui-li-icon">Item
</a>
</li>
</ul>
jqm 的 listview 元件雖然就是清單,但卻已經幫我們區分好了標題與內容清單,更特別的是,裡頭還提供了篩選 ( filter ) 的功能,如果清單的內容很多,直接在 filter 的搜尋框輸入文字搜尋就可以篩選出特定的內容囉!相當的方便!
16. controlgroup-radio
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5816401080090624
<fieldset data-role="controlgroup" data-type="vertical">
<legend>Radio Group:</legend>
<input id="gk-104dlEd" name="gk-104dlEd" type="radio" data-iconpos="left">
<label for="gk-104dlEd">Radio</label>
</fieldset>
單選的按鈕,你可以藉由點選按鈕之後右上方出現的 + 號新增,不過新增的時候,name 會自動產生,也因為兩個單選按鈕的 name 不同,會導致無法單選,這時候只需要把 name 改為相同就可以囉!
<fieldset data-role="controlgroup" data-type="vertical">
<legend>Radio Group:</legend>
<input id="gk-104dlEd" name="aa" type="radio" data-iconpos="left">
<label for="gk-104dlEd">Radio1</label>
<input id="gk-104PBuC" name="aa" type="radio" data-iconpos="left">
<label for="gk-104PBuC">Radio2</label>
</fieldset>
而身為 jqm 元件的 radio button,一定也會有一些與眾不同的功能,我們可以藉由屬性面板調整 iconPos 就可以控制 radio button 的位置。
而且除了基本的圓圈圈點選外,因為 jqm 元件的誕生目的是為了行動裝置,所以也有提供了比較適合行動裝置的點選方式,我們只要點選外層的 fieldset,並將 type 設為 horizontal,就可以改變 radio button 的呈現方式噢!
17. controlgroup-checkbox
範例:http://jqmdesigner.appspot.com/designer.html#&ref=4758472788803584
<fieldset data-role="controlgroup" data-type="vertical">
<legend>Radio Group:</legend>
<input id="gk-104dlEd" name="aa" type="radio" data-iconpos="left">
<label for="gk-104dlEd">Radio1</label>
<input id="gk-104PBuC" name="aa" type="radio" data-iconpos="left">
<label for="gk-104PBuC">Radio2</label>
</fieldset>
與單選的 radio button 互為兄弟的 checkbox 是負責多選,與 radio button 的設定幾乎一模一樣,也可以點選外層的 fieldset,並將 type 設為 horizontal,就可以改變 checkbox 的呈現方式。
18. flipswitch
範例:http://jqmdesigner.appspot.com/designer.html#&ref=4926207904710656
<div class="ui-field-contain">
<label for="gk-104rgdq">Title</label>
<input type="checkbox" data-role="flipswitch" id="gk-104rgdq">
</div>
flipswitch 就是我們在手機「設定」裡頭很常見的開關,其實它也是 checkbox 的一種變形,可以看到程式碼裡頭 type 就是 checkbox,不過裡頭多了一個 data-role=”filpswitch”,所以它就會變成開關的形式呈現。
19. selectmenu
範例:http://jqmdesigner.appspot.com/designer.html#&ref=5328381126115328
<div class="ui-field-contain">
<label for="gk-104mhHQ">Title</label>
<select id="gk-104mhHQ">
<option value="option1">Option 1</option>
</select>
</div>
下拉選擇清單的元件,其實就是 select 和 option 的組合,不過必須要透過直接添加 option 的方式才能增加額外的選項。
<div class="ui-field-contain">
<label for="gk-104mhHQ">Title</label>
<select id="gk-104mhHQ">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
</div>
20. textarea-input
範例:http://jqmdesigner.appspot.com/designer.html#&ref=6346022087294976
<div class="ui-field-contain">
<label for="gk-1043Poc" class>Title</label>
<textarea id="gk-1043Poc" name></textarea>
</div>
讓使用者可以輸入多行文字的元件。
21. textarea-input
範例:http://jqmdesigner.appspot.com/designer.html#&ref=6031064753504256
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow gk-decorate" id="gk-104pqI6" is="jqm-table">
<thead>
<tr>
<th data-priority="1">項目</th>
<th data-priority="1">Year</th>
<th data-priority="1">Month</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>2011</td>
<td>10</td>
</tr>
<tr>
<th>2</th>
<td>2012</td>
<td>11</td>
</tr>
</tbody>
</table>
表格元件,不過這不是一個普通的表格元件,如果仔細看,可以發現表格的右上方有一顆按鈕,點選之後會出現篩選欄位的選項,這也是一般的表格所辦不到的,如果不需要,就在屬性面板裡頭把 data-mode 由 columntoggle 改為 Reflow 即可。