Easyui tabs选项卡

读者可以参考帮助文档

我们在布局控件的右侧中间区域增加一个选项卡

这是 jQuery EasyUI 的 tabs 标签页组件，静态 HTML 声明方式：

<div data-options="region:'center',title:'Center'">
    <div id="Div1" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
            tab3
        </div>
    </div>
</div>
Code language: HTML, XML (xml)

各属性说明

1. class="easyui-tabs"：标记这个 div 渲染成 EasyUI 标签页组件
2. 子 div 就是每一个 Tab 面板：
   • title="Tab1"：标签标题文字
   • data-options="closable:true"：显示关闭 × 按钮，可以关闭这个 Tab
   • data-options="iconCls:'icon-reload'"：标签前面加 EasyUI 内置刷新图标
   • style="display:none;"：EasyUI 内部会自动管理面板显示隐藏，静态写这个是标准写法
   • overflow:auto：Tab2 内容溢出时出现滚动条
3. 外层data-options="region:'center'"：说明这个 tabs 放在 EasyUI Layout 布局的中间区域

给左侧栏菜单增加点击事件

$('#tt').tree({ 
onClick: function(node) 
{ 
    alert(node.text); 
} 
})Code language: JavaScript (javascript)

这样 点击左侧菜单 旧可以弹出

可以给左侧链接 增加一个url属性

然后点击的时候，直接打开超链接

可以在attributes中增加属性

这样通过node 就可以获取到这个url属性了

把上面点击事件 改为新增tab

$('#ct').tree({
    onClick: function (node) {
        //alert(node.attributes.url); // alert node text property when clicked
        //接下来是添加一个tab
        $('#ct').tabs('add', {
            title: 'New Tab',
            content: 'Tab Body',
            closable: true,
            tools: [{
                iconCls: 'icon-mini-refresh',
                handler: function () {
                    alert('refresh');
                }
            }]
        });
    }
});Code language: JavaScript (javascript)

title: ‘New Tab’, 这里可以换成node里面的属性

$('#tabs').tabs('add', {
    title: node.text,
    content: 'Tab Body',
    closable: true,
    tools: [{
        iconCls: 'icon-mini-refresh',
        handler: function () {
            alert('refresh');
        }
    }]
});Code language: JavaScript (javascript)