js在动态生成的页面上动态添加easyUI的tab

要先初始化tabs后才能调用add方法，使用样式来初始化easyUI需要在dom

ready前将html代码添加到dom中，要不也无法初始化

var

tab

=

$("<div

id='tab_row_"

+

r

+

"_column_"

+

c

+

"'

class='easyui-tabs'

style='width:500pxheight:250px'>")

$('#xxxx').append(tab)

tab.tab()//要手动调用tabs进行初始化

var

content

=

"<table

id='table_datagrid_'"

+

view.id

+"></table>"

tab.tabs('add',

{

title:

view.title,

content

:

content,

closable:

true

})

. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何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')

}

})

---