Easyui 繫結左側選單,右側顯示內容,動態新增多個tab
阿新 • • 發佈:2019-02-15
老規矩還是先上圖看效果:
左側選單,右側展示內容以及title 接著看前臺jsp程式碼:
前臺程式碼很簡單,按照官方的要求寫就可以,重點是紅色框裡別忘了加
最後一步就是js繫結事件在這裡我給出程式碼需要的同學直接copy,這裡是onclick()點選事件,資料為測試資料,替換自己真實資料
<ul><li><a href="#" onclick="openTab(測試,http://ww.baidu.com)"></a></ul></li>
在這裡使用iframe建立一個行內框架,
function openTab(text,url) {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
// 新增一個未選中狀態的選項卡面板,具體參考Easyui table 選項卡
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
$('#tabs').tabs('add', {
title : text,
closable : true,
content : content
});
}
}
到這裡就結束了。
授人以魚不如授人以漁