easyui tabs

最新推荐文章于 2023-07-20 15:08:25 发布

jx270

最新推荐文章于 2023-07-20 15:08:25 发布

阅读量105

点赞数

分类专栏： easyui

本文链接：https://blog.csdn.net/jx270/article/details/89504692

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Tabs - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript">
	var index = 0;
	function addTab(){
	index++;
	$('#tt').tabs('add',{
	title:'New Tab ' + index,
	content:'Tab Body ' + index,
	iconCls:'icon-save',
	closable:true,
	tools:[{
	iconCls:'icon-mini-refresh',
	handler:function(){
	alert('refresh');
	}
	}]
	});
	}
	function getSelected(){
	var tab = $('#tt').tabs('getSelected');
	alert('Selected: '+tab.panel('options').title);
	}
	function update(){
	index++;
	var tab = $('#tt').tabs('getSelected');
	$('#tt').tabs('update', {
	tab: tab,
	options:{
	title:'new title'+index,
	iconCls:'icon-save'
	}
	});
	}
	</script>
	</head>
	<body>
	<h2>Tabs</h2>
	<div class="demo-info">
	<div class="demo-tip icon-tip"></div>
	<div>Tabs are automatically made scrollable when the sum of their width exceeds their container width size.</div>
	</div>

	<div style="margin:10px 0">
	<a class="easyui-linkbutton" data-options="iconCls:'icon-add'" href="javascript:void(0)" οnclick="addTab()">add tab</a>
	<a class="easyui-linkbutton" href="javascript:void(0)" οnclick="getSelected()">getSelected</a>
	<a class="easyui-linkbutton" href="javascript:void(0)" οnclick="update()">Update</a>
	</div>

	<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px;">
	<div title="Tab1" data-options="tools:'#p-tools'" style="padding:20px;">
	</div>
	<div title="Tab2" data-options="closable:true,cache:false,href:'tabs_href_test.html'" style="padding:20px;">
	This is Tab2 with close button.
	</div>
	<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
	<table id="test" class="easyui-datagrid" data-options="fit:true">
	<thead>
	<tr>
	<th data-options="field:'f1',width:60">field1</th>
	<th data-options="field:'f2',width:60">field2</th>
	<th data-options="field:'f3',width:60">field3</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>d1</td>
	<td>d2</td>
	<td>d3</td>
	</tr>
	<tr>
	<td>d11</td>
	<td>d21</td>
	<td>d31</td>
	</tr>
	</tbody>
	</table>
	</div>
	<div title="Tab4 with iframe" data-options="closable:true" style="overflow:hidden">
	<iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
	</div>
	<div title="Tab5 with sub tabs" data-options="closable:true,iconCls:'icon-cut'" style="padding:10px;">
	<div class="easyui-tabs" data-options="fit:true,plain:true">
	<div title="Title1" style="padding:10px;">Content 1</div>
	<div title="Title2" style="padding:10px;">Content 2</div>
	<div title="Title3" style="padding:10px;">Content 3</div>
	</div>
	</div>
	</div>

	<div id="tab-tools">
	<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" οnclick="javascript:alert('add')"></a>
	<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" οnclick="javascript:alert('save')"></a>
	</div>
	<div id="p-tools">
	<a href="#" class="icon-mini-add" οnclick="alert('add')"></a>
	<a href="#" class="icon-mini-edit" οnclick="alert('edit')"></a>
	<a href="#" class="icon-mini-refresh" οnclick="alert('refresh')"></a>
	</div>
	</body>
	</html>

jx270

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui tabs

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Tabs - jQuery EasyUI Demo</ti...
复制链接

扫一扫

专栏目录