jquery 插件要切换列表并查看下载列
我正在尝试收集一个脚本来切换网格组和列表的表示。 我希望使用类尽可能简单的代码 bootstrap. 最后我会添加其他课程 col-lg-* 等等......并在脚本上工作 cookie, 但现在我试图用一些课程包装 wrapAll, 裹
https://github.com/tsevdos/nwrapper
. 第一次，当你按网格视图按钮时，它可以正常工作，每次列表的视图都这样做，但我暂时尝试纠正第二次点击后的网格类型。 也许另一双眼睛会帮助我看看我做错了什么。
以下是我正在开展工作的演示：
http://builtformobile.com/demo ... x.php
.
这是迄今为止的脚本：
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;
}/;
}/;
没有找到相关结果
已邀请:
2 个回复
裸奔
赞同来自:
我认为您可以在网格和列表的演示之间切换，使默认网格演示 /使用网格课程 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
更新
添加有意义 / 删除类 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/
/