点击菜单才会去加载页面,非iframe实现,感觉效果还可以;
有些地方不尽人意,例如解析其它的库如fusionchart就有点问题。
还有就是在IE下运行要注意,不知道为什么,dojo api官网地址在IE下运行也有问题。这是一件雷人的事;
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>COUNT-Magic Application</title> <link rel="shortcut icon" href="../resources/images/favicon.png" /> <link rel="stylesheet" href="app.css" type="text/css" /> <script type="text/javascript"> dojoConfig = { async: true,sysUser: {},contentRoot:'/sf/',locale: "zh" }; </script> <script type="text/javascript" src="lib/dojo/dojo.js"></script> <script type="text/javascript" src="app.js" charset="utf-8"></script> </head> <body class="tundra"> <!-- tree store --> <div data-dojo-type="dojo/data/ItemFileWriteStore" jsId="menuStore" url="data/menu.json"></div> <div data-dojo-type="dijit/Dialog" id="sendDialog" title="Submit Form"> <div id="sendMailBar" style="text-align:center"> <div id="fakeSend" data-dojo-type="dijit/ProgressBar" style="height:15px; width:175px;" indeterminate="true" ></div> </div> </div> <div id="preloader">Loading Application...</div> <!-- Using Declarative Require to "hang" some modules off app object for declarative scripting --> <script type="dojo/require"> "app.dom": "dojo/dom","app.registry": "dijit/registry" </script> <div data-dojo-type="dijit/layout/BorderContainer" id="mainContainer" data-dojo-id="app.mainContainer" data-dojo-props="liveSplitters: false"> <!-- top --> <div data-dojo-type="dijit/layout/ContentPane" id="headerPane" data-dojo-props="region:'top',style:'height: 56px;',href:'topAp.html'"> </div> <!-- leading --> <div data-dojo-type="dijit/layout/BorderContainer" id="mainSplitter" style="width:222px;" data-dojo-props="region:'leading',splitter: true,gutters: false"> <div data-dojo-type="dijit/layout/ContentPane" style=" height:36px;background:#fe942c url(../resources/nav_top_bg.png) repeat-x; " data-dojo-props="title:'Search',region:'top'"> <span class="index_nav_name thinger" id="nat-title"> 管理菜单 </span> <span style="width:26px;height:32px; float:right; overflow: hidden;"> <img alt="" src="../resources/ARROW.png" id="panelToggle" style="margin:0;height:36px;width:16px;border:none; cursor: pointer;"> </span> </div> <div data-dojo-type="dijit/layout/AccordionContainer" class="thinger" id="leftAccordion" data-dojo-props='region: "center",splitter:true,minSize:120'> <div data-dojo-type="dijit/Tree" id="myNavTree" data-dojo-id="myNavTree" store="menuStore" childrenAttr="folders" query="{type:'folder'}" label="Folders" data-dojo-props="store:menuStore,query:{type:'folder'},showRoot: false,title: '分析导航',iconClass:'dijitEditorIcon dijitEditorIconCopy'"> <script type="dojo/method" event="onClick" args="item"> //console.dir(item); if(!item){ return; } app.addTab("mainTabContainer",dojoConfig.contentRoot+item.url[0],item.label[0],true); </script> </div> <div data-dojo-type="dijit/layout/ContentPane" id="ap2" data-dojo-props="title: '系统设置',iconClass:'dijitEditorIcon dijitEditorIconCopy',href:'ap2.html'" class="paneAccordion"></div> <div data-dojo-type="dijit/layout/ContentPane" id="ap3" data-dojo-props="title: '帮助',href:'help.html'" class="paneAccordion"></div> </div> </div> <!-- center --> <div data-dojo-type="dijit/layout/TabContainer" id="mainTabContainer" data-dojo-props="region: 'center',tabStrip: true"> <div data-dojo-type="dijit/layout/ContentPane" id="tabWelcome" data-dojo-props="title: 'Welcome',href:'tabWelcome.html'"></div> </div> </div> </body>
require([ "dojo/_base/fx","dojo/_base/lang","dojo/dom-style","dojo/parser","dojo/ready","dijit/registry","dijit/layout/ContentPane" ],function(baseFx,lang,domStyle,parser,ready,registry,ContentPane) { lang.setObject("app.basename",function(path,suffix) { var b = path.replace(/^.*[\/\\]/g,''); if (typeof(suffix) == 'string' && b.substr(b.length - suffix.length) == suffix) { b = b.substr(0,b.length - suffix.length); } return b; }); lang.setObject("app.addTab",function(tabContainer,href,title,closable) { if (typeof tabContainer === "string") { tabContainer = registry.byId(tabContainer); } var tabName = "tab" + app.basename(href,".html"),tab = registry.byId(tabName); if (typeof tab === "undefined") { tab = new ContentPane({ id: tabName,title: title,href: href,closable: closable,style: "padding: 3px;" }); tabContainer.addChild(tab); } tabContainer.selectChild(tab); }); lang.setObject("app.formatterInCode",function(iconClass) { //使用全局IP代替 return '<div class="">' + iconClass + '</div>'; }); lang.setObject("app.formatterIcon",function(iconClass) { return '<div class="' + iconClass + '"></div>'; }); lang.setObject("app.formatterStatusIcon",function(iconClass) { return '<div class="' + (iconClass==1?'isOne':'notOne') + '"></div>'; }); ready(function() { var iconClass = '6'; var codeIp = window.location.href; codeIp = codeIp.substring(codeIp.indexOf("://")+3,codeIp.length); var tempStr = '<script type="text/javascript">'; tempStr += "</script>"; console.info(tempStr); var nameBY = 'theme1' function getQueryStringRegExp() { var reg = new RegExp("(^|\\?|&)" + nameBY + "=([^&]*)(\\s|&|$)","i"); if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g," ")); return ""; }; //console.dir(dojo.hasClass(document.body,theme)); var theme = getQueryStringRegExp() || ''; //alert(codeIp+"\n"+theme); if(theme){ dojo.removeClass(document.body); dojo.addClass(document.body,theme); } parser.parse().then(function(objects) { baseFx.fadeOut({//Get rid of the loader once parsing is done node: "preloader",onEnd: function() { domStyle.set("preloader","display","none"); } }).play(); }); var oldWid = null; dojo.connect(dojo.byId("panelToggle"),'click',function(){ var sty = 'block'; var src = '.png'; if(dojo.attr(dojo.byId("panelToggle"),'src').indexOf('resources/ARROW.png')!=-1) { sty = 'none'; src = '-R.png'; oldWid = domStyle.get("mainSplitter",'width'); domStyle.set("mainSplitter",'width','30px'); } else { domStyle.set("mainSplitter",oldWid+'px'); } //console.info(oldWid); dojo.attr(dojo.byId("panelToggle"),'src','../resources/ARROW'+src); dojo.query(".thinger").style("display",sty); app.registry.byId("mainContainer").layout(); //console.dir(app.registry.byId("mainContainer")); }); }); });