用于切换引导程序的列表视图和列视图的 jquery 插件答案

【问题标题】：jquery plugin to toggle list view and column view for bootstrap用于切换引导程序的列表视图和列视图的 jquery 插件
【发布时间】：2013-09-03 14:54:13
【问题描述】：

我正在尝试编写一个脚本来切换网格和列表组视图。我想利用引导类使代码尽可能简洁。我最终会添加额外的类 col-lg-* 等......并处理 cookie 脚本，但现在，我正在尝试使用 wrapAll 包装一些类，包装一个 nwrapper。第一次单击网格视图按钮时，工作正常，之后列表视图每次都可以正常工作，但是我坚持在第二次单击后尝试修复网格视图。也许另一双眼睛可以帮助我看到我做错了什么。

这是我正在做的工作的演示：Toggle List Grid View。

这是目前为止的脚本：

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

【问题讨论】：

标签： jquery listview twitter-bootstrap gridview twitter-bootstrap-3

【解决方案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>

更新也可以通过 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;
}

【讨论】：

【解决方案2】：

我在网上找到了一个简单的解决方案，我分享给大家
http://tympanus.net/Blueprints/ViewModeSwitch/

【讨论】：