Проверьте указанный выше URL-адрес,
Вы можете найти такие параметры, как опция просмотра списка/сетки для отображения записей.
Могу ли я узнать, есть ли какой-либо open source script для этого, любой плагин jquery может это сделать, пожалуйста, дайте предложение. Я хочу сделать такую же работу на моем сайте.
Вам не нужен плагин; просто используйте JS для изменения класса контейнера и CSS для изменения вида в зависимости от класса.
Рабочий скрипт для объяснения: http://jsfiddle.net/akarun/LJf9p/
Примечание: JS-код может быть оптимизирован, Uhh, это просто образец!
Вот альтернативное решение. Он не требует каких-либо знаний 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 не очень сильно увеличивает размер файла. Таким образом, вы будете в порядке, если количество предметов, которые вы пытаетесь отобразить, действительно очень велико.