Question

我想制作一个基于javascript的网格/行视图表。
例如，在具有10个图片的页面中，用户能够将这些图片看作网格或将其视为行。因此，当他点击网格图标时，他将图片视为网格，否则他会将其视为行。
你能给我一些关于如何做的提示吗？

Answer 1

基本机制非常简单。只需在列表容器上切换一个类。在CSS中，为该类的后代设置一组规则，以更改浮点数或列或css表属性。还可以使用该主列表类来确定要在项目中显示的内容，或者您希望它们显示的方式

删除类后，它们将返回块元素并默认为css

简单示例：

HTML：

<ul id="itemList">
    <li>
         <h3 class="title">Item # 1</h3>
        <div class="details">Detals # 1</div>
    </li>
</ul>

CSS：

.grid li{ float:left; width:30%;margin-right:5px}
.grid .details{display:none}

JS：

$('button').click(function(){
    var txt=$(this).text();
    txt= txt=='Grid view'? 'List view' : 'Grid view';
    $(this).text( txt);
    $('#itemList').toggleClass('grid')
});

DEMO：http://jsfiddle.net/kzDNe/

使用jquery或javascript的网格/行视图

1 个答案: