GridView / ListView с использованием php html css js - PullRequest
Новая
       0

GridView / ListView с использованием php html css js

0 голосов
/ 05 октября 2018

Я пытаюсь добавить параметры сетки / списка просмотра на страницу поиска в моем веб-приложении.Следующий код не дает желаемых результатов.Будь я щелкаю по сетке или по списку, результаты поиска - это сетка.Когда я нажимаю на любую из опций, в конце веб-ссылки появляется знак «#».Представление не изменяется ни в коем случае.

Вот код.

search.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');});
});

1 Ответ

0 голосов
/ 08 октября 2018

Внесены следующие изменения и все заработало 

<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; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...