儀表板導航與jQuery Mobile的

Question

我想要實現使用jQuery Mobile的移動Web應用程序儀表板風格的導航：http://mobile-patterns.com/dashboard-navigation

是否有任何有用的模板還是不錯的方法來做到這一點？當然，我可以構建一個基於網格的內容頁面，其中包含圖標和鏈接。但是，由於儀表板導航的普及，我期待着一個更簡單的解決方案。

在此先感謝

Answer 1

This article有關使自定義圖標在jQuery Mobile的使用會談。我將遵循爲創建我的圖標，然後參照jqmobile's navbar documentation的說明，如何建立一個3×3列的列表：在同一篇文章中進一步下跌

<div data-role="navbar"> 
    <ul> 
     <li><a href="a.html" class="ui-btn-active">One</a></li> 
     <li><a href="a.html" class="ui-btn-active">Two</a></li> 
     <li><a href="a.html" class="ui-btn-active">Three</a></li> 
    </ul> 
</div> 

然後是，使用第三方圖標集部分將解釋如何添加圖標。因爲你不會希望你的圖標背後的默認框，你可以添加另一個CSS類的div容器，您可以覆蓋jquerymobile的「導航欄」級和隱藏對話框：

<div data-role="navbar hidebox"> 

注：當我正在使用jquery mobile，在jquerymobile css導入後導入我自己的自定義樣式表。這讓我重寫jquery mobile注入到我的代碼中的類。這是我會重寫'hidebox'類的地方。

另外，this may help with building a 3 x 3 squared grid，因爲這個開發者正在做類似的事情（我知道，開發人員正在使用Sencha Touch，但圍繞它的討論可能會有所幫助）。