感谢对弹层库的支持,现加送昨晚写的mootools版仿select无限级选择菜单,希望用mootools框架的朋友会喜欢。
demo下载地址:
http://files.cnblogs.com/shuicaituya/mootools%E7%89%88%E6%97%A0%E9%99%90%E7%BA%A7%E7%BA%B5%E5%90%91%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.rarvar Tree = new Class({
options: {
transparency:1,                            //透明度
hasChildName:'hasChild',                   //tree节点下还有分支是调用的class名称。
currentClass:'current',                    //当前tree节点调用的class名称。
holder:'categorySelect',                   //点击id为holder的元素,将激活树的第一个ul。
showResultBox:'selectText',                //点击任意tree节点后,将tree节点的值写入id为showResultBox的元素里。
disappearTime:200,                         //鼠标移出tree后经过多少毫秒后树消失。
firstUlDisappearTime:2000,                 //点击holder后第一个ul消失的时间。
timer:null                                 //鼠标事件的计时器。
},
initialize: function(treeId,options) {
this.setOptions(options);
this.tempArr = [];
this.aliasUrl = '';
this.container = $(treeId);
this.close();
this.getTreeNodes().each(function(treeNode){
treeNode.addEvents({
mouseenter:function(){
$clear(this.options.timer);
this.close();
this.showCurrentRoute(treeNode);
}.bind(this),
mouseleave:function(){
this.options.timer = this.close.delay(this.options.disappearTime,this);
}.bind(this),
click:function(){
this.aliasUrl = '';
$(this.options.showResultBox).set('text',treeNode.get('text'));
$(this.options.showResultBox).set('alias',this.getAlias(treeNode));
this.close();
}.bind(this)
});
}.bind(this))
$(this.options.holder).addEvent('click',function(){
this.showDirectTreeNodes(this.getTreeBlks()[0]);
var coordinates = $(this.options.holder).getCoordinates();
this.container.setStyles({
left:coordinates.left,
top:coordinates.top + coordinates.height
});
this.options.timer = this.close.delay(this.options.firstUlDisappearTime,this);
}.bind(this));
this.getTreeNodes().each(function(treeNode){
treeNode.setStyle('opacity',this.options.transparency);
}.bind(this));
},
close:function(){
this.getTreeNodes().each(function(treeNode){
treeNode.removeClass(this.options.currentClass);
treeNode.setStyle('display','none');
}.bind(this));
},
getTreeBlks:function(){
return this.container.getElements('ul');
},
getTreeNodes:function(){
return this.container.getElements('a');
},
getAlias:function(treeNode){
if(!treeNode.getParent().getParent().hasClass('rootUl')){
this.aliasUrl = treeNode.get('alias') + '/' + this.aliasUrl;
this.getAlias(treeNode.getParent().getParent().getPrevious());
}
else{
this.aliasUrl = 'products/' + treeNode.get('alias') + '/' + this.aliasUrl;
}
return this.aliasUrl;
},
showDirectTreeNodes:function(treeBlk){
treeBlk.getChildren().each(function(treeLi){
treeLi.getChildren().each(function(treeNode){
treeNode.setStyle('display','block');  
});
});
},
showCurrentRoute:function(treeNode){
var treeNodeParent = treeNode.getParent().getParent();
if(treeNode.hasClass(this.options.hasChildName)){
this.tempArr.push(treeNode.getNext());
this.tempArr.push(treeNode);
this.tempArr.push(treeNodeParent);
}
else{
this.tempArr.push(treeNode);
this.tempArr.push(treeNodeParent);
}
this.showBlkParent(treeNodeParent)
},
showBlkParent:function(treeBlk){
var treeParentNode = treeBlk.getPrevious();
if(treeBlk.getParent() != this.container){
var treeParentNodeParent = treeParentNode.getParent().getParent();
this.tempArr.push(treeParentNode);
this.tempArr.push(treeParentNodeParent);
this.showBlkParent(treeParentNodeParent);
}
else{
this.drawRoute(this.tempArr,null);
}
},
drawRoute:function(arr,lastTreeNode){
if(arr.length >= 2){
var treeBlk = arr.pop();
this.showDirectTreeNodes(treeBlk);
if(lastTreeNode != null){
treeBlk.setStyles({
top:lastTreeNode.offsetTop
})
}
var tempTreeNode = arr.pop();
tempTreeNode.addClass(this.options.currentClass);
this.drawRoute(arr,tempTreeNode);
}
else if(arr.length == 1){
var treeBlk = arr.pop();
treeBlk.setStyles({
top:lastTreeNode.offsetTop
})
this.showDirectTreeNodes(treeBlk);
}
}
});
Tree.implement(new Events,new Options);