JQuery专栏之七————使用tabs标签页控件分页显示多个表单控件。

7. 使用tabs标签页控件分页显示多个表单控件。

EasyUI的标签页/选项卡（tabs）控件可以将多个表单组合在一起，采用类似于分页的形式显示信息，其主要属性包括：title、closable、tabPosition、tabWidth、tabHeight等。标签页通常作为一种容器加以使用，一般情况可以有多个分页标签同时存在，但是同时只有一个处于激活状态。

本例将实例6中四个栏目的学生信息按标签页进行分页显示，以三种方法创建标签页myTab。

①方法1：在网页的<body>…</body>之间添加下列HTML语句，以<div>层嵌套形式实现标签页，例如下列语句可定义4个标签页。

</div>

②方法2：在<script>…</script>之间编写jQuery程序，例如：

var str='<div id="myTab" class=“easyui-tabs" style="overflow: auto; margin: 0px 0px -19px 0px; padding 0px 0px 0px 0px;">';

str+='<div id="myTab1" title="基本信息" style="position:relative; overflow:auto;"></div>';

str+='<div id="myTab2" title="通信信息" style="position:relative; overflow:auto;"></div>';

str+='<div id="myTab3" title="个人简历" style="position:relative; overflow:auto;"></div>';

str+='<div id="myTab4" title="上传照片" style="position:relative; overflow:auto;"></div>';

str+='</div>';

$("#main").append($(str));

$("#myTab").tabs({height:285, width:385});

③方法3：直接调用控件自定义函数myTabs()。例如调用下列函数可以产生4个选项卡的标签页，其高度为285像素，宽度为385像素。

myTabs('myTab', 'main', '基本信息;通信信息;个人简历;上传照片', 0, 0, 285, 385, ' ');

在定义myTab标签页之后，可以使用$("#myTab").tabs('select', index)方法聚焦（选中）某个标签页中的选项卡分页，使用 $("#myTab").tabs("tabs").length获取标签页的选项卡总数，使用$("#myTab").tabs('update', { tab: $("#myTab").tabs('getTab', 0), options:{} })更新某个选项卡分页。本实例程序运行界面如图2-6所示。

图2-6 标签页Tabs控件程序运行界面

作业题：

编写JS程序，实现tabs标签页控件中选项卡分页的动态增加与删除。

JQuery专栏之七————使用tabs标签页控件分页显示多个表单控件。

7. 使用tabs标签页控件分页显示多个表单控件。

猜你喜欢