268 lines
6.8 KiB
JavaScript
268 lines
6.8 KiB
JavaScript
|
/*!
|
|||
|
|
* 主 题：《下拉菜单生成》
|
|||
|
|
* 说 明：用于管理界面右上方的下拉菜单。
|
|||
|
|
* 功能描述：
|
|||
|
|
* 1、模仿桌面应用软件下拉菜单效果；
|
|||
|
|
* 2、能够应用屏幕，当右侧空间不够时，下拉菜单向左展开
|
|||
|
|
* 3、数源来源自/Static/SysMenuTree.html静态化数据
|
|||
|
|
*
|
|||
|
|
* 作 者：宋雷鸣
|
|||
|
|
* 开发时间: 2012年2月13日
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
//页面左侧树形菜单的面板
|
|||
|
|
//area:下拉菜单所处在页面div区域
|
|||
|
|
function DropMenu(area)
|
|||
|
|
{
|
|||
|
|
if(area!="" && area!=null)DropMenu.Area=area;
|
|||
|
|
DropMenu.ZIndex=4000;
|
|||
|
|
}
|
|||
|
|
//菜单停留时间
|
|||
|
|
DropMenu.MenuWaitTime=100;
|
|||
|
|
//判断鼠标是否处在菜单之上
|
|||
|
|
window.IsOnDropMenu=true;
|
|||
|
|
function closeDropMenu()
|
|||
|
|
{
|
|||
|
|
if(!window.IsOnDropMenu)
|
|||
|
|
{
|
|||
|
|
var d=new DropMenu();
|
|||
|
|
d.PanelHide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//载入数据
|
|||
|
|
DropMenu.prototype.load=function()
|
|||
|
|
{
|
|||
|
|
//$().SoapAjax("managemenu","DropMenu",{},BuildDropMenu,DropMenu.Loading,DropMenu.UnLoading);
|
|||
|
|
$.get("panel/SysMenuTree.aspx", function(data){
|
|||
|
|
var area=$(DropMenu.Area);
|
|||
|
|
if(area.size()<1)return;
|
|||
|
|
var drop=new DropMenu();
|
|||
|
|
var tmp="";
|
|||
|
|
//
|
|||
|
|
area.html(data);
|
|||
|
|
drop.MenuStyleInit();
|
|||
|
|
drop.MenuStyleReset();
|
|||
|
|
drop.Event();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//菜单样式初始化
|
|||
|
|
DropMenu.prototype.MenuStyleInit=function()
|
|||
|
|
{
|
|||
|
|
var area=$(DropMenu.Area);
|
|||
|
|
area.find("[type='menuPanel']").each(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var level=Number($(this).attr("level"));
|
|||
|
|
//顶部菜单
|
|||
|
|
if(level==0)
|
|||
|
|
{
|
|||
|
|
$(this).attr("class","rootPanel").attr("type","rootPanel");
|
|||
|
|
$(this).children().attr("class","rootMenu");
|
|||
|
|
$(this).show();
|
|||
|
|
}else
|
|||
|
|
{
|
|||
|
|
$(this).attr("class","menuPanel");
|
|||
|
|
//alert($(this).attr("class"));
|
|||
|
|
$(this).children().attr("class","MenuNode");
|
|||
|
|
$(this).children().each(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
//如果子菜单项有下拉菜单，显示黑色的小三角
|
|||
|
|
var isChild=$(this).attr("isChild");
|
|||
|
|
var style="background-image: url(/manage/images/tree/triangle.gif);";
|
|||
|
|
style+="background-repeat: no-repeat;";
|
|||
|
|
style+="background-position: "+($(this).parent().width()-8)+"px 5px;";
|
|||
|
|
if(isChild=="True")$(this).attr("style",style);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
$(this).hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
//菜单样式的重新赋值，主要是ie6下,ajax载入入不能完全刷新css
|
|||
|
|
DropMenu.prototype.MenuStyleReset=function()
|
|||
|
|
{
|
|||
|
|
}
|
|||
|
|
//下拉菜单相关事件
|
|||
|
|
DropMenu.prototype.Event=function()
|
|||
|
|
{
|
|||
|
|
var area=$(DropMenu.Area);
|
|||
|
|
//菜单事件
|
|||
|
|
area.find("div[type='MenuNode']").hover(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var d=new DropMenu();
|
|||
|
|
d.PanelShow($(this));
|
|||
|
|
d.MouseOverShow($(this));
|
|||
|
|
},function(){}
|
|||
|
|
);
|
|||
|
|
//当鼠标移动时
|
|||
|
|
$("body").mousemove(
|
|||
|
|
function(e)
|
|||
|
|
{
|
|||
|
|
//判断鼠标是否处于菜单之上
|
|||
|
|
var tmp=$().isMouseArea($("div[type$='Panel']"),e);
|
|||
|
|
window.IsOnDropMenu=tmp;
|
|||
|
|
if(!tmp)setTimeout("closeDropMenu()",DropMenu.MenuWaitTime);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
//菜单项,点击事件
|
|||
|
|
area.find("div[type='MenuNode']").click(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var node=$(this).find("span");
|
|||
|
|
//如果当前节点有子节点，则不响应事件
|
|||
|
|
if(node.attr("IsChild")=="True")return false;
|
|||
|
|
//如果该节点禁用，则不响应事件
|
|||
|
|
if(node.attr("IsUse")=="false")return false;
|
|||
|
|
var type=node.parent().attr("nodetype");
|
|||
|
|
var link=node.attr("href");
|
|||
|
|
var id=node.parent().attr("nodeId");
|
|||
|
|
var name=node.text();
|
|||
|
|
var path=node.attr("path");
|
|||
|
|
|
|||
|
|
if(path!=null && path.indexOf(",")>-1)
|
|||
|
|
{
|
|||
|
|
//path=path.substring(path.indexOf(",")+1);
|
|||
|
|
}
|
|||
|
|
switch(type)
|
|||
|
|
{
|
|||
|
|
case "link"://如果是外部链接，直接打开
|
|||
|
|
return true;
|
|||
|
|
case "open"://如果是弹出窗口
|
|||
|
|
var width=node.attr("width");
|
|||
|
|
width=width ? width : 400;
|
|||
|
|
var height=node.attr("height");
|
|||
|
|
height=height ? height : 300;
|
|||
|
|
var title=node.parent().attr("title");
|
|||
|
|
new PageBox(title,link,Number(width),Number(height)).Open();
|
|||
|
|
return false;
|
|||
|
|
case "event"://如果是javascript事件
|
|||
|
|
eval(link);
|
|||
|
|
return false;
|
|||
|
|
case "item":
|
|||
|
|
var p=new PagePanel();
|
|||
|
|
p.add(name,path,link,id);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
//鼠标滑过事件
|
|||
|
|
//current:鼠标正在滑过的菜单项
|
|||
|
|
DropMenu.prototype.MouseOverShow=function(current)
|
|||
|
|
{
|
|||
|
|
var parent=current.parent();
|
|||
|
|
//面板级别
|
|||
|
|
var level=Number(parent.attr("level"));
|
|||
|
|
//如果是根菜单
|
|||
|
|
if(level==0)
|
|||
|
|
{
|
|||
|
|
current.siblings().attr("class","rootMenu");
|
|||
|
|
current.attr("class","rootMenu rootMenuOver");
|
|||
|
|
}else
|
|||
|
|
{
|
|||
|
|
current.siblings().attr("class","MenuNode");
|
|||
|
|
current.attr("class","MenuNode MenuNodeOver");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//下拉菜单的显示
|
|||
|
|
//pmenu:面板的上级菜单，即正在点中的菜单项
|
|||
|
|
DropMenu.prototype.PanelShow=function(pmenu)
|
|||
|
|
{
|
|||
|
|
this.PanelHide(pmenu.parent());
|
|||
|
|
var area=$(DropMenu.Area);
|
|||
|
|
//面板级别
|
|||
|
|
var level=Number(pmenu.parent().attr("level"));
|
|||
|
|
var nodeid=pmenu.attr("nodeId");
|
|||
|
|
//自身坐标对象
|
|||
|
|
var off=pmenu.offset();
|
|||
|
|
//子菜单面板
|
|||
|
|
var panel=area.find("div[patId="+nodeid+"]");
|
|||
|
|
if(panel.size()<1)return;
|
|||
|
|
var w=document.documentElement.clientWidth;
|
|||
|
|
//panel.css("background-color","#FFFFCC");
|
|||
|
|
//panel.css("border","1px solid #666666");
|
|||
|
|
panel.css("width","100px");
|
|||
|
|
panel.children().css("width","100px");
|
|||
|
|
//如果是根菜单
|
|||
|
|
if(level==0)
|
|||
|
|
{
|
|||
|
|
panel.css("top",off.top+pmenu.height());
|
|||
|
|
if((off.left+panel.width())<w)
|
|||
|
|
{
|
|||
|
|
panel.css("left",off.left);
|
|||
|
|
}else
|
|||
|
|
{
|
|||
|
|
panel.css("left",off.left+pmenu.width()-panel.width()+5);
|
|||
|
|
}
|
|||
|
|
panel.show();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//如果是其它菜单
|
|||
|
|
panel.css("top",off.top+pmenu.height()/2);
|
|||
|
|
if((off.left+pmenu.width()+panel.width())>w)
|
|||
|
|
{
|
|||
|
|
panel.css("left",off.left-panel.width()+5);
|
|||
|
|
}else
|
|||
|
|
{
|
|||
|
|
panel.css("left",off.left+pmenu.width()-5);
|
|||
|
|
}
|
|||
|
|
panel.show();
|
|||
|
|
}
|
|||
|
|
//下拉菜单面板的隐藏
|
|||
|
|
//panel:上级菜单
|
|||
|
|
DropMenu.prototype.PanelHide=function(panel)
|
|||
|
|
{
|
|||
|
|
//如果参数为空，则隐藏所有下拉菜单面板
|
|||
|
|
if(panel==null)
|
|||
|
|
{
|
|||
|
|
$(DropMenu.Area).find("div[type$='Panel']").each(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var level=Number($(this).attr("level"));
|
|||
|
|
$(this).children().attr("class",(level==0) ? "rootMenu" : "MenuNode");
|
|||
|
|
if(level!=0)$(this).hide();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//上级菜单的同级菜单
|
|||
|
|
panel.find("div[isChild=True]").each(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var nodeid=$(this).attr("nodeId");
|
|||
|
|
//同级子面板隐藏
|
|||
|
|
var child=$(DropMenu.Area).find("div[patId="+nodeid+"]");
|
|||
|
|
child.children().attr("class","MenuNode");
|
|||
|
|
child.hide();
|
|||
|
|
var d=new DropMenu();
|
|||
|
|
d.PanelHide(child);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
//获取当前坐标下的节点
|
|||
|
|
//return:返回树形节点的页面元素
|
|||
|
|
DropMenu.getDragObj=function(e)
|
|||
|
|
{
|
|||
|
|
var mouse=$().Mouse(e);
|
|||
|
|
var x=mouse.x;
|
|||
|
|
var y=mouse.y
|
|||
|
|
var tmp=null;
|
|||
|
|
$("div[type='menuPanel']").each(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var offset = $(this).offset();
|
|||
|
|
var xt = x > offset.left && x < (offset.left + $(this).width());
|
|||
|
|
var yt = y > offset.top && y < (offset.top +$(this).height());
|
|||
|
|
if(xt && yt)
|
|||
|
|
{
|
|||
|
|
if($(this).attr("state")!="lock")tmp=$(this);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
return tmp;
|
|||
|
|
}
|