按列表视图/网格视图显示记录

Question

Check it out

检查上面的url，

您可以找到用于显示记录的选项，如列表视图/网格视图选项。

我想知道有没有开放源码的脚本，任何jquery插件都可以做到，请给我建议。我想在我的网站上做同样的工作。

Answer 1

您不需要插件；只需使用JS更改容器的类，使用CSS更改依赖于类的视图。

小提琴解释：http://jsfiddle.net/akarun/LJf9p/

注意: JS代码可以优化，嗯，它只是个示例！

Answer 2

这是另一种解决方案。它不需要任何CSS知识。这个想法很简单，你的html文件中既有列表格式的内容也有网格格式的内容。最初，其中一个是使用style="display: none;"属性隐藏的。当用户单击"listview“或"gridview”超链接时，您将使用javascript隐藏一个链接而显示另一个链接。以下是jquery中的代码片段：

<script>
    $(document).ready(function(){
        $("#gridlink").click(function() {
            $("#divlist").hide();
            $("#divgrid").show();
        });
        $("#listlink").click(function() {
            $("#divlist").show();
            $("#divgrid").hide();
        });
    })
</script>

<a id="gridlink" href="#">Grid view</a> |
<a id="listlink" href="#">List view</a>

<div id="divgrid">Grid content here</div>
<div id="divlist" style="display:none">List content here</div>

这种方法并不像听起来那么昂贵。由于您使用的是相同的图像，因此它们只会被下载一次。gridview和listview的其余html不会增加文件大小。因此，除非您尝试显示的项目数量真的非常大，否则您将会很好。