jQueryMobile--柵格佈局

 

jQueryMobile是一個HTML組件庫，與jQueryUI和Bootstrap是一個級別的，但更偏向於移動App開發。

 

Page

Transition

Button 

Navbar

Collapsible

 

1.關於jqm的手冊

  (1)下載安裝包Demo —— 初期

  (2)完整的API列表(在線) —— 後期

http://api.jquerymobile.com/

 

 

2.關於jqm Page的切換——深刻探討

  (1)一個HTML聲明多個Page

不足：即便不顯示的Page，初始時也會被客戶端請求下來。

  (2)一個HTML只聲明一個Page，經過超連接進行頁面跳轉

1)jQM已經徹底改寫了超連接的默認行爲——把同步請求轉爲異步AJAX請求

2)異步請求獲得的HTML頁面，只會保留其中的第一個Page，添加到當前DOM樹上；其它全部內容所有刪除！

3)推薦一個項目中只有起始頁是完整的HTML頁面，其它被跳轉到的頁面都是HTML片斷——只包含一個PAGE的聲明。

4)注意：基於上面的緣由，jQM項目中全部的HTML頁面中元素的id應該是全局惟一的！

 

 

3.jQM提供的網格佈局系統——Grids

  (1)jqm提供的佈局系統沒有預約義margin或padding

  (2)jqm中的「行」分爲五種： 

默認                      一行中只有一列，列寬100%

.ui-grid-a               一行中有二列並等分，列寬50%

.ui-grid-b               一行中有三列並等分，列寬33%

.ui-grid-c               一行中有四列並等分，列寬25%

.ui-grid-d               一行中有五列並等分，列寬20%

  (3)jqm一行中列依次排序爲：

第一列：  .ui-block-a

第二列：  .ui-block-b

第三列：  .ui-block-c

第四列：  .ui-block-d

第五列：  .ui-block-e

  (4)jqm中全部的.ui-block-a必須重起一行。

  (5)jqm中一行默認只能等分爲N列，若想不等分，只能自定義樣式。

  (6)列中若放置<button>則默認填滿整列；如果超連接或INPUT按鈕，默認會添加左右margin:5px;

 

 

 

 

4.jQM提供的組件——分組和分隔——模擬實現Bootstrap中的Panel

  <div/h3  class="ui-bar"></div/h3>

  <div/p  class="ui-body"></div/p>

 

 

5.jQM提供的組件——Table——真正的響應式表格——重點

  真正的響應式表格有兩種：

   (1)迴流(reflow)模式的響應式表格

<table data-role="table" class="ui-responsive" data-mode="reflow">

</table>

屏幕夠寬時顯示效果與普通表格相同；不夠寬時每一行數據都會獨立顯示。

   (2)列切換(column toggle)模式的響應式表格

<table data-role="table" class="ui-responsive" data-mode="columntoggle">

<thead>

<tr>

<th>必須顯示的列</th>

<th data-priority="6">優先級最低(最早被隱藏)的列</th>

<th data-priority="5">優先級次低(次先被隱藏)的列</th>

...

<th data-priority="1">優先級最高(最後被隱藏)的列</th>

</tr>

</thead>

</table>

 

 

6.jQM提供的組件——ListView（列表組）——重點

  <ul/ol  data-role="listview">

<li></li>

  </ul/ol>

 

 

 

 

7.jQM提供的組件——表單組件

  TextInput組件：

單行文本輸入域

多行文本輸入域

下拉框

  特殊的Form控件：

滑塊控件：  <input type="range">

開關控件：  <select data-role="slider">

<option></option>

<option></option>

   </select>

單選按鈕組：<fieldset data-role="controlgroup" data-type="vertical/horizontal">

<legend>提示文字</legend>

<input type="radio">

<label></label>

                </fieldset>

複選按鈕組：<fieldset data-role="controlgroup" data-type="vertical/horizontal">

<legend>提示文字</legend>

<input type="checkbox">

<label></label>

                </fieldset>