中资源
中国设计秀设计资源站
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
广州网站设计 维美网站建设 域名注册 虚拟主机 广州网站建设 广州网页设计 虚拟主机 域名注册 素材下载 广告服务 中国品牌形象设计 网站推广 家具中国
求创科技
中国设计秀
中国福网
金视觉
中国设计秀欢迎你
中国品牌形象设计网
中国设计秀
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 使用xml构建Ext menu菜单

使用xml构建Ext menu菜单

来源:中国设计秀    作者:straw    点击:475     加入收藏
中资源
废话就不多说了,将主要代码及效果图附上:
菜单效果:


代码如下:

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
});
0
顶一下
2008-02-04 17:40:57    出处:中国设计秀cnwebshow.com
关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口