??????? 在使用easyui搭建好后臺的界面之后，接下來需要做的就是為每個菜單項添加相應(yīng)的界面來實現(xiàn)和數(shù)據(jù)的交互。今天將介紹如何實現(xiàn)點擊某個菜單項來實現(xiàn)在后臺顯示出響應(yīng)的界面。

首先展示下最終的效果：通過點擊“新增新聞”，然后在中部顯示新增新聞的對應(yīng)頁面

實現(xiàn)的代碼很簡單：

javascript代碼：

/**添加選項卡方法*/function addTab(title,url){url = url;var tab=$('#tt').tabs('exists',title); //判斷tab是否已經(jīng)存在if(tab){ //防止tab重復(fù)添加$('#tt').tabs('select',title); //如果已經(jīng)存在tab，則刷新該界面}else{ //如果不存在該界面則加載$('#tt').tabs('add',{title:title,content:"<iframe width='100%' height='100%' frameborder='0' scrolling='yes' src='"+url+"'></iframe>",closable:true //true表示在tab上顯示一個關(guān)閉按鈕});}}
頁面相關(guān)代碼：

<div id="tt" class="easyui-tabs" fit="true" border="false"> <div title="主頁"><iframe width='100%' height='100%' id='iframe' frameborder='0' scrolling='no' src='blank.jsp'></iframe></div> </div>

<div title="新聞管理" data-options="iconCls:'icon-lesson'" style="padding:10px;"><div class="menu-div" οnmοuseοver="omo(this,0)" οnmοuseοut="omo(this,1)" οnclick="addTab('我的頁面','/mssh/my.jsp')"><span class="icon-span">&nbsp;&nbsp;&nbsp;</span>??新增新聞</div></div>

總結(jié)

以上是生活随笔為你收集整理的easyui后台界面如何添加选项卡(Tab)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。