Jquery plugin制作：浮动树菜单

(function($){

var defaults ={
x: 0,  //元素右下角x的偏移量
y: -300,//元素右下角y的偏移量
width:150,
height:'auto',
contentHeight:600,
background:'#222d32'

}

$.fn.lineTreeLayer = function(options){

   var _options = $.extend({},defaults,options);
   
var initLayer = function(_options){
if($("#lineTreeLayer").length > 0){
$("#lineTreeLayer").show();
}else{
var showinfo = "<div id='lineTreeLayer' style='left:"+_options.x+"px;top:"+_options.y+"px;width:"+_options.width+"px;padding:0;color:#ffffff;background:"+_options.background+"; position:absolute; z-index:999999; border: 1px solid #ffffff;'>";
showinfo += "<div style='background:#aabbcc; text-decoration:none'><a href='javascript:closelineTreeLayer();'>删除</a></div>";
showinfo += "<div style='min-height:"+_options.contentHeight+"px; height:"+_options.contentHeight+"px;overflow-y:auto;' id='mtLocationRunDiagramTree' class='ztree'></div>"; 
showinfo +="</div>";
getRoadLineTree();
$(document.body).append(showinfo);

var styles = ".ztree li span.button.treeroad_ico_docu{margin-right:-2px;vertical-align:baseline; background-image: none!important; font-size:12px; color:#428bca;}";
styles += ".ztree *{color:#ffffff}";
var style = document.createElement("style");
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}


}
 
}

this.on("click",function(){


//鼠标点击元素的右下角位置
var x = $(this).offset().left + $(this).width();
var y = $(this).offset().top + $(this).height();
//构建线路树的dom元素

var _param = $.extend({},_options,{'x':x+_options.x,'y':y+_options.y});

initLayer(_param);
})
//隐藏线路树
this.close = function(){
$("#lineTreeLayer").remove();
}

this.getRoadLineTree = function(_treeDiv) {

$.get('/BsRoadinfo/RoadTreeJson.koala').done(function(data){
var zNodes = JSON.parse(data);
var setting = {
    check: {
    enable: true,
chkboxType: { "Y": "p", "N": "s" },
autoCheckTrigger: true
    },
callback: {
onClick: onTreeClick
}
 };
$.fn.zTree.init($("#mtLocationRunDiagramTree"), setting, zNodes);
});
}

var onTreeClick = function(event, treeId, treeNode, clickFlag) {
   if(window.Addtabs != undefined) window.Addtabs.close("tab_BsBusdiagarm-Maplist");
   
   var roadidlist = getCheckedRoadId();
   alert(roadidlist)
   var target ="pages/domain/BsBusdiagarm-mutil-Maplist.jsp?roadid="+roadidlist;
   openTab(target, "运行简图", 'BsBusdiagarm-Maplist');
   closelineTreeLayer();
}
var getCheckedRoadId = function(){
 var treeObj=$.fn.zTree.getZTreeObj("mtLocationRunDiagramTree");
           nodes=treeObj.getCheckedNodes(true),
           roadidlist="";
           for(var i=0;i<nodes.length;i++){
            if(nodes[i].id == 0) continue;
            roadidlist+=nodes[i].id + ",";
           }
           return roadidlist;
}
window.closelineTreeLayer = this.close;
window.getRoadLineTree = this.getRoadLineTree;
window.getChildrenData = this.getChildrenData;
}

})(window.jQuery)

调用此浮动线路树菜单：

浮动树菜单如下图：