使用 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>

然后在同一篇文章的更下方，使用 3rd 方图标集部分将解释如何添加图标。由于您不希望图标后面出现默认框，因此您可以将另一个 css 类添加到您的容器 div 中，您可以在其中覆盖 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，但围绕它的讨论可能会有所帮助）。