您現在的位置: 365建站網 > 365學習 > 使用xml構建Ext menu菜單

使用xml構建Ext menu菜單

文章來源:365jz.com     點擊數:767    更新時間:2015-09-16 20:11   參與評論
廢話就不多說了,將主要代碼及效果圖附上:
菜單效果:
、

代碼如下:

var menuObj=[{
  text:"快捷",
  icon:'etc/default/images/icons/quick.gif'
    },'-'];
//下面兩個函數用于解析XML為樹結構輸出
function createXMLMenu(xmlsrc) {
    var xmlDom=loadXML(xmlsrc);  //加載xml串或url,loadXML函數的定義見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 = {  //構建菜單項
      text : t,  //菜單文本讀取xml標記
      icon:'etc/default/images/icons/quick.gif'  //圖標
    };
    
    if(XmlEl.nodeType==1){  //節點
        Ext.each(XmlEl.attributes,function(a){
            if(a.nodeName=="href"&&XmlEl.hasChildNodes()) return;    //目錄不添加鏈接屬性
            result[a.nodeName=="href"?"url":a.nodeName]=a.nodeValue;  //添加屬性到當前菜單項中
        });

        Ext.each(XmlEl.childNodes,function(el){  //解析子節點,生成子菜單
            if((el.nodeType==1)||(el.nodeType ==3)){
                var c=menuItemFromXML(el);
                if(c){
      if(!result["menu"]){  //如果還沒有子菜單,則添加menu屬性
                    result["menu"]={
                          cls:"menu",
                          items:[c]  //將當前項加入到menu的items中
        }
                  }else{
                    result["menu"]["items"].push(c);  //否則直接添加到items中
                  }
             }
            }
        });
    }
    return result;
}
menuObj.push(createXMLMenu("etc/menu.xml"));  //將創建的菜單項添加到menuObj中
//繼續添加其他菜單
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'
            }
]);

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

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (767人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 美女黄禁止18以下看免费无毒| 女人天堂| caoporn97免费公开视频| 欧美60老妇p|us| 初尝办公室人妻少妇| 天天夜日日日日碰日日摸日日澡| 天天鲁夜夜啪视频在线| 狠狠狠的在啪线香蕉| 大伊香蕉av最新播放| 亚洲大乳高潮日本专区| 欧美v日韩v亚洲v最新在线观看| 男女作爱免费网站| 太长了太大了撑坏了h| 情色五月天| 午夜免费福利小电影| 国产精品永久免费| 边吻边摸下面视频免费| 亚洲免费无码中文在线亚洲在| 精品国精品国产自在久国产| 女邻居丰满的奶水在线观看| 18禁止观看美女脱裤子男生桶| 超清无码一区二区三区| 国产精品无码一区二区在线观看| 男人的天堂免费观看tv| 快穿吃肉一女多男| 丫头你的奶水真多| 在线 偷拍 欧美 动漫| 无码国产精品一区二区免费| 小棒堵住前面不让流出来| 两对夫妇互换当面做真实视频| 影音先锋每日最新av资源网| http://www.icpear.com