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

最新推荐文章于 2023-02-09 17:13:18 发布

AndyYuan317

最新推荐文章于 2023-02-09 17:13:18 发布

阅读量1k

点赞数 2

分类专栏： JQuery实例教程

本文链接：https://blog.csdn.net/qq_42618969/article/details/89145538

版权

JQuery实例教程专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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所示。