使用 jQuery 切换列表/网格视图

Question

在我的一个网站页面上，我在表格元素上显示数据，但我想添加一个按钮让用户选择是否要将数据视为列表（表格）或网格（ul>li>图）。最好的方法是什么？

                <table>
                    <tr>
                        <td>datas 1</td>
                        <td><img src="image1.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 2</td>
                        <td><img src="image2.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 3</td>
                        <td><img src="image3.jpg"></td>
                    </tr>
                    <tr>
                        <td>datas 4</td>
                        <td><img src="image4.jpg"></td>
                    </tr>
                </table>

如果我们使用切换按钮进行切换：

                 <ul>
                    <li><img src="image1.jpg"></li>
                    <li><img src="image2.jpg"></li>
                    <li><img src="image3.jpg"></li>
                    <li><img src="image4.jpg"></li>
                </ul>

我必须使用 jQuery 或 CSS 来实现吗？

我尝试的是在页面完成加载时创建一个 div 元素，并通过在 table 元素中获取 img 属性来创建一个列表。然后我有我的桌子和我的新 div（带有 diplay:none）。当用户单击按钮时，我在表格上显示无，并在我的 div 上显示块。这是正确的方法吗？

我认为这不是很“酷”，因为我有重复的内容：

<table>...</table>
<div style="display:none">...</div>

你怎么看？

Answer 1

在这种情况下，我会根据所说的“视图”（列表/网格）以不同的方式使用相同的标记和样式。根据用户的选择，您可以相应地设置每个样式。

（这里的解决方案可以很简单，当用户与所述按钮交互时，将'list/grid'上的类名添加到页面内的body标签！）

虽然已经填充了您的图像，但我不会隐藏该数据，因为它已经填充了，我只会最小化所述图像并将其转换为缩略图。 （在浏览器渲染图像时没有用，您只需附加 style='display:none;'）

更新：

刚刚参考了 craigslist 以了解他们如何处理这种情况。他们实际上在其中使用“显示：无”来设置所述图像的样式。因此，取决于您的客户/项目等。 display:none 样式由您决定！

希望这会有所帮助！

Answer 2

创建两个类：“grid”和“list”并使用 ul 标记。对于网格创建 css 表。

查看 jsFiddle 中的示例代码：http://jsfiddle.net/maximkou/9CwXh/6/

HTML：

<ul class="grid data-table">
    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
        </span>
    </li>
    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
            </span>
    </li>
    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
            </span>
    </li>

    <li>
        <span class="caption">Caption</span>
        <span class="content">
            <img src="image1.jpg">
            </span>
    </li>
</ul>

<a href="" class="toggleView">Toggle view to List</a>  

JS：

$('.toggleView').bind('click', function(e){
    e.preventDefault();
    var text = 'Toggle view to ';
    if ($('.data-table').hasClass('grid')){
        $(this).html(text + 'Grid');
        $('.data-table').removeClass('grid').addClass('list');
    } else {
        $(this).html(text + 'List');
        $('.data-table').removeClass('list').addClass('grid');
    }
});

CSS：

.grid {
    display: table;
    list-style-type: none;
}
.grid li {
    display: table-row;
}
.grid li span {
    width: 200px;
    display: table-cell;
}

.list li .caption {
    display: none;
}

Answer 3

我最近需要做同样的事情。和你一样，我希望在交换周围的 html 时保留内容。 CSS 主要用于设置表格/网格的样式。这里真正的明星是 jQuery。

看看： http://jsfiddle.net/rymill2/R3J5m/

HTML

<div class="row"> 
    <a class="button-table" data-target="table"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Table"></a>
    <a class="button-grid" data-target="grid"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Grid"></a>
</div>
<div class="content">
    <table>
        <tr class="table-head">
            <th>Title</th>
            <th>Date</th>
            <th>Info</th>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
        <tr class="result">
            <div class="settings"></div> <a class="link" href=""></a>

            <td class="title">Class Title</td>
            <td class="row">Item Details</td>
            <td class="row">Item Details</td>
        </tr>
    </table>
</div>

CSS

.table-head, div, a, p, span {
    box-sizing:border-box !important;
}
.columns, .column {
    float:left;
    position:relative;
}
.h-100 {
    min-height:110px;
}
.three {
    width:25%;
}
a:hover {
    cursor:pointer;
    background:#e9e9e9;
}
a.toggle-table, a.toggle-grid {
    position:relative;
    float:left;
    margin-right:6px;
    font-size:20px;
    padding:8px;
}
.settings, .link {
    display:none;
}
.grid {
    overflow:auto;
}
.grid .result {
    padding:2%;
    background:#e9e9e9;
    border:1px solid #333;
}
.grid .result:first-child {
    display:none;
}
.grid .result .title, .grid.result .row, .grid .result .link {
    position:relative;
    float:left;
    width:100%;
}
.grid .result .title {
    border-bottom:1px solid yellow;
    padding-bottom:2px;
    margin-bottom:2px;
    color:#282828;
    font-size:16px;
    font-weight:bold;
}
.grid .result .row {
    color:#666;
    font-size:10px;
}
.table-head {
    background:#333;
    color:#fff;
    text-align:left;
    font-size:12px;
}

JS

$('.button-table').click(function() {
$('.grid').replaceWith(function() {
    var html = '';
    $('div:first', this).each(function() {
        html += '<tr class="table-head">';
        $('div', this).each(function() {
            html += '<th>' + $(this).html() + '</th>';
        });
        html += '</tr>';
    });   
    $('div:not(:first)', this).each(function() {
        var innerHtml = '';
        $('div', this).each(function() {
            innerHtml += '<td>' + $(this).html() + '</td>';
        });
        if (innerHtml != '') {
        html += '<tr>' + innerHtml + '</tr>';
        }
    });
    return '<table>' + html + '</table>'; 
});
});

$('.button-grid').click(function() {
$('table').replaceWith(function() {
    var html = '';      
    $('tr', this).each(function() {
        html += '<div class="result three columns h-100">';
        $('th', this).each(function() {
            html += '<div>' + $(this).html() + '</div>';
        });
        $('td', this).each(function() {
            html += '<div>' + $(this).html() + '</div>';
        });
        html += '</div>';
    });
    return '<div class="grid">' + html + '</div>';
});
});