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
        });
    }
}

到这里就结束了。

授人以鱼不如授人以渔




评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值