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
:
javasacript
:
html
更新
添加有意义 / 删除类 clearfix 还有帮助 jquery:
上面将减少你的 css 到:
二哥
赞同来自:
http://tympanus.net/Blueprints/ViewModeSwitch/
/