fireyy blog

还在使用mootools的时候，就非常喜欢这个Accordion（折叠菜单）效果，特别是slideUp和slideDown的滑动，接近flash的效果。今天我们就来用jquery来制作一个简单的Accordion效果。

首先准备好html结构，因为是针对sandbox template，它的sidebar结构是这样的：

<div class="sidebar">
 <ul class="xoxo">
  <li class="widget">
   <h3 class="widget-title">content 1</h3>
   <ul>
    <li>this is content under content 1</li>
    <li>this is content under content 1</li>
   </ul>
  </li>
  <li class="widget">
   <h3 class="widget-title">content 2</h3>
   <ul>
    <li>this is content under content 2</li>
    <li>this is content under content 2</li>
   </ul>
  </li>
 </ul>
</div>

有了结构，我们就可以开始对结构做文章了，先把所有需要折叠的内容先隐藏：

$('li.widget > ul').hide();

这里我们使用的 > 相似于CSS中的一级子元素选择符，隐藏所有第一级的ul元素。

接着我们设定折叠的控制器，本例中我们使用h3：

$('li.widget > h3').click(function() {
 var content = $(this).next();
 content.slideToggle('fast');
});

用next()来获得跟h3平级的下一个元素，也就是我么不能够结构中的ul，然后用slideToggle来执行折叠动作，也就是slideUp和slideDown。这时候我们已经可以进行正常的折叠操作了，但是我想要做到同时只能展开一个内容，该如何处理？

其实也不难，jquery的Selectors很强大，看看怎么做：

var others = content.parent().siblings("li.widget").find("ul:visible");

这里的parent()用来获取父元素，find()就是遵循一定的规则（使用Selectors）去查找符合条件的元素，本例中查找li.widget下的所有visible（CSS属性visibility:visible; 也就是本例中被展开的）的ul元素。

最后我们得到这样的内容：

$(document).ready(function(){
 $('li.widget > ul').hide();
 $('li.widget > h3').click(function() {
  var content = $(this).next();
  var others = content.parent().siblings("li.widget").find("ul:visible");
  if (others.length ) {
   others.slideUp('fast', function() {
    content.slideToggle('fast');
   });
  } else {
   content.slideToggle('fast');
  }
 });
});

一个简单的效果看这里

今天浏览mootools的svn版本的时候，发现判断浏览器的部分有小更新，并且加入了对操作系统的判断（以下的代码中未包括）

var Client = {
	Engine: {'name': 'unknown', 'version': ''},
	Features: {}
};

Client.Features.xhr = !!(window.XMLHttpRequest);
Client.Features.xpath = !!(document.evaluate);

if (window.opera) Client.Engine.name = 'opera';
else if (window.ActiveXObject) Client.Engine = {'name': 'ie', 'version': (Client.Features.xhr) ? 7 : 6};
else if (!navigator.taintEnabled) Client.Engine = {'name': 'webkit', 'version': (Client.Features.xpath) ? 420 : 419};
else if (document.getBoxObjectFor != null) Client.Engine.name = 'gecko';
Client.Engine[Client.Engine.name] = Client.Engine[Client.Engine.name + Client.Engine.version] = true;

可能的结果

Client.Engine.ie = true; //IE浏览器，版本不限 Client.Engine.ie6 = true; //IE 6 Client.Engine.ie7 = true; //IE 7 Client.Engine.opera = true; //opera Client.Engine.gecko = true; //Mozilla/Gecko(包括firefox) Client.Engine.webkit = true; //Safari Client.Engine.webkit419 = true; //Safari2 Client.Engine.webkit420 = true; //Safari3

现在你可以用类似这样的代码来执行你的XX Only了 :)

if (Client.Engine.ie) {
	IE Only!!!
}

新版的wordpress把内置的js应用转移到JQuery,最近很风靡的一个WP插件wp-ajax-edit-comments也改成用JQuery，很不幸，都是从prototype过来的，无疑prototype是一个伟大的JavaScript library，不过臃肿还是让一些人放弃了。

我目前使用的是mootools，个人觉得是十一个非常优秀的作品，特别是它的plugins and addons模式，让人眼前一亮。而换用JQuery只是一个尝试而已，希望它真的是“Write Less, Do More”