如何利用EasyUI框架选项卡Tabs设置和获取标题

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

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

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

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

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

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

要先初始化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')

}

})

---