javascript - 如何在 php html css js 中创建网格视图/列表视图?
问题描述
我正在尝试将 gridview/listview 选项放在我的 Web 应用程序的搜索页面中。以下代码没有给出预期的结果。无论我单击网格还是列表视图,搜索结果都是网格视图。当我单击任一选项时,Web 链接的末尾都有一个“#”。无论哪种方式,视图都不会改变。
这是代码。
搜索.php
<div class="container">
<div class="well well-lg">
<strong>Display</strong>
<div class="btn-group">
<a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list"></span> List</a>
<a href="#" id="grid" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th"></span>Grid</a>
</div>
</div>
</div>
<div id = "products" class="row list-group">
<?php
for ($i = 0; $i < count($searchData); $i++) {
$year = Schema::getyear($searchData[$i]->getyearId())->getyear();
$course = Schema::getCourseFromId($searchData[$i]->getId());
$src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';
echo <<<HTML
<div class="item col-lg-6 col-md-6 mb-4" >
<div class = "thumbnail">
<div class="card h-100">
<a href="video.php?video={$searchData[$i]->getVideoId()}"><img class="card-img-top" src={$src} alt=""></a>
<div class="card-body">
<h4 class="card-title">{$searchData[$i]->getTitle()} </h4>
</div>
</div>
</div>
</div>
HTML;
}
?>
</div>
css
.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before,
.item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 11px;
}
js
$(document).ready(function() {
$('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
$('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
});
解决方案
进行了以下更改并且有效
<div id="container">
<strong>Display</strong>
<div class="btn-group">
<button id="list" class="list">List View</button>
<button id="grid" class="grid">Grid View</button>
</div>
<ul class = "grid">
<?php
for ($i = 0; $i < count($searchData); $i++) {
$year = Schema::getyear($searchData[$i]->getyearId())->getyear();
$course = Schema::getCourseFromId($searchData[$i]->getId());
$src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';
echo <<<HTML
<li>
<div class="item col-lg-6 col-md-6 mb-4" >
<div class = "thumbnail">
<div class="card h-100">
<a href="video.php?video={$searchData[$i]->getVideoId()}"><img class="card-img-top" src={$src} alt=""></a>
<div class="card-body">
<h4 class="card-title">{$searchData[$i]->getTitle()} </h4>
</div>
</div>
</div>
</div>
HTML;
}
?>
</div>
js
$('button').on('click',function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
css
#container ul { list-style: none; }
#container .buttons { margin-bottom: 20px; }
#container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }
#container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }
推荐阅读
- c# - HTML 敏捷包
标签
- peoplesoft - PeopleSoft 中的跟踪文件保存在哪里?
- mongodb - $nin mongodb 没有给我预期的结果
- javascript - 通过 Firebase 搜索数据
- html - 如何使用 Materialize w/Ruby on Rails 更改输入中的预定下划线颜色
- django - Django REST ManyToManyField 使用序列化器获取相关值
- ruby-on-rails - 使用 HTTParty 获取/设置会话
- c# - 如何让迷宫加载到我的表单上?
- matlab - 为什么matlab过滤器阶数限制为三分之一的数据长度减一?
- r - 具有比例ggplot的多个条形图