用于切换 bootstrap 的 ListView 和列 View 的 jquery 插件

Question

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

这是我正在处理的演示: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;
  });
});

Answer 1

在您提供的示例中(在网格/ ListView 之间切换)，包装似乎有点复杂。

我认为您可以通过将 GridView 设为默认值(使用 Bootstrap 的网格类)来在 GridView 和 ListView 之间切换。通过添加 list-group-item 类切换到 ListView ，并撤消宽度和 float 的网格样式。请参阅: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;
}

javasicript:

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