easyui datagrid点击开启tabs

. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500pxheight:250px">

<div title="Tab1" style="padding:20pxdisplay:none">

tab1

</div>

<div title="Tab2" data-options="closable:true" style="overflow:autopadding:20pxdisplay:none">

tab2

</div>

<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20pxdisplay:none">

tab3

</div>

</div>

<div id="tt" class="easyui-tabs" style="width:500pxheight:250px">

<div title="Tab1" style="padding:20pxdisplay:none">

tab1

</div>

<div title="Tab2" data-options="closable:true" style="overflow:autopadding:20pxdisplay:none">

tab2

</div>

<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20pxdisplay:none">

tab3

</div>

</div>

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({

border:false,

onSelect:function(title){

alert(title+' is selected')

}

})

第一步，在创建的web项目EasyUI下，新建页面文件夹pages，并在该文件夹下创建页面tabs.html。

第二步，引入EasyUI核心JavaScript和CSS文件，并需要jQuery关键的js文件。

第三步，在body标签元素内插入Tabs标签元素div，并设置样式。

第四步，预览静态页面tabs.html。

第五步，利用tabs标签页自带的函数方法获取选中的tabs页标题。

第六步，再次预览该静态页面，点击其中之一的tabs子标签，这时会d出标签页标题。

---