Easyui 绑定左侧菜单，右侧显示内容，动态添加多个tab

老规矩还是先上图看效果：

左侧菜单，右侧展示内容以及title 接着看前台jsp代码：

前台代码很简单，按照官方的要求写就可以，重点是红色框里别忘了加

最后一步就是js绑定事件在这里我给出代码需要的同学直接copy，这里是onclick（）点击事件，数据为测试数据，替换自己真实数据

<ul><li><a href="#" οnclick="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
        });
    }
}

到这里就结束了。

授人以鱼不如授人以渔

最后

以上就是从容戒指最近收集整理的关于Easyui 绑定左侧菜单，右侧显示内容，动态添加多个tab的全部内容，更多相关Easyui内容请搜索靠谱客的其他文章。