jquery 插件要切换列表并查看下载列

我正在尝试收集一个脚本来切换网格组和列表的表示。 我希望使用类尽可能简单的代码 bootstrap. 最后我会添加其他课程 col-lg-* 等等......并在脚本上工作 cookie, 但现在我试图用一些课程包装 wrapAll, 裹
https://github.com/tsevdos/nwrapper
. 第一次,当你按网格视图按钮时,它可以正常工作,每次列表的视图都这样做,但我暂时尝试纠正第二次点击后的网格类型。 也许另一双眼睛会帮助我看看我做错了什么。

以下是我正在开展工作的演示:
http://builtformobile.com/demo ... x.php
.

这是迄今为止的脚本:


$/document/.ready/function// {
$/'#grid'/.click/function// {
$/'#products'/.fadeOut/300, function// {
$/this/.addClass/'row-group'/.fadeIn/300/;
$/this/.removeClass/'list-group'/.fadeIn/300/;
$/'#grid'/.addClass/'disabled'/;
$/'#list'/.removeClass/'disabled'/;

$/'.item'/.removeClass/'list-group-item row'/;
$/'.item'/.wrap/'<div class="col-md-4"></div>'/;

$/this/.nwrapper/{
wrapEvery: 3,
defaultClasses: false,
extraClasses: ['row']
}/;
$.cookie/'list_grid', 'g'/;
}/;
return false;
}/;

$/'#list'/.click/function// {
$/'#products'/.fadeOut/300, function// {
$/this/.removeClass/'row-group'/.fadeIn/300/;
$/this/.addClass/'list-group'/.fadeIn/300/;
$/'#grid'/.removeClass/'disabled'/;
$/'#list'/.addClass/'disabled'/;

$/'.col-md-4'/.unwrap//; // unwraps nwrapper above

$/'.item'/.addClass/'list-group-item row'/;
$/'.item'/.unwrap/'<div class="col-md-4"></div>'/;

$/'.inner'/.nwrapper/{
wrapEvery: 2,
defaultClasses: false,
extraClasses: ['col-md-9']
}/;

$/'.list-group-image'/.wrap/'<div class="col-md-3"></div>'/;
$.cookie/'list_grid', null/;
}/;
return false;
}/;
}/;
已邀请:

裸奔

赞同来自:

在上面的例子中 /在网格和列表之间切换/ 包装似乎很复杂。

我认为您可以在网格和列表的演示之间切换,使默认网格演示 /使用网格课程 Bootstrap/. 通过添加类切换到列表模式 list-group-item, 并取消宽度和浮动的网格样式。 厘米。:
http://bootply.com/78753
css

:


.item.list-group-item {
/*reset the grid float and width and add a background for fun */
float: none;
width: 100%;
background-color: green;
}

/* give the image a left float in the list view */
.item.list-group-item img {
float: left;
}

/* and clearfix the left float of the image */
.item.list-group-item:before,
.item.list-group-item:after {
display: table;
content: " ";
}

.item.list-group-item:after {
clear: both;
}


javasacript

:


$/'#list'/.click/function// {
$/'#products .item'/.addClass/'list-group-item'/;
}/;
$/'#grid'/.click/function// {
$/'#products .item'/.removeClass/'list-group-item'/;
}/;


html


<div class="container">
<div class="btn-group">
<a class="btn btn-primary btn-sm" href="#" id="list">
<span class="glyphicon glyphicon-th-list"></span> List</a>
<a class="btn btn-default btn-sm" href="#" id="grid">
<span class="glyphicon glyphicon-th"></span> Grid</a>
</div>
<div class="row list-group" id="products">
<div class="item col-lg-4">
<img class="group list-group-image" src="[url=http://dummyimage.com/300x150/000/fff&amp;text=logo"/>]http://dummyimage.com/300x150/ ... gt%3B[/url]
<h4 class="group inner list-group-item-heading">List group item heading 1</h4>
<p class="group inner list-group-item-text">...</p>
</div>
<!--repeat items here -->
</div>
</div>


更新

添加有意义 / 删除类 clearfix 还有帮助 jquery:


$/'#list'/.click/function// {
alert/'tolist'/;
$/'#products .item'/.addClass/'list-group-item clearfix'/;
}/;
$/'#grid'/.click/function// {
$/'#products .item'/.removeClass/'list-group-item clearfix'/;
}/;


上面将减少你的 css 到:


.item.list-group-item {
float: none;
width: 100%;
background-color: green;
}

.item.list-group-item img {
float: left;
}

二哥

赞同来自:

我在互联网上发现了一个简单的决定,我为每个人分享

http://tympanus.net/Blueprints/ViewModeSwitch/
/

要回复问题请先登录注册