1

我需要让用户选择在 、 和 之间选择List-view查看Grid-view模式Full-view。基本结构很简单，如下所示：

<ul>
    <li><a href="#">List Toggle</a></li> 
    <li><a href="#">Grid Toggle</a></li> 
    <li><a href="#">Full Toggle</a></li> 
</ul>

<div id="wrap">
<div id="list-view">
    <div class="line">lorem line</div>
    <div class="line">lorem line</div>
    <div class="line">lorem line</div>
</div>

<div id="grid-view">
    <div class="box">lorem box</div>
    <div class="box">lorem box</div>
    <div class="box">lorem box</div>
</div>

<div id="full-view">
    <div class="full">full lorem</div>
    <div class="full">full lorem</div>
    <div class="full">full lorem</div>
</div>
</div>

这是jsfiddle我从list-view设置为可见而其他隐藏开始的：

http://jsfiddle.net/eTb5C/13/

这是我正在考虑实施的一个，但需要 3 个选项.. http://jsfiddle.net/mgNQy/2/

基本上，如果您单击视图模式，当前视图模式将淡出，而选定的视图模式将淡入。

如果可能的话，我还想添加一个 cookie 来记住用户的偏好，但我不知道该怎么做。我对 jQuery 很陌生，希望我的问题不是太基本。

4

1 回答 1

1

Acutally 没有什么特别的，你只有三个选项卡（列表、网格、完整）。首先，我建议您遵循以下标记：

   <ul class="tabs js-view-mode">
      <li><a href="#list">List</a></li>
      <li><a href="#grid">Grid</a></li>
      <li><a href="#full">Full</a></li>
    </ul>

    <section id="viewMode">
      <div id="list">here is list mode content</div>
      <div id="grid">here is grid mode content</div>
      <div id="full">here is full mode content</div>
    </section>

如您所见，在选项卡上，在<a href="">类内，我将 id 用于我们想要显示的内容。这是安全和容易的，因为脚本不会混淆他必须展示的内容。

同样在 html 中，您必须加载 jquery 库和 jquery-cookie（您可以避免按照javascript-cookies的文档加载此插件）。最好在</body>标记之前加载它们以获得更快的页面加载时间。

您想要的 jQuery 代码如下所示：

$(document).ready(function(){
  var wrap = $('#viewMode'),
      viewMode = $.cookie( 'view-mode' );
  wrap.children().hide();

  $('.js-view-mode').on( 'click', 'a',function( e ){
    e.preventDefault();
    var t = $(this),
        type = t.attr('href');

    $(type).fadeIn()
      .siblings().fadeOut();

    viewMode = $.cookie( 'view-mode', type );

  });

  if ( viewMode ) {
    $('.js-view-mode a[href='+ viewMode +']').trigger('click');
  } else {
    $('.js-view-mode li:first a').trigger( 'click' );
  }

});

您可以在此处查看实时测试

编辑： JS Fiddle v2（添加活动类+延迟淡入/淡出+点击活动项返回）

于 2013-06-01T15:54:01.707 回答