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 元件清單列表 ( 點選看詳細介紹 ) :

header footer Grid navbar tabbar
gk-text text-input range-input search-input date-input
time-input collapsibleset icon button listview
controlgroup-radio controlgroup-checkbox flipswitch selectmenu textarea-input
controlgroup-radio




1. header

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例:http://jqmdesigner.appspot.com/designer.html#&ref=5010871373791232

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

這是每個頁面最上方的檔頭,在 App 的設計裡頭主要會放置該頁面的標題,或是左右放上兩顆常用的按鈕的按鈕,若使用 EZoApp,也可以直接點選 header 的文字進行修改,或在屬性面板做相對應的調整。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例:http://jqmdesigner.appspot.com/designer.html#&ref=6136771280633856

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

footer 和 header 類似,基本上也是 App 的畫面必備的,也是可以直接點選文字修改,或在屬性面板上坐相對應的調整。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



3. Grid

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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>

CHAPTER 4 -  EZoApp jQuery Mobile 元件



4. navbar

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 類似的地方,按鈕一列不能超過五個,多的話就會變成兩個一列囉!

CHAPTER 4 -  EZoApp jQuery Mobile 元件



5. tabbar

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 一般。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



6. gk-text

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例:http://jqmdesigner.appspot.com/designer.html#&ref=6596240439508992

  <h1 is="gk-text">Text</h1>

文字的元件,使用 EZoApp 也可以直接藉由點選或屬性面板調整。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



7. text-input

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 的符號,點選就可以刪除輸入的內容。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



8. range-input

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 元件,你可以直接用屬性面板設定最大值和最小值以及初始值,還可以設定滑動的間隔單位要多少、左側是否要有顏色...等。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



9. search-input

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



10. date-input

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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" ) 但如果我們預覽的話,或是用手機預覽,就會發現它是可以直接叫出日曆,或是手機的滾動選擇日曆,相當的方便噢!

CHAPTER 4 -  EZoApp jQuery Mobile 元件



11. time-input

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 相同,可以讓使用者直接調整時間,不需要自己手動輸入的元件。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



12. collapsibleset

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例:http://jqmdesigner.appspot.com/designer.html#&ref=5430924007178240

<div data-role="collapsibleset">
  <div data-role="collapsible">
    <h3>Section</h3>
    這是隱藏的內容
    這是隱藏的內容
  </div>
</div>

可以把一些內容隱藏起來,點選 + 號可以打開,點選 - 可以收起來。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



13. icon

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 裡頭可以點選的圖示。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



14. button

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例:http://jqmdesigner.appspot.com/designer.html#&ref=5891616426426368

<a class="ui-btn">Button</a>

由程式碼可以看到,按鈕其實就是一個加上了 ui-btn 樣式的超連結,也因為如此,你也可以自己修改樣式,就可以變成客製化的按鈕。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



15. listview

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 的搜尋框輸入文字搜尋就可以篩選出特定的內容囉!相當的方便!

CHAPTER 4 -  EZoApp jQuery Mobile 元件



16. controlgroup-radio

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 的呈現方式噢!

CHAPTER 4 -  EZoApp jQuery Mobile 元件



17. controlgroup-checkbox

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 的呈現方式。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



18. flipswitch

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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”,所以它就會變成開關的形式呈現。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



19. selectmenu

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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>

CHAPTER 4 -  EZoApp jQuery Mobile 元件



20. textarea-input

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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>

讓使用者可以輸入多行文字的元件。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



21. textarea-input

CHAPTER 4 -  EZoApp jQuery Mobile 元件

範例: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 即可。

CHAPTER 4 -  EZoApp jQuery Mobile 元件



繼續閱讀 Chapter 5 - jQuery Mobile 隱藏版元件
回文章目錄

results matching ""

    No results matching ""