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”

眼馋firefox的页面搜索有高亮的效果，很想在blog上也搞一个这样的效果，如果你也眼馋的话，来试一试吧．

其实每什么难的，加一个插件不就好了，so more for wordpress.我用了一个名为google highlight的插件（默认不支持中文），虽然名字里只有google，但是它还支持了lycos,yahoo和wordpress的站内搜索，（本站启用了livesearch，说不定过几天后也支持了 ）

使用方法很简单，放到plugins目录，然后后台激活．over

接着你就可以尝试一些花哨的想法，比如高亮闪烁（一点也不花哨...） ，还可以修改，让它支持中文字符（修改成中文支持以后，判断高亮变得不太准确了...）

试一下效果，点击 mootools+lightbox

如果你觉得还可以的话，继续看下面的代码(基于mootools)

var searchHilite = new Class({
	initialize: function()
	{
		this.hlclass = "hilite";
		this.items = $A(document.getElementsByClassName(this.hlclass));
		if (this.items.length == 0) return false;
		this.hilite();
	},
	hilite: function()
	{
		this.items.each(function(item)
		{
			new Fx.Color(item,'background-color',{duration: 2000}).custom('#ffffff','#D81317');
			new Fx.Color(item,'color',{duration: 2000}).custom('#999999','#ffffff');
		});
	}
});
window.onload = function () { new searchHilite(); }

ok,love your owner highlight