EasyUI中动态生成标签页
这是最近学到的内容，当时是有思路但是不知道怎么获取当前的点击对象，就没有实现功能，通过更深入的学习，我知道了不仅仅是Java，Oracle中有一个this，同样的EasyUI中也存在一个this，来获取当前的点击对象，好了，就不多比比了，直接说实现过程，并奉上双份实现代码及方法。
第一种方法：EasyUI中的方法
我们首先要先建一个网页，并引入配置什么的这里就不一一细说了，之后我们在body中新建一个div并引用easyui-tabs类，并设置标识id
2之后再添加三个linkbutton进行测试，一定要在之前div的外面
3这时候我们保存打开网页就会看到
4接下来就是要在<script></script>中写点什么了，也是最后一步
这里我们写什么呢？
首先我们最后要实现的功能是添加一个标签页，所以这里我们有点击事件，并通过事件我们获取了当前的点击对象，这时候我们需要判断该对象存不存在，若是存在了我们就不新建了，直接打开就好，若是不存在我们就新建一个。 这就是我们的思路
代码如下（有注释）：
<script type="text/javascript">
$(function(){
$(".easyui-linkbutton").click(function(){
/*当时自己做没有做出来的主要原因是不知道怎么
获取当前的点击对象
*/
var title = $(this).text() ;//获取当前的点击对象并用变量接收 if($("#tt").tabs("exists",title))//用tabs的exists判断title标签页是否存在
{
$("#tt").tabs("select",title) ;//如果存在就选中该标签页
}
else
{
$("#tt").tabs('add',{ //不存在通过add来添加
title:title , //标签页标题
closable:true//是否可关闭
});
}
});
});
</script>
到这里我们的功能就实现了
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态创建标签页</title>
<!-- 1 jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script> <!-- 2 css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"> <!-- 3 图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> <!-- 4 EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <!-- 5 本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> </head>
<body>
<script type="text/javascript">
$(function(){
$(".easyui-linkbutton").click(function(){
/*当时自己做没有做出来的主要原因是不知道怎么
获取当前的点击对象
*/
var title = $(this).text() ;//获取当前的点击对象并用变量接收 if($("#tt").tabs("exists",title))//用tabs的exists判断title标签页是否存在
{
$("#tt").tabs("select",title) ;//如果存在就选中该标签页
}
else
{
$("#tt").tabs('add',{ //不存在通过add来添加
title:title , //标签页标题
closable:true//是否可关闭
});
}
});
});
</script>
<a id="adduser" href="#" class="easyui-linkbutton" >添加联系人</a>
<a id="modifyuser" href="#" class="easyui-linkbutton">修改联系人</a>
<a id="deleteuser" href="#" class="easyui-linkbutton">删除联系人</a>
<div id="tt" class="easyui-tabs" data-options="justified:false" style="height:300px;width:500px"> </div>
</body>
</html>
=========================================================================================
第二种方法：通过原来学习的JavaScript中的onclick事件来实现
我们首先要先建一个网页，并引入配置什么的这里就不一一细说了，之后我们在body中新建一个div并引用easyui-tabs类，并设置标识id
2之后再添加三个linkbutton并添加onclick事件进行测试，一定要在之前div的外面
3在<script></script>中写addTab方法
这样就实现了，相对上面来说这个方法相对简单好理解一点
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成标签页2</title>
<!-- 1 jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script> <!-- 2 css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"> <!-- 3 图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> <!-- 4 EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <!-- 5 本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> </head>
<body>
<script type="text/javascript">
function addTab(title)
{
if ($('#tt').tabs('exists', title))
{
$('#tt').tabs('select', title);
}
else
{
$('#tt').tabs('add',{
title:title,
closable:true
});
}
}
</script>
<a id="adduser" href="#" class="easyui-linkbutton" onclick="addTab('添加联系人')">添加联系人</a>
<a id="modifyuser" href="#" class="easyui-linkbutton" onclick="addTab('修改联系人')">修改联系人</a>
<a id="deleteuser" href="#" class="easyui-linkbutton" onclick="addTab('删除联系人')">删除联系人</a>
<div id="tt" class="easyui-tabs" data-options="justified:false" style="height:300px;width:500px"> </div> </body>
</html>
========================================================================================
如果想在标签中打开其他的网页只需要加入url属性就可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{margin:0;padding:0}
</style>
<!-- 1 jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script> <!-- 2 css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"> <!-- 3 图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> <!-- 4 EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <!-- 5 本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//创建打开新标签页的按钮
$(
function()
{
$("#add_tab").linkbutton(
{
text:"添加",
iconCls:"icon-add"
}) ; $("#add_tab").click
(
function()
{
if($("#tt").tabs("exists","新标签页"))
{
$("#tt").tabs("select","新标签页")
}
else
{
$("#tt").tabs('add',{
title:'新标签页',
closable:true
}) ;
}
}
); $(".easyui-linkbutton").click
(
function()
{
//获取主键的属性或内容
var title = $(this).text() ;//this获取当前点击的对象 var url = $(this).attr("title") ; if($("#tt").tabs("exists",title))
{
$("#tt").tabs("select",title)
}
else
{
$("#tt").tabs('add',{
title:title,
closable:true,
href:url
}) ;
}
}
); $("#aaaq").click(
function haha ()
{
$("#tt").tabs('add',{
title:$("#aaaq").text(),
closable:true
}) ;
}
) ; }
) ;
//第二种方法
/*function addTab(title){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
$('#tt').tabs('add',{
title:title,
closable:true
});
}
}*/
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'顶部',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'底部',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'工具',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'菜单',split:true" style="width:200px;"> <div id="ac" class="easyui-accordion" data-options="fit:true">
<div title="员工信息">
<center><a id="add_tab" style="width:100%"></a></center>
<a href="#" onclick="addTab('增加')" title="adduser.html" class="easyui-linkbutton" style="width:100%">增加员工</a>
<a href="#" onclick="addTab('删除')" title="deleteuser.html" class="easyui-linkbutton" style="width:100%">删除员工</a>
<a href="#" onclick="addTab('修改')" title="modifyuser.html" class="easyui-linkbutton" style="width:100%">修改员工</a>
<a href="#" onclick="addTab('修改')" title="productlist.html" class="easyui-linkbutton" style="width:100%">产品列表</a>
</div>
<div title="考勤信息">这是考勤信息模块</div>
<div title="招聘信息">这是招聘信息模块</div>
</div>
</div>
<div data-options="region:'center',title:'主窗口'" style="padding:5px;background:#eee;" >
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,justified:false,pill:true">
<div title="Tab1" style="padding:20px;">
tab1
</div>
<div title="Tab2" data-options="closable:true,selected:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
</div>
</body>
</html>
EasyUI中动态生成标签页的更多相关文章
- EasyUI 布局 - 动态添加标签页（Tabs）
首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...
- EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
- ES6面向对象 动态添加标签页
HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...
- JQuery中动态生成元素的绑定事件（坑死宝宝了）
今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...
- HTML中动态生成内容的事件绑定问题【转载】
转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中 ...
- iTextSharp动态生成多页pdf及追加内容等记录
1.要动态生成pdf,无非是用第三方或直接代码生成. 2.iTextSharp生成pdf问题点记录 dll相关下载 https://files.cnblogs.com/files/xlgwr/iTex ...
- 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定
最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...
- web前端中实现多标签页切换的效果
在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...
- Easyui 关闭jquery-easui tab标签页前触发事件
关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...
随机推荐
- BizTalk开发系列(十三) Schema设计之值约束
XML Schema 的作用是定义 XML 文档的合法构建模块.在开发过程中有时需要对XML文档做精确的约束.以保证XMl数据的准确性. 今天我们以一个班级Sample来讲探讨一下如何在开发BizTa ...
- Linux 搭建svn服务器
一.安装svn服务器端yum install subversion 从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...
- java swing 中的FileDialog
1.FileDialog使用方法: FileDialog fd=new FileDialog(new Frame(),"测试",FileDialog.LOAD); Filenam ...
- 8th 本周工作量及进度统计
本周PSP: C(类别) C(内容) S(开始时间) ST(结束时间) I(中断时间) T(实际时间) 活动 本周站立会议 -- -- -- 340 撰写博客 构建之法有感 22:10 23:44 3 ...
- python中多进程（multiprocessing）
一.multiprocessing中使用子进程概念 from multiprocessing import Process 可以通过Process来构造一个子进程 p = Process(target ...
- oracle课堂笔记
1.DOS登录1.1.sqlplus 输入用户名.密码1.2.sqlplus /nolog conn 用户名/密码@ip地址/数据库名称 [如果是sys登录则必须加上as sysdba ,as sys ...
- thinkphp3.2 cli模式的正确使用方法
最近要使用thinkphp3.2版本的cli模式,手动执的话没有问题,比如php /www/index.php home/article/get 这样没有问题,但是一般用cli模式都是定时任务比较多, ...
- 程序中的@Override是什么意思
@Override是Java5的元数据,自动加上去的一个标志,告诉你说下面这个方法是从父类/接口 继承过来的,需要你重写一次,这样就可以方便你阅读,也不怕会忘记 @Override是伪代码,表示重写( ...
- IE8兼容H5语义标签
//IE浏览器定义的特殊属性,通过hack方式判断IE版本来执行不同的代码,IE8以下浏览器自动创建html5语义标签,从而实现兼容<!--[if lte IE 8] <script sr ...
- ios数据库常用sql语句
SQlite常用语句 由于sql语句在程序代码中以字符串的形式存在,没有代码提示,不细心很容易出错,而且不容易被查出来.sql语句字符串是单引号. 写sql语句的时候一定要细心呀.如果写不好可以找公司 ...