javascript - 使用 mootools 列表到 GridView

Question

我正在使用使用 Mootools JS 的 CMS 构建的市​​场类型网站，我想为用户提供从项目 ListView 更改为 GridView 的选项。

我的问题是在加载屏幕时同时显示 ListView 和 GridView ，并且在单击按钮时只有一个消失，所以这就是我需要帮助的地方。我希望 ListView 出现在页面加载上， GridView 出现在按钮点击上

我对此进行了大量研究，虽然有很多 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/

要回答有关图标的其他问题，这里有一些来自 font-awesome 的内容。 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');
});

nb:请记住图标版本，我对标记做了一些细微的更改，以避免同时将 className 设置为 toggler，并在没有命名空间的 CSS 中设置了按钮的样式——这证明的概念，不下降:)

老实说，我可以用纯 CSS 解决整个问题(包括点击)——如果你不需要支持 IE8