行和平铺视图列表与jquery

我想要做的是创建两个按钮;一个按钮显示数据的平铺视图，另一个显示数据的行视图。我已经设置了代码是这样的：行和平铺视图列表与jquery

dl = $('.data-list'), 
    sr = $('.sort-row'), 
    st = $('.sort-tile'); 

    //add cursor to tile icon default 
    st.addClass('active-tile').css({'cursor':'default'}); 
    //add tile class to data-list 
    dl.addClass('tile'); 

    //add tile class and remove row 
    st.click(function() { 
     if ($(this).hasClass('active-tile')){ 
      $(this).removeClass('active-tile').css({'cursor':'pointer'}); 
      dl.hide().addClass('row').removeClass('tile').fadeIn(); 
      sr.addclass('active-row'); 
     } else { 
      $(this).addClass('active-tile').css({'cursor':'default'}); 
      sr.removeClass('active-row'); 
      dl.hide().addClass('tile').removeClass('row').fadeIn().css('display','block'); 
     } 
    }); 
    //add row class and remove tile 
    sr.click(function() { 
     if ($(this).hasClass('active-row')){ 
      $(this).removeClass('active-row').css({'cursor':'pointer'}); 
      dl.hide().addClass('tile').removeClass('row').fadeIn(); 
      st.addclass('active-tile'); 
     } else { 
      $(this).addClass('active-row').css({'cursor':'default'}); 
      st.removeClass('active-tile'); 
      dl.hide().addClass('row').removeClass('tile').fadeIn().css('display','block'); 
     } 
    });

HTML：

<div class="sort-bar fr"> 
     <span class="sort-tile">Columns</span> 
     <span class="sort-row">Rows</span> 
    </div> 
    <div class="data-list"> 
      <section></section> 
      <section></section> 
    </div>

我有它设置，它隐藏了一会儿数据列表，以便可以添加类，然后我添加行以更改数据的样式。

我的原始点是我不完全确定如何在行激活时禁用磁贴按钮，反之亦然。我尝试使用解除绑定，但似乎永久禁用这两个按钮。另一部分是，那里有很多代码，我觉得我不一定有效地做到这一点。任何关于如何减少代码的建议将不胜感激。我觉得在这里使用toggleclass会很好用，但我不完全确定它应该放在哪里。

编辑：有人问了的jsfiddle，我贴一个简单的东西的工作：http://jsfiddle.net/wtyxd/3/

编辑：请注意，如果你点击每个从另一个按钮清除活性，但如果你点击它再一次，它也从中删除活动，并且不显示任何活动？我试图解决这个问题。

来源

2013-03-01 stepquick

你有一个页面或CSS或小提琴 - 这将有很大的帮助 – 2013-03-01 22:19:11

编辑：更新，http://jsfiddle.net/wtyxd/3/ – stepquick 2013-03-01 22:31:54

像这样.row节{ 浮动：剩下; } – 2013-03-01 22:37:40

其实这似乎是我所需要的。我解决了它。

st.click(function() { 

     if (!$(this).hasClass('active')){ 
      $(this).addClass('active'); 
      sr.removeClass('active'); 
      dl.fadeOut(200, function() { 
       $(this).addClass('tile').removeClass('row').fadeIn(600) 
      }); 
     } 
    }); 
    //add row class and remove tile 
    sr.click(function() { 
     if (!$(this).hasClass('active')){ 
      $(this).addClass('active'); 
      st.removeClass('active'); 
      dl.fadeOut(200, function() { 
       $(this).addClass('row').removeClass('tile').fadeIn(600) 
      }); 
     } 
    });

来源

2013-03-01 23:23:01 stepquick

http://jsfiddle.net/wtyxd/4/

if ($(this).hasClass('active-tile') && !d1.hassClass('row')) 
    if ($(this).hasClass('active-row') && !d1.hassClass('tile'))

来源

2013-03-01 22:56:46

希望这个作品，我认为这是你想要的功能 – 2013-03-01 22:57:11

更新：其实它看起来你用d1而不是dl。与hassClass一样。它只是抛出错误。 – stepquick 2013-03-01 23:04:06

试试这个http://jsfiddle.net/wtyxd/9/ – 2013-03-01 23:53:17

行和平铺视图列表与jquery

回答

相关问题