javascript+xml实现二级下拉菜单一_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

javascript+xml实现二级下拉菜单一

作者：闵涛文章来源：闵涛的学习笔记点击数：1438 更新时间：2009/4/23 11:26:53

　　一、简单说明

该菜单最大的优点是可以跨过网页上任何标签，甚至是框架，（一般的菜单会被select,object,flash等挡住）所以如果你有这方面的需要，那么这个菜单是个很好的选择。

总体而言，它有如下特性：

（1）菜单的样式和数据都是通过xml配置

（2）菜单的样式可以随心所欲修改，如：

<base>
<background-color>#DDDDDD</background-color>
<background-image>url(menu_bg.jpg)</background-image>
<font-size>10pt</font-size>
<color>#000099</color>
<width>100%</width>
<height>32</height>
<text-align>center</text-align>
<cursor>default</cursor>
</base>

只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。

（3）主菜单项之间可以设置分割图片，子菜单项可以设置分割线的样式。

（4）所有图片都由css控制，避免路径问题。

（5）可以设置虚拟目录的别名，为菜单链接使用绝对路径带来方便，如：

<context>
<path>hdsa</path>
</context>

设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup()，所以它被限制在IE5.5以上，而且子菜单如果是新开窗口，会被拦截。

注：用window.createPopup()制作菜单受到过前人的启发

设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup()，所以它被限制在IE5.5以上，而且子菜单如果是新开窗口，会被拦截。

注：用window.createPopup()制作菜单受到过前人的启发
=====================================================================

二、实现的两个脚本可以写在一个文件中：

（1）处理Popup窗口的脚本

//------------------ 下面一些函数用来处理弹出窗口　------------------ //
var pops = new Array(); // 用来存储Popup窗口家族的数组
function CreatePopup(degree)
{
if (degree < 0)　　// 层数不能小于0
return null;
if (pops[degree] != null) //如果已经存在则不需创建
return pops[degree];

if (degree == 0)
pops[0] = window.createPopup(); //创建最顶层Popup窗口
else{
if (pops[degree - 1] == null)
pops[degree - 1] = CreatePopup(degree - 1)　　//递归回溯从第一层开始创建
pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口
}
pops[degree].document.body.setAttribute("degree", degree);
return pops[degree];
}

CreatePopup(1); //创建一个2层的Popup家族

var oPopup = pops[0];
var timer = null;

/**
*显示一级子菜单
*@param objShow - 显示子菜单的对象
*@param strGetID - 存储显示内容的标签id
*/
function showSubMenu1(objShow,strGetID) {
clearTimer();
endHideSubMenu();
var objGet = eval(document.getElementById(strGetID));

pops[1].hide();
pops[0].document.body.innerHTML = objGet.innerHTML;
pops[0].show(0,0,1,1,objShow);
var intWidth = pops[0].document.body.scrollWidth;
var intHeight = pops[0].document.body.scrollHeight;
pops[0].hide();
pops[0].show(10,objShow.offsetHeight-2,intWidth,intHeight,objShow);
}

/**
*显示二级菜单
*@param strGetID - 存储显示内容的标签id
*@param objTr - 显示子菜单的tr对象
*/
function showSubMenu2(strGetID,objTr) {
clearTimer();
endHideSubMenu();
var objGet = eval(document.getElementById(strGetID));
pops[1].document.body.innerHTML = objGet.innerHTML;
pops[1].show(0,0,1,1,pops[0].document.body);
var intWidth = pops[1].document.body.scrollWidth;
var intHeight = pops[1].document.body.scrollHeight;
pops[1].hide();
pops[1].show(objTr.offsetWidth - 2,-2, intWidth, intHeight, objTr);

}

//隐藏一级子菜单
function hideSubMenu1(){
//pops[0].hide();
window.setTimeout("pops[0].hide()", 1000);
}

//隐藏二级子菜单
function hideSubMenu2()
{
//clearTimer();
//timer = window.setTimeout("pops[1].hide()", 1000);
pops[1].hide();
}

//隐藏所有下拉菜单
function hideSubMenu()
{
if(pops[0] != null)pops[0].hide();
if(pops[1] != null)pops[1].hide();
}

function clearTimer()
{
if (timer != null)
window.clearTimeout(timer)
timer = null;
//alert("OK");
}

（2）读取分析xml数据文件，打印菜单的脚本

//位置信息
var m_strTitle = "您的位置->";

// -------- 主菜单样式相关定义 ---------//

//定义主菜单样式
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 = "";

//定义虚拟目录路径
var m_strContextPath = "";

//菜单xml数据文件对象
var m_doc;

//主菜单集合
var m_objMMList;

var STR_POS_FRONT = "您的位置：";

//loadMenu("main_menu.xml");
/**
*加载菜单
*@param strXMLPath - XML数据文件所在路径及文件名
*/
function loadMenu(strXMLFile) {
m_doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
m_doc.async = false;
m_doc.load(strXMLFile);

getMainMenuStyle();
getSubMenuStyle();

//得到主菜单集合
m_objMMList = m_doc.selectSingleNode("//popmenu/menus").childNodes;

//得到虚拟目录
if( m_doc.selectSingleNode("//popmenu/context/path") ) {
m_strContextPath = m_doc.selectSingleNode("//popmenu/context/path").text;
}

//输出主菜单
printMainMenu();
//输出一级子菜单
printSubMenu();

}

/**
*鼠标移入移出主菜单样式的改变
*@param obj - 改变样式的对象
*@param bolChg - 是否改变样式
*/
function chgMainMenuStyle(obj,bolChg)
{
if ( bolChg ) {//鼠标悬停改变颜色
for( var pro in m_strMMItemProMOver ) {
obj.style[pro] = m_strMMItemProMOver[pro];
}
} else {//鼠标移出
obj.style.border = "0";
for( var pro in m_strMMItemProBase ) {
obj.style[pro] = m_strMMItemProBase[pro];
}
}
}//end function chgMainMenuStyle(obj,i)

/**
*鼠标移入移出子菜单样式的改变
*@param obj - 改变样式的对象
*@param bolChg - 是否改变样式
*/
function chgSubMenuStyle(obj,bolChg) {
if ( bolChg ) {//鼠标悬停改变颜色
for( var pro in m_strSMItemProMOver ) {
obj.style[pro] = m_strSMItemProMOver[pro];
}
} else {//鼠标移出
for( var pro in m_strSMItemProBase ) {
obj.style[pro] = m_strSMItemProBase[pro];
}
}
}//end function chgSubMenuStyle(obj,i)

/**
*构造节点样式
*@param strPath 节点路径
*/
function getNodeStyle(strPath) {
var strStyle = "";
if( m_doc.selectSingleNode(strPath) ) {
var nodeList = m_doc.selectSingleNode(strPath).childNodes;
for( var i = 0;i < nodeList.length;i ++ ) {
var nodeName = nodeList[i].nodeName;
var nodeText = nodeList[i].text;
strStyle += nodeName.toLowerCase() + ":" + nodeText + ";";
}
}
return strStyle;
}
/**
*构造节点Style Property
*/
function getNodeProperty(strPath) {
var arrProperty = {};
if( m_doc.selectSingleNode(strPath) ) {
var nodeList = m_doc.selectSingleNode(strPath).childNodes;
for( var i = 0;i < nodeList.length;i ++ ) {
var nodeName = nodeList[i].nodeName;
nodeName = nodeName.toLowerCase();
var nodeText = nodeList[i].text;
//由attribute到property的转变。如background-color -> backgroundColor
var aName = nodeName.split("-");
var strProperty = aName[0];
for( var j = 1;j < aName.length;j ++ ) {
strProperty += aName[j].substring(0,1).toUpperCase() + aName[j].substr(1);
}
arrProperty[strProperty] = nodeText;
}
}
return arrProperty;
}

/**
*得到主菜单样式
*/
function getMainMenuStyle() {

//得到主菜单样式
m_strMainMenuStyle = getNodeStyle("//popmenu/style/main-menu/base");
//得到主菜单项样式
m_strMainMenuItemStyle = getNodeStyle("//popmenu/style/main-menu/menu-item/base");

//主菜单项的property
m_strMMItemProBase = getNodeProperty("//popmenu/style/main-menu/menu-item/base");

//得到鼠标悬停时主菜单项各property改变
m_strMMItemProMOver = getNodeProperty("//popmenu/style/main-menu/menu-item/mouse-over");

//得到菜单项与项之间的分割图片
if( m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image") ) {
var node = m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image");
m_strMMItemSplitImg = "background-image:" + node.text + ";";
m_strMMItemSplitImg += "background-repeat:no-repeat;background-position:center center;";
}

}//end function getMainMenuStyle()

/**
*得到主菜单样式
*/
function getSubMenuStyle() {

//得到子菜单样式
m_strSubMenuStyle = getNodeStyle("//popmenu/style/sub-menu/base");
//得到子菜单项样式
m_strSubMenuItemStyle = getNodeStyle("//popmenu/style/sub-menu/menu-item/base");

//子菜单项的property
m_strSMItemProBase = getNodeProperty("//popmenu/style/sub-menu/menu-item/base");

//得到鼠标悬停时子菜单项各property改变
m_strSMItemProMOver = getNodeProperty("//popmenu/style/sub-menu/menu-item/mouse-over");

//得到子菜单项下边框样式(作为分割线)
if( m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line") ) {
var node = m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line");
m_strSMItemBorderB = "border-bottom:" + node.text + ";";
}

}//end function getSubMenuStyle()

var m_bolFirst = true;//是否首次响应菜单
document.onclick = function(){
m_bolFirst = true;
//alert(parent.frames[0]);
}
top.document.onclick = function(){
m_bolFirst = true;
}

/**
*展开各个主菜单
*@param objTd - 主菜单所在td
*@param strSubMenuID - 对应子菜单的id
*@param bolExistSubMenu - 是否存在子菜单
*/
function spreadMainMenu(objTd,strSubMenuID,bolExistSubMenu){

var strEvent = event.type.toLowerCase();

if( !pops[0].isOpen && strEvent == "mouseover" && m_bolFirst){
return;
}
if( pops[0].isOpen && strEvent == "click"){
return;
}
chgMainMenuStyle(objTd,true);
endHideSubMenu();
if( bolExistSubMenu ){
//如果有子菜单
showSubMenu1(objTd,strSubMenuID);
} else　{
//hideSubMenu();
//m_bolFirst = false;//已不是第一次响应菜单
}
}

//打印主菜单
function printMainMenu()
{
var divStyle = "width:100%;";
var strHtml = "";
strHtml = "<div style='" + divStyle + "'>";
strHtml += "<table style='"+m_strMainMenuStyle+"'　id='mm' cellpadding='3'><tr>";
//如果用户设置了分割图片则输出
if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
strHtml += "

[1] [2] 下一页

[Web开发]XML与HTML在语法上的主要区别详解  [系统软件]如何让Expat支持中文XML
[VB.NET程序]vb.net 与 XML 的操作  [VB.NET程序]vb.net读写xml(2)--实现datagrid与xml的沟通（原创…
[VB.NET程序]vb.net 读写xml方法(1)  [VB.NET程序][VB.NET+XML]完成简单程序配置
[VB.NET程序]使用Visual Basic操纵XML文档  [VB.NET程序]XML 简单接口（SAX2）用Visual Basic 实现的示例
[Delphi程序]Delphi 6 XML映象工具  [Delphi程序]Delphi 6 XML数据绑定

教程录入：mintao 责任编辑：mintao

上一篇教程： Javascript+DOM访问XML文件数据实例

下一篇教程：漂浮广告代码完全解析

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……