2

我正在尝试编写一个脚本来切换网格和列表组视图。我想利用引导类使代码尽可能简洁。我最终会添加额外的类 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;
  });
});
4

2 回答 2

7

在您提供的示例中（在网格/列表视图之间切换），包装似乎有点复杂。

我认为您可以通过将网格视图设为默认值（使用 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;
}

脚本：

$('#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;
}
于 2013-09-03T21:26:31.603 回答
0

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

于 2015-03-15T15:45:01.793 回答