感谢对弹层库的支持,现加送昨晚写的mootools版仿select无限级选择菜单

Javascripters 2010-02-24 01:35:01
感谢对弹层库的支持,现加送昨晚写的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.rar

var 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);

...全文
260 12 打赏 收藏 举报
写回复
12 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
zoltmac 2010-06-07
  • 打赏
  • 举报
回复
谢谢分享,楼主辛苦!!!
Javascripters 2010-06-07
  • 打赏
  • 举报
回复
非常感谢cn00439804每天帮我顶贴,谢谢~~
cn00439804 2010-06-07
  • 打赏
  • 举报
回复
每天回帖即可获得10分可用分!永远顶楼主
Javascripters 2010-06-07
  • 打赏
  • 举报
回复
很久没来了~~
sundotLei 2010-03-03
  • 打赏
  • 举报
回复
lz辛苦了,接分...
Wilson咻咻咻 2010-03-03
  • 打赏
  • 举报
回复
学习了。谢谢楼主了……
  • 打赏
  • 举报
回复
学习来的 ..........
YaoZhengWu 2010-02-24
  • 打赏
  • 举报
回复
谢谢分享,楼主辛苦!!!
xiaofan_sap 2010-02-24
  • 打赏
  • 举报
回复
谢谢分享~~~~~~~~~~
sjkof 2010-02-24
  • 打赏
  • 举报
回复
谢谢,学习
Javascripters 2010-02-24
  • 打赏
  • 举报
回复
看来大家还是比较喜欢jquery~~
街头小贩 2010-02-24
  • 打赏
  • 举报
回复
感谢分享!我喜欢mootools
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-02-24 01:35
社区公告
暂无公告