Jquery plugin制作:浮动树菜单
来源:互联网 发布:ios数组动态添加元素 编辑:程序博客网 时间:2024/05/19 16:07
(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)
调用此浮动线路树菜单:
浮动树菜单如下图:
1 0
- Jquery plugin制作:浮动树菜单
- 使用JQuery制作浮动窗口
- jQuery制作菜单
- jQuery 实现侧边浮动导航菜单效果
- jQuery+Superfish制作下拉菜单
- jQuery+Superfish制作下拉菜单
- jQuery+Superfish制作下拉菜单
- jQuery+Superfish制作下拉菜单
- jQuery+Superfish制作下拉菜单
- 利用jquery制作左侧菜单
- jquery 制作出右键菜单
- 浮动菜单
- JQuery学习系列总结—菜单制作
- jQuery制作的手风琴折叠菜单
- jquery制作折叠式菜单(Accordion)
- Jquery实现三级菜单的制作
- 如何利用jQuery制作下拉导航菜单
- jQuery制作的简化三级联动菜单
- C++的输入和输出与标准输出流
- 抽象类:
- Web前端面试指导(二):编写简历,吃透简历内容
- Android通知栏微技巧,那些你所没关注过的小细节
- Android 常用布局及基本UI控件
- Jquery plugin制作:浮动树菜单
- JavaCC使用小结
- 最近java面试被问到的问题
- HDU5122【水】
- 原码, 反码, 补码 详解
- java8改进的接口:
- Grails 快速入门(二)
- swift什么时候才会火
- 操作系统linux tcp/ip