jQ.Mobi是基于HTML5重寫的jQuery框架，由appMobi開發并且開源托管于github，在此有簡易的在線文檔提供查閱。 jQ.Mobi相比于其他方案具有體積小速度快的優勢。

jQ.Mobi由三個組件組成：

• 查詢（query）程序庫
• jQ.ui——為webkit內核瀏覽器提供的用戶界面程序庫
• jQ.Plugin——針對webkit瀏覽器的插件支持

下面主要講解下框架的UI部分。

1 基本頁面布局

上圖即為jQ.mobi提供的基本布局，從視覺上分為三個部分頭部、內容區域、底部，如下圖。

依照蘋果App界面設計規則：

• header頭部屬于導航欄固定于整個應用的頂部，主要是“你在這里”的標志（也可承載按鈕）。
• content內容區則用于承載應用的不同頁面。
• footer底部區則屬于標簽欄固定于整個應用的底部，用戶可以通過點擊不同的標簽到達不同的頁面。

應用的導航欄和標簽欄，通常都是固定頁面的頂部和底部，對于web app的布局中由于ios瀏覽器對于CSS的position:fixed支持很不好，因此通用的解決方案（包括jQ.mobi)都是使用絕對定位position:absolute。

對于jQ.mobi框架來說對應三部分的HTML代碼為:

<div id="jQUi"><div id="header"></div><div id="content"><div class="panel"></div><div class="panel"></div></div><div id="navbar"></div> </div>

2.jQ.Mobi中四種導航模型及其基本的HTML結構

蘋果app定義了三種典型的導航模式再加上現在廣為使用的“抽屜式”導航，四種導航模型在App設計中大量使用也覆蓋了大部分應用的需求。

2.1 標簽欄導航模型

上面的圖示則是典型的標簽欄導航，也是目前最為歡迎的導航模型。

標簽欄固定于應用的底部，點擊其中不同的標簽即可在不同的頁面中切換，這種導航方式適用于不同頁面形式不一的復雜的應用。?在jQ.Mobi中對應的HMTL代碼為：

<div id="navbar"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> </div>

受限于手機屏幕分辨率，標簽欄中標簽最好不要超過5個，如果標簽數量超過5個，每個標簽寬度過小，很可發生標簽不易點中的問題，影響體驗。 而如果頁面歸類超過5個，建議的處理方案是將最后一個標簽作為擴展標簽設為更多。

需要提示的是在jQ.Mobi框架中應用的所有頁面都在一個HTML文檔中，因此標簽欄導航模式中頁面切換實際上屬于錨點切換，其不同頁面的基本HTML代碼為：

<div id="content"><div class="panel"></div><div class="panel"></div><div class="panel"></div>… </div>

不同的頁面包含在不同的class為panel的div中。

2.2 樹形結構導航模型

上圖即為典型的樹形結構導航模型，樹形結構適用于有大量分類項目的頁面，其實際為大量的列表項。對應的HTML代碼為：

<ul><li> </li><li> </li><li> </li>…</ul>

2.3 平鋪頁面導航模型

上圖即為平鋪頁面導航模型的基本結構，平鋪頁面導航模型的應用中最為經典的例子便是iphone中自帶的天氣應用，通常此種模型使用較為簡單的應用，功能較為單一且沒有滾屏。

在jQ.Mobi框架中可以使carousel插件實現，其HTML代碼也較為簡單：

<div id="carousel"><div> </div><div> </div><div> </div>…</div>

2.4 “抽屜式”導航模型

上圖為“抽屜式”導航模型的基本結構，抽屜式導航最為典型的應用為私密社交應用path，此種導航的核心思想為”隱藏“，更加能突出應用的核型功能，而將其他次要的功能頁面（譬如設置頁面）路徑隱藏。此種導航模型使用核心功能單一，不戶無需頻繁切換頁面的應用。?在jQ.Mobi框架中使用此類導航也十分的方面，其HTML代碼為：

<div id="jQUi"><div id="header" class="haMenu"></div><div id="content" class="haMenu" ><div class="panel"></div><div class="panel"></div>…</div><div id="navbar" class="haMenu"></div><div id="menu"></div></div>

而對于實際的應用可以看出大多數的應用并不是使用單一的導航模型，而是各種導航模型混用，至于選擇那種導航模型作為主導航，則需根據應用的功能，使用場景以及用戶群體等因素綜合考慮。

3 jQ.Mobi框架細節

3.1 框架基本布局

之前提到過jQ.Mobi框架的頁面都在一個HTML的文檔中，除去導航欄（#header）和標簽欄（#navbar）之外的內容頁面都存在id為content的div當中，三者都是絕對定位。 其HTML和對應的CSS為：

<!---HTML code---> <div id="jQUi"><div id="header"></div><div id="content"></div><div id="navbar"></div> </div>

?

/*---CSS code---*/ #header {height : 48px; }#content {position:absolute;top:48px;bottom:62px;left:0;right:0;z-index:180; }#navbar {position:absolute;bottom:0;left:0;right:0;height:62px;z-index:1000; }

上面的即是框架最基本的布局方式，#header，#navbar固定在屏幕的上下邊，相應#content的盒子占據了其他區域。值得注意的是#navbar的z-index遠高于#content的z-index。

3.2 框架頁面切換

框架的切換頁面都包裹在class為panel的div中。

<div id="content"><div id="page1" class="panel" title=“xxx" selected="true"></div><div id="page2"class="panel" title=“xxx"></div><div id="page3" class="panel" title=“xxx"></div> </div><div id="navbar"><a href="#page1">XXX</a><a href="#page2">XXX</a><a href="#page3">XXX</a> </div>

?

/*---panel style---*/.panel {display:none;position:absolute;width:100%;height:100%;top:0;left:0;z-index:180; }

切換頁面都在同一個HTML文檔中，panel頁面默認設置為隱藏（display:none）使用錨鏈接跳轉，跳轉的同時需要顯示頁面的display屬性設為block，同時給需要隱藏的頁面一個向左移動的動畫，加之panel頁面使用絕對定位，寬度高度均鋪滿content，這樣的跳轉就達到了native應用頁面切換的效果。

而在頁面切換時，另外的動作就是將panel頁面中已經定義的title屬性中的值顯示到導航中，并根據jQ.Mobi定義的屬性data-tab的值來選中標簽欄對應的標簽。

3.3 panel屬性介紹

正如前面所言應用的切換頁面都包裹在class為panel的div中，因此jQ.Mobi預先定義了多個屬性來應對不同的需求。

• selected="true"?當panel設置此屬性后，在應用打開之后默認加載該頁面。
• modal="true"?將panel轉變為模態視圖，框架中模態視圖默認鋪滿整個屏幕（可在CSS中更改）。
• data-header="id"?設置之后，在切換到該panel的時候將會加載對應id的自定義header標簽。
• data-footer="id"?設置之后，在切換到該panel的時候將會加載對應id的自定義footer標簽。
• data-nav="id"?設置之后，在切換到該panel的時候將會加載對應id的自定義nav標簽。
• data-defer="filename.html"?設置此屬性之后該panel會加載遠程的頁面或者url。若想將內容分屬到不同的文件，該屬性會很有用。在所有的文件都異步加載之后jq.ui.ready才會起作用。
• data-tab="anchor_id"?正如之前提到的，設置該屬性之后，在panel加載的時候將標簽欄中對應標簽選中。而當你通過js而不是單擊標簽欄的標簽來加載panel的時候此屬性同樣有用。
• data-load="func_name"?設置之后，panel加載之后會運行該名稱的js函數。div作為一個參數傳遞，因此你可以使用一個函數來是的其他的屬性起作用。
• data-unload="func_name"?與data-load相似，只是在頁面關閉的時候才運行js函數。
• CSS屬性 overflow:hidden?設置之后，會禁止panel頁面的自動滾動。當panel頁面需要自動擴展的時候該設置很有用處，例如之前提到Carousel應用或者地圖類應用。

jQ.Mobi允許你自定義屬性，更為詳細的介紹可以查看其在線文檔。

3.4 panel頁面滾動實現方式。

因為ios5之前版本的webview原生不支持瀏覽器滾動，因此對于panel頁面的滾動就不能靠CSS中的overflow屬性來實現了。

目前的滾動替代方案基本是靠CSS動畫來實現，jQ.Mobi中使用3D動畫來實現，因為3D動畫能夠使用瀏覽器的硬件加速，可以讓滾動更加流暢，效果也直逼native應用。

框架在panel頁面允許滾動的情況下，將panel作為滾動的容器（container），然后將panel元素的所有子元素content，再包裹一個div標簽作為viewport，在這一層上面使用3D transform中的translate3d屬性來達到滾動的效果，具體通過改變translate3d的Y值也就是縱軸的值來實現滾動。

/*--對應的css寫法---*/ transform: translate3d(0, 100px, 0);

?

轉載于:https://www.cnblogs.com/zhepama/archive/2013/05/13/3074968.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jQ.Mobi框架介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。