EasyUI的选项卡制作

最新推荐文章于 2022-05-05 21:22:03 发布

宇宙第一帅

最新推荐文章于 2022-05-05 21:22:03 发布

阅读量636

点赞数

分类专栏： JQuery 文章标签： jquery easyUI

本文链接：https://blog.csdn.net/MyCodeDream/article/details/45011437

版权

JQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

EasyUI的选项卡相比用纯粹的javascript来做要简单的多。

<!DOCTYPE html>
<html>
	<head>
		<title>面板组件</title>
		<meta charset="utf-8">
			<!--需要引入的文件（包括自己的文件，一定要把自己的放到最后！）-->
		<script type="text/javascript" src="easyui/jquery.min.js"></script>
		<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
		<script type="text/javascript" src="./js/my.js"></script>
	</head>
	<body>
		<div id="box" style="width: 500px; height: 300px;">
			<div title="tab1">tab111111------</div>
			<div title="tab2">tab222222------</div>
			<div title="tab3">tab333333------</div>
		</div>
		<div id="tt">
			<a href="#???"></a>
		</div>
	</body>
</html>

我的my.js文件：

$(function(){
	$("#box").tabs({
		 height: 400,
		 width: 300,
		 // plain: true,//不要背景
		 // fit: false,//全屏
		 // // border: false,//不要边框
		 // // tabWidth: 300,
		 // // tabHeight:,
		 // // scrollIncrement: 50,
		 // // scrollDuration: 1000,
		 // tools: [{
		 // 	iconCls: 'icon-add',
		 // 	handler: function(){
		 // 		alert("ADD增加");
		 // 	}
		 // },{}],
		 // tools: '';
		 // toolPosition: 'left',
		 // tabPosition: 'left',
		 // selected: 1,
		 onSelect: function(title,index){
		 	alert(title+"------"+index);
		 },
		 onContextMenu: function(e,title,index){
		 	alert(e.type+"|"+title+"|"+index);
		 }


	});
});

宇宙第一帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI的选项卡制作

EasyUI的选项卡相比用纯粹的javascript来做要简单的多。面板组件 tab111111------ tab222222------ tab333333------ 我的my.js文件：$(function(){ $("#box").tabs({ he
复制链接

扫一扫