@author YHC
这个教程将向你展示如何创建一个自动播放的tabs.tabs 组件显示第一个tab panel,然后显示第二个,第三个.....,我们将写一些代码自动的切换tab
panel,然后让他循环.
查看Demo
步骤1: 创建 tabs
<div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
<div title="Shirt1" style="padding:20px;">
<img src="images/shirt1.gif">
</div>
<div title="Shirt2" style="padding:20px;">
<img src="images/shirt2.gif">
</div>
<div title="Shirt3" style="padding:20px;">
<img src="images/shirt3.gif">
</div>
<div title="Shirt4" style="padding:20px;">
<img src="images/shirt4.gif">
</div>
<div title="Shirt5" style="padding:20px;">
<img src="images/shirt5.gif">
</div>
</div>
步骤 2: 写自动播放代码
var index = 0;
var t = $('#tt');
var tabs = t.tabs('tabs');
setInterval(function(){
t.tabs('select', tabs[index].panel('options').title);
index++;
if (index >= tabs.length){
index = 0;
}
}, 3000);
正如你所见到的,我们调用'
tabs'方法去得到所有tab panel和切换他们,使用'
setInterval'函数.
下载 EasyUI示例代码:
分享到:
相关推荐
使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用easyUI转换HTML table到datagrid 使用easyUI给datagrid添加pagination 使用easyUI添加查询功能在datagrid 使用easyUI 添加...
Easyui tabs 标题居左,文字竖着
手把手教你制作easyUI工作站,主要学习tabs方法:http://blog.csdn.net/libin_1/article/details/50931955
Easyui tabs Title居左侧,并且文字竖着显示
非常好看的易用的easyui tabs 右键插件,自己两行代码就搞定
easyUi的使用easyUi的使用easyUi的使用easyUi的使用easyUi的使用easyUi的使用
简单的 easyui主界面,适合新手入门,或者直接使用,基于easyui
easyUI的一个实例,直接导入myeclipse中使用
本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后...
EasyUI 创建展开行明细编辑表单的 CRUD 应用
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
基于SSH + jquery easyui 的一个通讯录Demo,能够实现基本的增删改查
演示如何使用 easyui 创建一个 Tabs 组件。 Tabs 有多个可以动态地添加或移除的面板(panel)。 可以使用 Tabs 来在相同的页面上显示不同的实体。 Tabs 一次仅仅显示一个面板(panel),每个面板(panel)都有标题...
jQuery EasyUI 实例演示(菜单、TAB等)! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
easyui的介绍详细操作,和各种使用场景,还有各种的特点
一个easyui界面的模板,可以导入项目做一些自定义的修改。
下载easyui后使用其中的css和js,从一个treegrid树形网格资源 往另一个空的树形网格拖放数据,支持添加子节点、删除、编辑、保存、取消编辑、刷新、更新数据等功能
使用easyui框架的web应用,详细介绍了使用easyui框架的的使用
解决使用tab布局过程中页面多次加载的问题 如果在使用easyui过程中,你使用了easyui 的tab布局,在tab布局的内容上使用的不是content,而是iframe,那么你的页面有可能多次加载了,这篇文章帮你解决问题
easyui 创建数据网格(DataGrid)