jquery移动网格视图和列表视图在同一页面上

【问题标题】：jquery mobile grid view and list view on the same pagejquery移动网格视图和列表视图在同一页面上
【发布时间】：2012-12-28 14:54:35
【问题描述】：

jQuery Mobile 的新手。我有一个股票清单，我希望能够在同一页面上更改视图。所以我有我的列表，然后我希望能够在页面顶部有两个按钮：

列表视图（默认）
网格视图

然后我可以根据单击的按钮更改库存视图。我有一个工作示例：

这里是an example URL 查看预览并点击“投资组合”

这是怎么做到的？

【问题讨论】：

标签： jquery html listview jquery-mobile gridview

【解决方案1】：

我认为您可以通过最简单的方式做到这一点。只需在您的站点中添加列表视图和网格视图并 toggle 即可。

【讨论】：

【解决方案2】：

试试这个：

CSS

#Container ul { list-style: none; alignment-adjust:central; }
#Container .list li { //your list specs }
#Container .grid li { //your grid specs }

HTML

<div data-role="content" id="Container">
    <ul data-role="listview" class="list">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
    </ul>
    <ul data-role="listview" class="grid">
        <li>grid1</li>
        <li>grid2</li>
        <li>grid3</li>
        <li>grid4</li>
    </ul>
</div>

【讨论】：