这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是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中动态生成标签页的更多相关文章

  1. EasyUI 布局 - 动态添加标签页(Tabs)

    首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...

  2. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  3. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  4. JQuery中动态生成元素的绑定事件(坑死宝宝了)

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

  5. HTML中动态生成内容的事件绑定问题【转载】

    转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中 ...

  6. iTextSharp动态生成多页pdf及追加内容等记录

    1.要动态生成pdf,无非是用第三方或直接代码生成. 2.iTextSharp生成pdf问题点记录 dll相关下载 https://files.cnblogs.com/files/xlgwr/iTex ...

  7. 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定

    最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...

  8. web前端中实现多标签页切换的效果

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

  9. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

随机推荐

  1. PHP魔术方法使用总结

    魔术方法是PHP面向对象中特有的特性.它们在特定的情况下被触发,都是以双下划线开头,你可以把它们理解为钩子,利用模式方法可以轻松实现PHP面向对象中重载(Overloading即动态创建类属性和方法) ...

  2. cookie案例-显示用户上次访问网站的时间

    package cn.itcast.cookie; import java.io.IOException; import java.io.PrintWriter; import java.util.D ...

  3. ss与udp转发的释疑

    转载: http://shadowsocks.info/shadowsocks-udp/ VPS购买地址 udp是什么:UDP 是User Datagram Protocol的简称, 中文名是用户数据 ...

  4. css3渐变之linear-gradient与-webkit-linear-gradient写法异同

    语法background: linear-gradient(direction, color-stop1, color-stop2, ...); 通常只需要linear-gradient,兼容性较好. ...

  5. 8 ways rich people view the world differently than the average person

    Self-made millionaire Steve Siebold spent 26 years interviewing some of the wealthiest people in the ...

  6. angularJs的ng-class切换class

    在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式 字 ...

  7. connect to https://dl-ssl.google.com refused

    这个可能是网络问题,国内连google服务器经常连不上. 尝试用下面办法试下: 1.上图SDK Manager 的 Tools ->Options打开SDK Manager的Settings, ...

  8. JVM最多能创建多少个线程:unabletocreatenewnativethread

    最近需要测试一个长连接服务器,数据上需要达到100W的长连接,测试的客户端,一个线程保持一个连接,发现linux服务器默认创建到3200多个线程的时候,就会报错这个错误“java.lang.OutOf ...

  9. Vcenter server 5.5上传ISO镜像

    1.摘要 --- 浏览要上传的硬盘. 2.创建一个文件夹专业门存放ISO镜像. 3.选择上传文件. 4.选择文件上传即可.

  10. 多列布局——Columns

    为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...