使用jQuery Mobile进行仪表板导航

Question

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

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

提前致谢

Answer 1

本文讨论如何在jquery mobile中使用自定义图标.我会按照这个来创建我的图标,然后参考jqmobile的navbar文档以获取有关如何构建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'类的地方.

此外,这可能与建立一个3×3平方格帮助,因为这开发商在做类似的事情(我知道,开发人员正在使用煎茶触摸,但围绕它的讨论可能会帮助).