可以这样在index.html布局中引入外面的页面:
<body id="tt" class="easyui-tabs" style="height:500px;">
<div title="主页" data-options="href:'Main.html',closed:true">
</div>
<div title="结果下载" data-options="closable:true,href:'ResultDownload.html'" style="padding:20px;">
</div>
</body>
注意啦,在解析渲染Main.html的页面代码时,实际上只会添加该页面中的body中(不含body)的代码到index.html,所以在Main.html的head中引入的js。css都不会执行。所以需要把那些代码放到body之内。
除此之外,还要注意如果引入的页面,例如此处的Main.html页面中含有easyui的其他控件,例如layout,
<div class='easyui-layout'id='cc'></div>
那么在Main.html中的js里,就不要调用$("cc").layout()这样的语句啦,easyui会自己进行解析渲染的。此外要注意,如果Main.html中有其他布局类,那么该布局类一定要记得设置高度,要不然是会被遮住的。index.html中的布局类同时也要设置高度。
我的Main.html页面
<div class='easyui-layout' style="<span style="color:#ff0000;">height:450px;</span>background-color:red;">
<div data-options="region:'west',title:'模板',split:true" style="width:400px;">
<div style="margin:10px 10px auto 10px">
<span>请选择一个模板:</span>
<select id="SDPI_AllTemplates" style="display:inline"></select>
<input type='button' id='submit' value="确定"/>
</div>
</div>
<div data-options="region:'center',title:'请求表单'" style="padding:5px;background:white;" >
<div id="centerdiv"></div>
<input type="button" id="submitToserver" value="提交"/>
</div>
<script src="js/Main.js"></script>
</div>