- 封装性好,只需要引入一个文件就可以了
- 接口完善,可以灵活自定义插件的某些设置参数
- 使用方便,除了引入文件,只需要做些必要的设置即可,或者可以不设置而使用默认值
- 无侵入性,不需通过修改HTML代码来使用插件,插件与HTML耦合度必须最低
所以我写插件就是遵循以上几个原则来写的,即使不懂得javascript代码也可以很快的上手使用插件——这是我的目标。
写的过程中也遇到一些问题,首先遇到的一个就是应用效果的时候闪烁的问题,下拉层设为position:absolute的后,脱离了文档流,但是从它的父元素到子元素之间却触发了一次mouseout事件,按规则下拉层是要隐藏的,而接着又触发了mouseover事件(很快,也许是同时发生的)然后下拉层再次显示,于是产生了闪烁问题。
我的解决办法是延迟隐藏, 这样带来了不错的用户交互体验的同时可以很好地解决这个问题:通过在紧接着发生的mouseover事件中把隐藏动作取消。
朋友给了一个提示,使用hover事件,这个我本该想到的,使用这个的确可以很好地避免闪烁,但是同时也带来了另一个问题:显示和隐藏不能更灵活地自定义了,比如上面提到的延迟隐藏,当然也有该方法,但我想也需要使用setTimeout,倒不如直接使用mouseout和mouseover事件来控制更好一些。
我写了两个版本的,一个是用hover事件,另一个是使用两个事件,个人更喜欢后者。
下面介绍一下插件吧:
插件使用起来很简单,是一个JQuery插件,需要引入JQuery库和jquery.imenu.js文件,然后通过一句JS代码来指定谁是菜单:
$(“#menu”).imenu();
很简单,不需要改动你的HTML代码,当然,你可以随便用CSS来装饰你的菜单。
你也可以自定义显示和隐藏的样式,以及隐藏前延迟的时间(可以带来更好的用户体验)
function menuShow(m) {
m.slideDown(500);
}
function menuHide(m) {
m.slideUp(500);
}
// 三个属性依次是:显示动画,隐藏动画,隐藏前延迟时间
// 可以使用默认设置,三个属性都不是必须的
// $(“#menu”).imenu();
$(“#menu”).imenu(menuShow,menuHide,200);
源代码是未经压缩的,便于大家学习交流。不过代码是用英文注释的,自己实在讨厌乱码和来回切换输入法
下面该给出插件的下载地址了,两个版本:
jquery.imenu-1.1.js 这个是使用hover来实现的,没有隐藏前延迟这个参数。
jquery.imenu-1.2.js 这上是使用两个事件来实现的。
jquery.imenu.zip 这个包含了演示文件