?? popupmenu-script.js
字號:
?/**
*使用window.createPopup()制作的無限級(出于效率考慮，目前限制為10級)菜單，該菜單不會被任何東西遮住，而且可以跨框架
*菜單共有兩個js文件，popupmenu-script.js和popupmenu-loadxml.js，以及一個存儲樣式的xml文件：popupmenu-style.xml
*該文件名為popupmenu-script.js，是制作菜單的主要腳本。
*作者：tiannet(曾次清)
*時間：2006年06月15日
*/
var resourceDir = "";
var contextPath; //虛擬目錄別名(與jsp中的contextPath意義相同)
var menuItemVSSubItems= new Array();//存儲一個菜單項對應的所有子菜單項
var aPopupWindows = new Array();//Popup窗口組
var mapIdVSItemInfos = new Array();//以id作為key，parentId作為value的集合
var ALLOWED_DEGREE = 10;//允許得菜單等級
var mapIdVSItemsHtml = new Array();//菜單id與子菜單顯示的html內容的對應關系（如果有子菜單的話）
var rootMenuId = -1;//根菜單ID
var isFirstWriteMenu = true;//是否第一次輸出菜單
// -------- 主菜單樣式相關定義 ---------//
//定義主菜單樣式
var m_strMainMenuStyle = "";
//主菜單項的樣式attribute
var m_strMainMenuItemStyle = "";
//主菜單項樣式Property
var m_strMMItemProBase = {};
//主菜單項鼠標懸停樣式Property
var m_strMMItemProMOver = {};
//菜單項與項之間的分割圖片
var m_strMMItemSplitImg;
// -------- 子菜單樣式相關定義 ---------//
//定義子菜單樣式
var m_strSubMenuStyle = "";
//子菜單項的樣式attribute
var m_strSubMenuItemStyle = "";
//子菜單項樣式Property
var m_strSMItemProBase = {};
//子菜單項鼠標懸停樣式Property
var m_strSMItemProMOver = {};
//子菜單項下邊框樣式(作為分割線)
var m_strSMItemBorderB = "";
// -------- end 菜單樣式相關的變量定義 ---------//
//構造函數
//@param dir 資源文件所在目錄（指圖標所在目錄等）
//@param style 樣式文件xml
function PopupMenu(dir,style) {
resourceDir = dir;
this.resourceDir = resourceDir;
if( style && style != "" ) {
this.styleFile = style;
}
}
PopupMenu.prototype.styleFile = "popupmenu-style.xml";
//設置虛擬目錄的別名
//如果設置了該參數，則在打開菜單鏈接時會在指定的鏈接前加上該參數。不過以http開頭的鏈接除外
PopupMenu.prototype.setContextPath = function( path ) {
contextPath = path;
}
// ------------------------------ begin 用戶可調函數得編寫 -------------------------------------//
//添加菜單項：add
//得到主菜單項：getMainItems
//得到一個菜單項的下屬子菜單：getItems
//添加一個菜單項
//@param id 菜單id，確保唯一。
//@param parentId 父菜單id。
//@param text 菜單文本
//@param action 菜單執行的動作，可以是一個鏈接地址，也可以是一段腳本或一個函數。
//@param target 執行菜單動作的目標，如果是執行一段javascript，請傳入js或javascript
//@param icon 菜單前顯示的圖標
PopupMenu.prototype.add = function(id, parentId, text, action, target, icon) {
var a = {
"id" : id,
"parentId" : parentId,
"icon" : icon,
"text" : text,
"action" : action,
"target" : target
};
if( !icon || icon == "" ) {
a.icon = null;
}
if( a.icon && a.icon != null && resourceDir && resourceDir != "" ) {
a.icon = resourceDir + a.icon;
}
a.degree = null;
a.fromIds = null;
//id 與菜單項數據的對應關系
mapIdVSItemInfos[id] = a;
//將子菜單加入到對應的父菜單記錄中
if( !menuItemVSSubItems[parentId] ) {
menuItemVSSubItems[parentId] = new Array();
}
menuItemVSSubItems[parentId].push( a );
return;
}//end method add
//從xml中加載菜單數據，并且調用add方法添加
PopupMenu.prototype.loadDataFromXml = function( strDataFile ) {
//如果數據件指定的不是絕對路徑，則加上資源目錄
if( strDataFile.substring(0,1) != "/" && this.resourceDir && this.resourceDir != "" ) {
strDataFile = this.resourceDir + strDataFile;
}
var aData = getMenuData( strDataFile );
for( var i = 0;i < aData.length;i ++ ) {
this.add( aData[i].id, aData[i].parentId, aData[i].text, aData[i].action, aData[i].target, aData[i].icon);
}
}
//輸出菜單
PopupMenu.prototype.write = function(rootId) {
if(typeof(rootId) == "undefined") {
rootId = rootMenuId;
}
//輸出主菜單
document.write(this.getHtml(rootId));
}
//得到輸出菜單的HTML代碼
PopupMenu.prototype.getHtml = function(rootId) {
if(typeof(rootId) == "undefined") {
rootId = rootMenuId;
}
rootMenuId = rootId;
if( !isFirstWriteMenu ) {
//將所有菜單數據的等級和歷經的菜單ID設為null
for( var id in mapIdVSItemInfos ) {
mapIdVSItemInfos[id].degree = null;
mapIdVSItemInfos[id].fromIds = null;
mapIdVSItemInfos[id].preObj = null;
}
//將菜單ID與其子菜單HTML對應關系清空
mapIdVSItemsHtml.length = 0;
//清空popup窗口
aPopupWindows.length = 0;
prevMainMenuItemObj = null;
}
isFirstWriteMenu = false;///調用了該方法意味著不是第一次輸出菜單
//加載菜單樣式
var styleFile = this.styleFile;
//如果樣式文件指定的不是絕對路徑，則加上資源目錄
if( styleFile.substring(0,1) != "/" && this.resourceDir && this.resourceDir != "" ) {
styleFile = this.resourceDir + styleFile;
}
//alert(styleFile);
loadPopupMenuStyle( styleFile );
//輸出主菜單
return mainItemsToHtml( getItems(rootId) );
}
//得到指定菜單項的子菜單數據
PopupMenu.prototype.getSubData = function(id) {
return getItems(id);
}
// ------------------------------ end 用戶可調函數得編寫 -------------------------------------//
//根據菜單標識得到它下屬的子菜單數據，如果沒有，則返回false
function getItems ( id ) {
if( !hasChildren( id ) ) {
return false;
}
return menuItemVSSubItems[id];
}
//得到用于顯示一個菜單項下屬的子菜單項的窗口
//@param degree 菜單項的等級（主菜單下的視為一級）
function getPopup( degree ) {
if( !aPopupWindows[degree] ) {
aPopupWindows[degree] = aPopupWindows[degree - 1].document.parentWindow.createPopup();
}
return aPopupWindows[degree];
}
//得到菜單等級
//@param menuId 菜單ID
function getMenuDegree(menuId) {
if(mapIdVSItemInfos[menuId].degree == null) {
countMenuDegree(menuId);
}
return mapIdVSItemInfos[menuId].degree;
}//end getMenuDegree
//得到菜單所經歷的菜單等級
//@param menuId 菜單ID
function getMenuFromIds( menuId) {
if(mapIdVSItemInfos[menuId].fromIds == null) {
countMenuDegree(menuId);
}
return mapIdVSItemInfos[menuId].fromIds;
}//end getMenuFromIds
//計算菜單等級以及所經歷的菜單
//@param menuId 菜單ID
function countMenuDegree(menuId) {
var parentId = mapIdVSItemInfos[menuId].parentId;
var nextId = parentId;
var degree = 0;//菜單項的等級
var aFromIds = new Array();
//aFromIds.push( parentId );
while( nextId != rootMenuId && degree <= ALLOWED_DEGREE ) {
aFromIds.push( parentId );
parentId = mapIdVSItemInfos[nextId].parentId;
nextId = parentId;
degree ++;
}
mapIdVSItemInfos[menuId].degree = degree;
mapIdVSItemInfos[menuId].fromIds = aFromIds;
}
//隱藏從指定id(菜單項)所在窗口所創建的所有窗口
function hideAllParentPopup( id ) {
var degree = getMenuDegree(id);
//隱藏該級的彈出窗口即可
if( aPopupWindows[degree] ) {
aPopupWindows[degree].hide();
}
}
// ------------------------------ end 菜單項數據處理函數 -------------------------------------//
// ------------------------------ 將菜單數據轉換為html代碼的函數 -------------------------------------//
///////////////////////////////////////////////////////////////////////////////////////////////////////
//將主菜單項變為html代碼
//@param items 菜單項數據，如果未傳遞則使用全局的mainItems
//同時創建以菜單id為索引的Popup窗口
function mainItemsToHtml (items) {
var aHtml = new Array();
aHtml.push( "<table unselectable='on' style='"+m_strMainMenuStyle+"'>");
aHtml.push( "<tr>" );
for( var i = 0;i < items.length;i ++ ) {
aHtml.push ( "<td align=center unselectable='on'>" );
aHtml.push ( "<div style='width:100%;' unselectable='on' id=\"" + items[i].id + "\" " );
aHtml.push ( " style='" + m_strMainMenuItemStyle + "' " );
aHtml.push ( " onmouseover=mainMenuOverStyle(\"" + items[i].id + "\",this);" );
aHtml.push ( "showItemsOfMain(\"" + items[i].id + "\");" );
aHtml.push ( " onmouseout=mainMenuOutStyle(\"" + items[i].id + "\",this); " );
//aHtml.push(" onclick=execute(\"" + items[i].id + "\"); ");
aHtml.push(" onclick=showItemsOfMain(\"" + items[i].id + "\"); ");
aHtml.push ( ">" + items[i].text + "</div> " );
aHtml.push ( "</td>" );
//如果用戶設置了分割圖片則輸出
if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
aHtml.push ( "<td style='" + m_strMMItemSplitImg + "' width=2></td>" );
}
}
aHtml.push ( "</tr></table>" );
//創建一級popup窗口
aPopupWindows[0] = window.createPopup();
return aHtml.join("");
}
//得到菜單的下屬子菜單HTML代碼
function getSubItemsHtml(menuId) {
if(typeof(mapIdVSItemsHtml[menuId]) == "undefined") {
var aItems = menuItemVSSubItems[menuId];
var aHtml = new Array();
aHtml.push("<table cellspacing='0' cellpadding='0' unselectable='on' style='" + m_strSubMenuStyle + "'>");
for( var i = 0;i < aItems.length;i ++ ) {
aHtml.push( itemToHtml( aItems[i] ) );
}
aHtml.push( "</table>" );
mapIdVSItemsHtml[menuId] = aHtml.join("");
}
return mapIdVSItemsHtml[menuId];
}
//將一個菜單項(非主菜單項)變為html代碼，以<tr>開頭，</tr>結尾
function itemToHtml(aItemData) {
//是否包含子菜單
var blnHasChildren = hasChildren( aItemData.id );
//菜單所在等級
var degree = getMenuDegree(aItemData.id);
//var blnHasChildren,degree;
var parents = "";
for( var i = 0;i < degree;i ++ ) {
parents += "parent.";
}
var aHtml = new Array();
aHtml.push( "<tr unselectable='on' ");
aHtml.push(" style='" + m_strSubMenuItemStyle + "' ");//菜單項的樣式
aHtml.push(" onmouseover=" + parents + "showItems(this,\"" + aItemData.id + "\");");
aHtml.push(parents + "subMenuOverStyle(\"" + aItemData.id + "\",this); ");
aHtml.push(" onmouseout=" + parents + "subMenuOutStyle(\"" + aItemData.id + "\",this); ");
aHtml.push(" onclick=" + parents + "execute(\"" + aItemData.id + "\"); ");
aHtml.push( ">" );//tr結束的符號
//圖標列
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -