提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

18EasyUI 布局- 添加自动播放标签页（Tabs）

添加 标签 布局 tabs 自动播放
2023-09-11 14:15:41 时间

Tabs 组件显示第一个 tab 面板，然后显示第二个、第三个… 我们将写一些代码来自动地切换 tab 面板，然后让它循环。

案例

在这里插入图片描述

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>Add autoplay to tabs - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/demo/demo.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
	<script>
		$(function(){
			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);
		});
	</script>
</head>
<body>
	<h2>Add autoplay tab demo</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>The tab panel can be auto switched to next.</div>
	</div>
	
	<div id="tt" class="easyui-tabs" style="width:700px;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>
</body>
</html>

相关文章