Как я могу получить JQuery Grid / List View по умолчанию для просмотра списка при загрузке страницы? - PullRequest
Новая
       6

Как я могу получить JQuery Grid / List View по умолчанию для просмотра списка при загрузке страницы?

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

Я работаю со следующим кодом, чтобы сгенерировать сетку и список из нескольких элементов.Это прекрасно работает, однако я не могу понять, как установить его по умолчанию в виде списка, а не в виде сетки.Как я могу заставить его отображать элементы в виде списка при загрузке страницы?

Я думаю, что хочу загрузить класс 'list-group-item' в элемент 'products', но мне трудно понять, как это сделать.Любой совет, руководство или направление было бы здорово!Я ценю любую помощь или помощь.Спасибо!!:) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>List Grid View</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/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;
}

    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="well well-sm">
        <strong>Category Title</strong>
        <div class="btn-group">
            <a href="#" id="list" class="btn btn-default btn-sm icon-button"><i class="fa-icon fas fa-th-list"></i>List</a> <a href="#" id="grid" class="btn btn-default btn-sm icon-button"><i class="fa-icon fas fa-th"></i>Grid</a>
        </div>
    </div>
    <div id="products" class="row list-group">
        <div class="item  col-xs-1 col-lg-2">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading eventWho">
                        $eventname</h4>
                    <p class="group inner list-group-item-text">
                        <span>$locationname | $locationcity, $locationstate</span></p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $eventtime</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="item  col-xs-1 col-lg-2">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading eventWho">
                        $eventname</h4>
                    <p class="group inner list-group-item-text">
                        <span>$locationname | $locationcity, $locationstate</span></p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $eventtime</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="item  col-xs-1 col-lg-2">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading eventWho">
                        $eventname</h4>
                    <p class="group inner list-group-item-text">
                        <span>$locationname | $locationcity, $locationstate</span></p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $eventtime</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="item  col-xs-1 col-lg-2">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/100x100/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading eventWho">
                        $eventname</h4>
                    <p class="group inner list-group-item-text">
                        <span>$locationname | $locationcity, $locationstate</span></p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $eventtime</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success btn-md btn-primary" href="../create-invitation/?eid=$eid">Invite</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

  </div> 
  </div>     

<script type="text/javascript">
$(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');});
});
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...