jQuery MiniUI,快速开发WebUI界面

菜单项还是没有出来……

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="manage/skins/default/stylesheets/style.css" />

<style type="text/css">
a{ text-decoration:none; color:#000033 }
.link{
font-weight:bold;
padding:6px 0 0 -2px;
line-height:25px;
}
</style>
<title>Blog后台管理</title>
</head>
<body style="font-size:12px">
<script type="text/javascript" src="plugins/extjs/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="easyajax.ejf?cmd=prototype"></script>
<script type="text/javascript" src="easyajax.ejf?cmd=engine"></script>
<script>
Ext.BLANK_IMAGE_URL = '/plugins/extjs/ext-2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var menu, header,main;

var sub_root2 = function() {
sub_root2.superclass.constructor.call(this, {

autoScroll : true,
animate : false,
border : false,
rootVisible : false,
root : new Ext.tree.TreeNode( {
id:'root',
text : '菜单组2',
draggable : false,
expanded : true
})
});
var root2=new Ext.tree.TreeNode({id:"root2",text:"根2",singleClickExpand:true});
root2.appendChild(new Ext.tree.TreeNode({id:"root2_a",
text:"1",
href:"module.html",
listeners:{
'click':function(node, event) {
              var panel=Ext.getCmp("userCategoryPanel");
              if(!panel){
                  panel=new UserCategoryManage();
              }
              main.openTab(panel);
}
}
}));
this.root.appendChild(root2);
};
Ext.extend(sub_root2, Ext.tree.TreePanel);


MenuPanel = function() {
MenuPanel.superclass.constructor.call(this, {
id : 'menu',
region : 'west',
title : '功能菜单',
split : true,
width : 200,
minSize : 175,
maxSize : 500,
collapsible : true,
margins : '0 0 5 5',
cmargins : '0 0 0 0',
layout : 'accordion',
layoutConfig : {
   titleCollapse : true,
   animate : true
},
items : [ 
{
   title : '菜单组2',
   items : [new sub_root2()]
}
]
});
};
Ext.extend(MenuPanel, Ext.Panel);




/**
右边二级菜单开始
*/

MenuPanel2 = function() {
title : '功能菜单'
MenuPanel2.superclass.constructor.call(this, {
id : 'menu2',
region : 'west',
title : '功能菜单',
split : true,
width : 200,
minSize : 175,
maxSize : 500,
collapsible : true,
margins : '0 0 5 5',
cmargins : '0 0 0 0',
layout : 'accordion',
layoutConfig : {
   titleCollapse : true,
   animate : true
},
items:[
{
   title : '菜单组22',
   items : [new sub_root2()]
}
]
});
};
Ext.extend(MenuPanel2, Ext.Panel);


MainPanel2 = function() {
   this.urls=[];
   this.homePage="index.jsp";
   this.currentUrl=this.homePage;    
   MainPanel2.superclass.constructor.call(this, {
       id : 'main2',
       region : 'center',
       margins : '0 5 5 0',
       resizeTabs : true,
       minTabWidth : 65,
       tabWidth : 120,
       enableTabScroll : true,
       activeTab : 0,
       items : {
           id : 'homePage',
           title : '桌 面',
           closable : false,
           html:"<iframe width='100%' height='100%' frameborder='0' scrolling='auto' src='"+this.homePage+"'></iframe>",            
           autoScroll : true
                   }
   });
};
Ext.extend(MainPanel2, Ext.TabPanel);


UserCategoryManage=function()
{
UserCategoryManage.superclass.constructor.call(this, {
       id:"userCategoryPanel",
       title:"分类信息管理",
       closable: true,
         autoScroll:true,
         layout:"border",
        items:[new MenuPanel2(),new MainPanel2()]           
       });
}
Ext.extend(UserCategoryManage, Ext.Panel);
/**
右边二级菜单结束
*/

MainPanel = function() {
   this.urls=[];
   this.homePage="index.jsp";
   this.currentUrl=this.homePage;    
   this.openTab = function(panel, id) {
       var o = (typeof panel == "string" ? panel : id || panel.id);
       var tab = this.getComponent(o);        
       if (tab) {
           this.setActiveTab(tab);
       } else if(typeof panel!="string"){
           panel.id = o;
           var p = this.add(panel);
           if(this.items.getCount()>10)this.remove(1);
           this.setActiveTab(p);
       }
   };
   this.back=function(){
       
   };
   this.forward=function(){
       
   };
   this.closeTab = function(panel, id) {
       var o = (typeof panel == "string" ? panel : id || panel.id);
       var tab = this.getComponent(o);
       if (tab) {
           // if(tab.lazyClose)tab.hide();
           // else
           this.remove(tab);
       }
   };
   this.closeAll=function(excep){    
       this.items.each(function(p){
           if(p.closable && p!=excep)this.closeTab(p);
       },this);
   };
   this.openUrl=function(url,panlId,title){
       var cmd=Ext.getCmp(panlId);
       var loader={url:url,scripts:true};
       if(cmd==null)cmd=new Ext.Panel({id:panlId,title:title,autoLoad:loader,autoScroll:true,closable:true});
       else cmd.body.load(loader);
       this.openTab(cmd);
   }
   this.loadUrl=function(url,panelId,title)
   {    
       var cmd=Ext.getCmp("homePage");
       if(this.urls.indexOf(url)<0){
       this.urls.push(url);
       }
       this.currentUrl=url;
       cmd.body.load({url:url,scripts:true});
       this.openTab(cmd);
   };
   this.refresh=function()    {
       if(this.currentUrl){
           this.loadUrl(this.currentUrl);
       }        
   }
   this.search=function(key){
       var cmd=Ext.getCmp("homePage");        
       cmd.body.update("<iframe width='100%' height='100%' frameborder='0' scrolling='auto' src='"+this.searchKey.getValue()+"'></iframe>");
       if(this.openTab)this.openTab(cmd);//因为要在其它作用域上调用search方法,这里暂时这样写。
       else main.openTab(cmd);
   };
   this.searchKey=new Ext.form.TextField({width:150,listeners:{
       "specialkey":function(t,k){
           if(k.getKey()==Ext.EventObject.ENTER)this.search();
       },
       scope:this
   }});
   this.menu=new Ext.menu.Menu({items:[{text:"关闭所有Tab",handler:this.closeAll,scope:this},{text:"关闭其它Tab",handler:function(){this.closeAll(this.getActiveTab());},scope:this}]});
   MainPanel.superclass.constructor.call(this, {
       id : 'main',
       region : 'center',
       margins : '0 5 5 0',
       resizeTabs : true,
       minTabWidth : 65,
       tabWidth : 120,
       enableTabScroll : true,
       activeTab : 0,
       items : {
           id : 'homePage',
           title : '桌 面',
           closable : false,
           html:"<iframe width='100%' height='100%' frameborder='0' scrolling='auto' src='"+this.homePage+"'></iframe>",            
           autoScroll : true
                   }
   });
   this.on("contextmenu",function(tabPanel,tab,e)
       {
           this.menu.showAt(e.getPoint());
       },this
   );
};
Ext.extend(MainPanel, Ext.TabPanel);


header = new Ext.Panel( {
   border : true,
   region : 'north',
   height : 70,
       items : [
               {
                   columnWidth : .6,
                   html : '<a href=http://www.easyjf.com/team/services.html target=_blank><img src="images/title.jpg" width="600" border=0/></a>'
               }]
   
});
           
Ext.onReady(function() {
           /**左边菜单只有一个树根**/
           if(typeof(MenuPanel)=="object")
               menu = MenuPanel;
           else if(typeof(MenuPanel)=="function")
               menu = new MenuPanel();
           
           main = new MainPanel();    
           
           var viewport = new Ext.Viewport( {
               layout : 'border',
               items : [header, menu, main]
           });

       })

</script>
</body>
</html> 

附件大小
menu.GIF15.32 千字节