Отображение записей по списку/представлению сетки

Проверьте указанный выше URL-адрес,

Вы можете найти такие параметры, как опция просмотра списка/сетки для отображения записей.

Могу ли я узнать, есть ли какой-либо open source script для этого, любой плагин jquery может это сделать, пожалуйста, дайте предложение. Я хочу сделать такую же работу на моем сайте.

Ответ 1

Вам не нужен плагин; просто используйте JS для изменения класса контейнера и CSS для изменения вида в зависимости от класса.

Рабочий скрипт для объяснения: http://jsfiddle.net/akarun/LJf9p/

Примечание: JS-код может быть оптимизирован, Uhh, это просто образец!

Ответ 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>

Этот подход не так дорог, как может показаться. Поскольку вы используете одни и те же изображения, они будут загружаться только один раз. Остальная часть html для gridview и listview не очень сильно увеличивает размер файла. Таким образом, вы будете в порядке, если количество предметов, которые вы пытаетесь отобразить, действительно очень велико.