Question

Check it out

检查以上网址

您可以找到列表视图/网格视图选项等选项来显示记录。

我可以知道是否有任何开源脚本，任何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不会增加文件大小。所以你会没事的，除非你试图展示的项目数量确实很大。

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

2 个答案: