使用jQuery Mobile进行仪表板导航

Question

我想使用jQuery Mobile在移动Web应用程序中实现仪表板式导航：http://mobile-patterns.com/dashboard-navigation

是否有任何有用的模板或好方法？当然，我可以构建一个基于网格的内容页面，其中包含图标和链接。但是由于仪表板导航的普及，我期待着一个更简单的解决方案。

提前致谢

Answer 1

This article讨论了如何在jquery mobile中使用自定义图标。我会按照这个来创建我的图标，然后参考jqmobile's navbar documentation获取有关如何构建3 x 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>

然后在同一篇文章的下面是使用第三方图标集部分，它将解释如何添加图标。由于您不需要图标后面的默认框，您可以在容器div中添加另一个css类，您可以覆盖jquerymobile的“navbar”类并隐藏框：

<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，但围绕它的讨论可能有所帮助）。