關於頁面之間區域性顯示的幾種方式
阿新 • • 發佈：2018-11-02
第一種：這裡使用到了easyui+ssm
<body class="easyui-layout"> <div data-options="region:'west',title:'列表',split:true" style="width:200px;"> <a href="javascript:openTab('首頁','test/welcome','icon-writeblog')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">首頁</a> </div> <div data-options="region:'center',title:''" style="padding:5px;background:#eee;"> <div id="tabs" class="easyui-tabs" style="height:250px;"> <div title="最新發布十篇" style="padding:20px;display:none;"> 最新發布十篇 </div> </div> </div> <script> /** * 開啟新選項卡 * @param text 標題 * @param url 路徑 * @param icon 圖示 */ function openTab(text,url,icon) { //判斷當前選項卡是否存在 if($('#tabs').tabs('exists',text)){ //如果存在 顯示 $("#tabs").tabs("select",text); }else{ //如果不存在 則新建一個 $("#tabs").tabs('add',{ title:text, closable:true, //是否允許選項卡摺疊。 iconCls:icon, //顯示圖示 content:"<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='"+url+"'></iframe>" //url 遠端載入所開啟的url }) } } </script> </body>
此種方式是以linkbutton跳轉到JavaScript並傳遞url(為控制器對映地址) 然後在選項卡中顯示控制器返回的url地址頁面