easyUI入门《十、tabs基础：选项卡》

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<!--
			基础选项卡
				类：easyui-tabs
				头高：tabHeight:50
				标题：title标题/图片
		-->
		<div>基础选项卡</div>
		<div class="easyui-tabs" style="width: 30%; height: 300px;" data-options="tabHeight:50">
			<div title="tab1">选项卡11</div>
			<div title="tab2">选项卡222</div>
			<div title="tab3">选项卡33333</div>
			<div title="<img src='./jquery-easyui-1.5.5.4/themes/icons/large_chart.png' style='margin-top:5px'>">选项卡44444</div>
		</div>

		<!--
			工具卡：
			工具条：
			对应点击事件
			工具卡方向：tabPosition:'left'/bottom/right/top
			远程引用：href:'./remote.html'
		-->
		<br /><br />
		<div>工具卡+工具条+对应点击事件+工具卡方向+远程引用</div>
		<div class="easyui-tabs" style="width: 30%; height: 300px;" data-options="tabPosition:'top',tools:[{
					iconCls:'icon-add',
					handler:function(){
						alert('add')
					}
				},
					{
					iconCls:'icon-remove',
					handler:function(){
						alert('remove')
					}
				}]">
			<div title="tab1" data-options="tools:[{
					iconCls:'icon-mini-add',
					handler:function(){
						alert('add')
					}
				}]">选项卡11</div>
			<div title="tab2" data-options="tools:'#tool-bar'">选项卡222</div>
			<div title="tab3" data-options="href:'./tree.html'">选项卡33333</div>
		</div>
		<div id="tool-bar">
			<a class="icon-mini-add" onclick="alert('add')"></a>
			<a class="icon-mini-edit" onclick="alert('edit')"></a>
		</div>

		<br /><br />
		<!--
	选项卡增加：
	选项卡减少：
	选项卡增加时内容：
	选项卡存在时选中：
	选项卡设置可关闭
	
-->
		<br /><br />
		<div>选项卡增删(带名字)+选中+关闭</div>
		<input type="text" id="tabName" />
		<input type="button" value="添加" onclick="addTab()" />
		<input type="button" value="删除" onclick="removeTab()" />
		<div id="js-tab" style="height: 200px; width: 300px;">

		</div>
		<script type="text/javascript">
			$(function() {
				$("#js-tab").tabs();
			});

			function addTab() {
				var name = $("#tabName").val();

				//如果选项卡存在就选中
				if($("#js-tab").tabs("exists", name)) {
					$("#js-tab").tabs("select", name)
				} else {
					$("#js-tab").tabs("add", {
						title: name,
						selected: true,
						closable: true,
						content: name
					})
				}
			}

			function removeTab() {
				var name = $("#tabName").val();
				$("#js-tab").tabs("close", name)
			}
		</script>
	</body>

</html>
easyUI入门《十、tabs基础：选项卡》

猜你喜欢
