列表使用mootools的网格视图

Question

我正在使用使用Mootools JS的CMS构建的市场类型网站上工作，我想让用户选择将项目列表视图更改为网格视图。

我的问题是在加载屏幕时看到列表和网格视图，只有一个按钮被点击时消失，所以这是我需要帮助。我想列表视图出现在页面加载和网格视图出现在按钮上点击

我已经完成了大量的研究，虽然有大量的JQuery答案，但没有太多的Mootools和我能找到的唯一答案就是在列表元素之一中使用CSS'display：none'，并且根本不起作用。

你可以看到我的问题在http://jsfiddle.net/5ctJL/5/

这里一个基本的想法是我的HTML

<button id="list">list</button> 
<button id="grid">grid</button> 

<ul id="ulGrid"> 
    <li>Grid 1</li> 
    <li>Grid 2</li> 
    <li>Grid 3</li> 
    <li>Grid 4</li> 
    <li>Grid 5</li> 
</ul> 
<ul id="ulList"> 
    <li>List 1</li> 
    <li>List 2</li> 
    <li>List 3</li> 
    <li>List 4</li> 
    <li>List 5</li> 
</ul> 

CSS

#ulGrid { 
    color: #8A7575; 
    font-weight: bold; 
    padding: 10px; 
    background: #ccc; 
    width: 15%; 
} 

#ulList { 
    color: #8A7575; 
    padding: 10px; 
    font-weight: bold; 
} 

JS

window.addEvent('domready', function() { 

    var myList = new Fx.Slide('ulList'); 
    var myGrid = new Fx.Slide('ulGrid'); 

    $('list').addEvent('click', function (event) { 
    myGrid.hide(); 
    myList.show(); 
    }); 

    $('grid').addEvent('click', function (event) { 
    myGrid.show(); 
    myList.hide(); 
    }); 

}); 

中号任何提前致谢

Answer 1

等等。尝试从ID和粗/厚逻辑中分离出来。

var grids = document.getElements('.grid > ul');  
document.getElements('.grid button.toggler').addEvent('click', function(){ 
    grids.toggleClass('hide'); 
    this.set('text', grids.match('#ulGrid.hide')[0] ? 'grid' : 'list'); 
}); 

用的标记：

<div class="grid"> 
    <button class="toggler">grid</button>  
    <ul id="ulGrid" class="hide"> 
     <li>Grid 1</li> 
     <li>Grid 2</li> 
     <li>Grid 3</li> 
     <li>Grid 4</li> 
     <li>Grid 5</li> 
    </ul> 
    <ul id="ulList"> 
     <li>List 1</li> 
     <li>List 2</li> 
     <li>List 3</li> 
     <li>List 4</li> 
     <li>List 5</li> 
    </ul> 
</div> 

和CSS：

.hide { 
    display: none; 
} 

#ulGrid { 
    color: #8A7575; 
    font-weight: bold; 
    padding: 10px; 
    background: #ccc; 
    width: 15%; 
} 

#ulList { 
    color: #8A7575; 
    padding: 10px; 
    font-weight: bold; 
} 

将正常工作。 http://jsfiddle.net/dimitar/5ctJL/6/

回答关于图标的附加问题，这里是通过字体真棒。 http://jsfiddle.net/5ctJL/9/

做同样的事情，但将类设置为正确的图标。看到http://fortawesome.github.io/Font-Awesome/icons/的选项，我选择了两个看起来像一个网格和一个列表。

var grids = document.getElements('.grid > ul');  
document.getElements('.grid button').addEvent('click', function(){ 
    grids.toggleClass('hide'); 
    this.set('class', this.hasClass('fa-list') ? 'fa fa-th' : 'fa fa-list'); 
}); 

注：记住该图标的版本我都做了标记一些微妙的变化，以避免还设置className到toggler和CSS瓦特/ OA命名空间已风格的按钮 - 这是概念证明，在:)

不降到说实话，我可以解决整个事情的纯CSS（包括点击） - 如果你不需要支持IE8