twitter-bootstrap jquery 插件来切换引导程序的列表视图和列视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18595406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery plugin to toggle list view and column view for bootstrap
提问by Jose Carrillo
I'm trying to put together a script to toggle grid and list group views. I want to keep the code as light as possible utilizing the bootstrap classes. I'll eventually add the additional classes col-lg-* etc... and work on the cookie script but for now, I'm trying to wrap some classes using wrapAll, wrap an nwrapper. The first time you click the grid view button, works fine and everytime after that the list view does as well however I'm stuck with trying to fix the grid view after the second click. Perhaps another set of eyes can help me see what I am doing wrong.
我正在尝试编写一个脚本来切换网格和列表组视图。我想使用引导程序类使代码尽可能轻巧。我最终会添加额外的类 col-lg-* 等......并处理 cookie 脚本，但现在，我正在尝试使用 wrapAll 包装一些类，包装一个nwrapper。第一次单击网格视图按钮时，工作正常，之后每次列表视图也一样，但是我一直在尝试在第二次单击后修复网格视图。也许另一双眼睛可以帮助我看到我做错了什么。
Here is a demo of what I'm working on: Toggle List Grid View.
这是我正在处理的演示：Toggle List Grid View。
This is script thus far:
这是迄今为止的脚本：
$(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" />');
$(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" />');
$('.inner').nwrapper({
wrapEvery : 2,
defaultClasses : false,
extraClasses : ['col-md-9']
});
$('.list-group-image').wrap( '<div class="col-md-3" />');
$.cookie('list_grid', null);
});
return false;
});
});
});
回答by Bass Jobsen
In the example you provide (switching between grid / list view) the wrapping seems kind of complex.
在您提供的示例中（在网格/列表视图之间切换），包装看起来有点复杂。
I think you could switch between grid and list view by making the grid view default (using Bootstrap's grid classes). Switch to the list view by adding a list-group-item class and undo the grid styles for width and floating. See: http://bootply.com/78753
我认为您可以通过将网格视图设为默认值（使用 Bootstrap 的网格类）在网格和列表视图之间切换。通过添加一个 list-group-item 类切换到列表视图，并撤消宽度和浮动的网格样式。见：http: //bootply.com/78753
css:
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
html
<div class="container">
<div class="btn-group">
<a href="#" id="list" class="btn btn-primary 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 id="products" class="row list-group">
<div class="item col-lg-4">
<img class="group list-group-image" src="http://dummyimage.com/300x150/000/fff&text=logo" />
<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>
</div><!--/.container-->
updateit make sense to add / remove the clearfix class by jquery too:
更新也可以通过 jquery 添加/删除 clearfix 类：
$('#list').click(function(){alert('tolist');$('#products .item').addClass('list-group-item clearfix');});
$('#grid').click(function(){$('#products .item').removeClass('list-group-item clearfix');});
above will reduce your css to:
以上将减少你的CSS：
.item.list-group-item
{
float: none;
width: 100%;
background-color:green;
}
.item.list-group-item img{float:left;}
回答by Quy Le
i found a simple solution on internet, i share for all
http://tympanus.net/Blueprints/ViewModeSwitch/
我在互联网上找到了一个简单的解决方案，我分享给所有人
http://tympanus.net/Blueprints/ViewModeSwitch/
