列表使用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