您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 使用xml構(gòu)建Ext menu菜單

使用xml構(gòu)建Ext menu菜單

文章來源：365jz.com 點(diǎn)擊數(shù)：872 更新時(shí)間：2015-09-16 20:11 參與評論

廢話就不多說了，將主要代碼及效果圖附上：
菜單效果：

、

代碼如下：

var menuObj=[{
  text:"快捷",
  icon:'etc/default/images/icons/quick.gif'
    },'-'];
//下面兩個(gè)函數(shù)用于解析xml為樹結(jié)構(gòu)輸出
function createXMLMenu(xmlsrc) {
    var xmlDom=loadXML(xmlsrc);  //加載xml串或url，loadXML函數(shù)的定義見http://ajaxbbs.net/blog/post/268/
    var str=menuItemFromXML(xmlDom.documentElement||xmlDom);
    return str;
}
function menuItemFromXML(XmlEl) {
    var t=((XmlEl.nodeType==3)?XmlEl.nodeValue:XmlEl.tagName);
    if(t.replace(/\s/g,'').length==0){return null}
    var result = {  //構(gòu)建菜單項(xiàng)
      text : t,  //菜單文本讀取xml標(biāo)記
      icon:'etc/default/images/icons/quick.gif'  //圖標(biāo)
    };

    if(XmlEl.nodeType==1){  //節(jié)點(diǎn)
        Ext.each(XmlEl.attributes,function(a){
            if(a.nodeName=="href"&&XmlEl.hasChildNodes()) return;    //目錄不添加鏈接屬性
            result[a.nodeName=="href"?"url":a.nodeName]=a.nodeValue;  //添加屬性到當(dāng)前菜單項(xiàng)中
        });

        Ext.each(XmlEl.childNodes,function(el){  //解析子節(jié)點(diǎn)，生成子菜單
            if((el.nodeType==1)||(el.nodeType ==3)){
                var c=menuItemFromXML(el);
                if(c){
      if(!result["menu"]){  //如果還沒有子菜單，則添加menu屬性
                    result["menu"]={
                          cls:"menu",
                          items:[c]  //將當(dāng)前項(xiàng)加入到menu的items中
        }
                  }else{
                    result["menu"]["items"].push(c);  //否則直接添加到items中
                  }
             }
            }
        });
    }
    return result;
}
menuObj.push(createXMLMenu("etc/menu.xml"));  //將創(chuàng)建的菜單項(xiàng)添加到menuObj中
//繼續(xù)添加其他菜單
menuObj=menuObj.concat(['-',{
                text: '主頁',
                handler:function(){window.open('http://192.168.3.1');},
                icon:'etc/default/images/icons/home.gif'
            },{
                text: '重新登陸',
                handler:function(){onrelogin();},
                icon:'etc/default/images/icons/work.gif'
            },{
                text: '更改密碼',
                handler:function(){changePassword();},
                icon:'etc/default/images/icons/knowledge.gif'
            },{
                text: '退出',
                handler:function(){window.close();window.open('index.htm');},
                icon:'etc/default/images/icons/exit.gif'
            }
]);

//創(chuàng)建菜單面板
var menu = new Ext.menu.Menu({
  id: 'mainMenu',
  cls:"menu",
  items: menuObj
});