jquery插件用于切换列表视图和列视图以进行引导

Question

我正在尝试整理一个脚本来切换网格和列出组视图.我希望利用引导类尽可能保持代码尽可能轻松.我最终会添加额外的类col-lg-*etc ...并在cookie脚本上工作但是现在,我正在尝试使用wrapAll包装一些类,包装一个nwrapper.第一次单击网格视图按钮,工作正常,之后每次列表视图也会这样做但是我在第二次单击后尝试修复网格视图时遇到困难.也许另一双眼睛可以帮助我看到我做错了什么.

以下是我正在研究的内容:切换列表网格视图.

到目前为止这是脚本:

$(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;

});

});

Answer 1

在您提供的示例中(在网格/列表视图之间切换),包装看起来有点复杂.

我认为您可以通过使网格视图默认(使用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 href="#" id="list" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-th-list"></span>&nbsp;List</a>
    <a href="#" id="grid" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th"></span>&nbsp;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&amp;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-->

更新 有意义的是通过jquery添加/删除clearfix类:

 $('#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;}