257 lines
9.3 KiB
JavaScript
257 lines
9.3 KiB
JavaScript
/*!
|
||
* 主 题：《菜单树生成》
|
||
* 说 明：用于管理页面左侧树形菜单。
|
||
* 功能描述：
|
||
* 1、首先生成最左侧的选项卡；
|
||
* 2、再生成相关的菜单树
|
||
*
|
||
*
|
||
* 作 者：宋雷鸣
|
||
* 开发时间: 2011年4月4日
|
||
*/
|
||
|
||
|
||
//页面左侧树形菜单的面板
|
||
function TreePanel() {
|
||
//this.load();
|
||
}
|
||
//三级菜单（树形菜单），是否全部展开
|
||
//yes：全部展开；no:全部关闭；def:默认，打开第一个
|
||
TreePanel.TreeIsShow = "yes";
|
||
//菜单条的打开方式，1：同时打开多个；2：同一时刻只打开一个
|
||
TreePanel.TreeBarOpen = "1";
|
||
//数据源
|
||
TreePanel.DataSource = null;
|
||
//载入数据
|
||
TreePanel.prototype.load = function () {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "Panel/TreePanel.aspx?timestamp=" + new Date().getTime(),
|
||
dataType: "html",
|
||
data: {},
|
||
//开始，进行预载
|
||
beforeSend: function (XMLHttpRequest, textStatus) {
|
||
treePanleLoading();
|
||
},
|
||
//加载出错
|
||
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
||
if (unloadfunc != null) {
|
||
alert(textStatus);
|
||
unloadfunc();
|
||
}
|
||
},
|
||
//加载成功！
|
||
success: function (data) {
|
||
//alert(data);
|
||
SetManageMenu(data);
|
||
unTreePanleLoading();
|
||
}
|
||
});
|
||
//生成左侧的根菜单树
|
||
function SetManageMenu(data) {
|
||
var tree = new TreePanel();
|
||
//左侧区域
|
||
var pl = $("#consTreePanel");
|
||
pl.html(data);
|
||
TreeInit("#consTreePanel");
|
||
TreeEvent("#consTreePanel");
|
||
tree.focus();
|
||
//设置节点前的图标与连线样式
|
||
pl.find(".nodeIco").each(function () {
|
||
var num = Number($(this).find("img").size());
|
||
$(this).width(num * 18);
|
||
$(this).css("float", "left");
|
||
});
|
||
$(".treepanel").height($("#consContextPanel").height());
|
||
$(".treepanel").css("background-image", "url(" + $("#consTreePanel").attr("bg") + ")");
|
||
//如果不是超管，则进行权限判断；
|
||
//emplyeeIsAdmin与emplyeeId参数，来自于console.aspx页面初始化
|
||
if (emplyeeIsAdmin != 0) {
|
||
//$().SoapAjax("Purview","GetAll4Array",{empId:emplyeeId},RemoveOnPur,treePanleLoading,unTreePanleLoading);
|
||
}
|
||
}
|
||
//管理界面左侧,功能菜单区的预载框
|
||
function treePanleLoading() {
|
||
var treepanel = $("#consTreePanel");
|
||
var offset = treepanel.offset();
|
||
var html = "<div id=\"treePanleLoadingMask\">";
|
||
html += "<div>正在加载……<br/>";
|
||
html += "<img src=\"Images/loading/load_016.gif\"></div>";
|
||
html += "</div>";
|
||
$("body").append(html);
|
||
var mask = $("#treePanleLoadingMask");
|
||
mask.css("position", "absolute");
|
||
mask.css("z-index", "2000");
|
||
var h = document.documentElement.clientHeight;
|
||
var offset = $("#consBody").offset();
|
||
var height = h - offset.top - $("#consFoot").height();
|
||
mask.css("width", treepanel.width());
|
||
mask.css("height", height);
|
||
mask.css("top", offset.top);
|
||
mask.css("left", offset.left);
|
||
mask.css("background-color", "#ffffff");
|
||
var alpha = 100;
|
||
mask.css("filter", "Alpha(Opacity=" + alpha + ")");
|
||
mask.css("display", "block");
|
||
mask.css("-moz-opacity", alpha / 100);
|
||
mask.css("opacity", alpha / 100);
|
||
mask.fadeIn("slow");
|
||
}
|
||
|
||
//去除，管理界面左侧,功能菜单区的预载界面
|
||
function unTreePanleLoading() {
|
||
$("#treePanleLoadingMask").fadeOut();
|
||
}
|
||
}
|
||
|
||
//设置当前面板为焦点
|
||
TreePanel.prototype.focus = function (id) {
|
||
//左侧区域
|
||
var pl = $("#consTreePanel");
|
||
//标题的焦点
|
||
pl.find(".titlePanel div").attr("class", "out");
|
||
pl.find("div[class='treepanel']").hide();
|
||
if (id != null) {
|
||
pl.find(".titlePanel div[id='consTreeTitle_" + id + "']").attr("class", "current");
|
||
pl.find("div[id='consTreePanel_" + id + "']").show();
|
||
} else {
|
||
pl.find(".titlePanel div:first").attr("class", "current");
|
||
pl.find("div[class='treepanel']:first").show();
|
||
}
|
||
//取出所有的tree面板
|
||
var panel = pl.find("div[class='treepanel']");
|
||
}
|
||
|
||
//树形的初始化，例如图标设置
|
||
function TreeInit(panel) {
|
||
//菜单条,有下级节点的
|
||
var bar = $(panel + " div[type='menuBar'][IsChilds='True']");
|
||
//设置所有为关闭状态
|
||
//bar.attr("class","menuBar menuBarClose");
|
||
//如果全部展开
|
||
if (TreePanel.TreeIsShow == "yes") {
|
||
bar.attr("openstate", "true");
|
||
bar.attr("class", "menuBar menuBarOpen");
|
||
bar.next().show();
|
||
}
|
||
//如果全部关闭
|
||
if (TreePanel.TreeIsShow == "no") {
|
||
bar.attr("openstate", "false");
|
||
bar.attr("class", "menuBar menuBarClose");
|
||
bar.next().hide();
|
||
}
|
||
//默认状态，打开第一个菜单，其余关闭
|
||
if (TreePanel.TreeIsShow == "def") {
|
||
bar.attr("openstate", "false");
|
||
bar.attr("class", "menuBar menuBarClose");
|
||
bar.next().hide();
|
||
var first = $("div[class='treepanel']").find("div[type='menuBar']:first");
|
||
first.attr("openstate", "true");
|
||
first.attr("class", "menuBar menuBarOpen");
|
||
first.next().show();
|
||
}
|
||
}
|
||
//树形菜单事件，如打开折叠等
|
||
function TreeEvent(panel) {
|
||
//左侧区域标题项的事件
|
||
$(panel + " .titlePanel div").click(function () {
|
||
var thisId = $(this).attr("id");
|
||
thisId = thisId.substring(thisId.indexOf("_") + 1);
|
||
var tree = new TreePanel();
|
||
tree.focus(thisId);
|
||
});
|
||
//菜单条的事件
|
||
$(panel + " div[IsChilds='True'][type='menuBar']").click(function () {
|
||
var n = $(this).next();
|
||
var state = $(this).attr("openstate");
|
||
if (TreePanel.TreeBarOpen == "1") {
|
||
if (state == "true") {
|
||
n.slideUp();
|
||
$(this).attr("openstate", "false");
|
||
$(this).attr("class", "menuBar menuBarClose");
|
||
} else {
|
||
n.slideDown();
|
||
$(this).attr("openstate", "true");
|
||
$(this).attr("class", "menuBar menuBarOpen");
|
||
}
|
||
}
|
||
//打开当前的，其它的则关闭
|
||
if (TreePanel.TreeBarOpen == "2") {
|
||
//兄弟节点
|
||
var sibl = $(this).siblings("div[IsChilds='True'][type='menuBar']");
|
||
//自身节点的处理
|
||
if (state == "true") {
|
||
n.slideUp();
|
||
$(this).attr("openstate", "false");
|
||
$(this).attr("class", "menuBar menuBarClose");
|
||
} else {
|
||
n.slideDown();
|
||
$(this).attr("openstate", "true");
|
||
$(this).attr("class", "menuBar menuBarOpen");
|
||
}
|
||
//兄弟节点的处理
|
||
sibl.attr("openstate", "false");
|
||
sibl.attr("class", "menuBar menuBarClose");
|
||
sibl.next().slideUp();
|
||
}
|
||
});
|
||
//当点击节点前的图标时，如加减号文件夹图标
|
||
$(panel + " div[IsChilds='True'][type='nodeIco']").click(function () { //alert(1);
|
||
//栏目图标，文件夹或文件图标
|
||
var last = $(this).find("img:last");
|
||
//节点图标，加号或┝号
|
||
var pre = last.prev();
|
||
tranImg(pre, "plus.gif", "minus.gif");
|
||
tranImg(pre, "minusbottom.gif", "plusbottom.gif");
|
||
tranImg(last, "folderopen.gif", "folder.gif");
|
||
$(this).parent().next().slideToggle();
|
||
var state = $(this).attr("state");
|
||
$(this).attr("state", state == "true" ? "false" : "true");
|
||
});
|
||
//当点击节点文本时
|
||
$(panel + " div[type='text'][IsChilds='True']").click(
|
||
function () { //alert($(this).parent().html());
|
||
//栏目图标，文件夹或文件图标
|
||
var last = $(this).parent().find("div:first").find("img:last");
|
||
//节点图标，加号或┝号
|
||
var pre = last.prev();
|
||
tranImg(pre, "plus.gif", "minus.gif");
|
||
tranImg(pre, "minusbottom.gif", "plusbottom.gif");
|
||
tranImg(last, "folderopen.gif", "folder.gif");
|
||
$(this).parent().next().slideToggle();
|
||
var state = $(this).attr("state");
|
||
$(this).attr("state", state == "true" ? "false" : "true");
|
||
}
|
||
);
|
||
//根节点事件
|
||
$(panel).find("a").click(function () {
|
||
var type = $(this).parent().attr("nodetype");
|
||
var link = $(this).attr("href");
|
||
var id = $(this).parent().attr("nodeId");
|
||
var name = $(this).text();
|
||
var path = $(this).parent().attr("path");
|
||
switch (type) {
|
||
case "link": //如果是外部链接，直接打开
|
||
return true;
|
||
case "open": //如果是弹出窗口
|
||
new PageBox(name, link, 50, 50).Open();
|
||
return false;
|
||
case "item":
|
||
default:
|
||
var p = new PagePanel();
|
||
p.add(name, path, link, id);
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
//处理点前图片的替换效果
|
||
//element:节点的元素
|
||
//img1:原图片
|
||
//img2:新图片
|
||
function tranImg(el, img1, img2) {
|
||
if (el.attr("src").indexOf(img1) > 0)
|
||
el.attr("src", el.attr("src").replace(img1, img2));
|
||
else
|
||
if (el.attr("src").indexOf(img2) > 0)
|
||
el.attr("src", el.attr("src").replace(img2, img1));
|
||
} |