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 页关闭按钮时,需要做判断,判 ...
随机推荐
- Python的全局变量
应该尽量避免使用全局变量.不同的模块都可以自由的访问全局变量,可能会导致全局变量的不可预知性.对全局变量,如果程序员甲修改了_a的值,程序员乙同时也要使用_a,这时可能导致程序中的错误.这种错误是很难 ...
- 一道打印M的面试题
public class Demo { /** * 平面图形题(二维数组) */ public static void main(String[] args) { int num = 25; int ...
- Thinking in Java——笔记(1)
Introduction To Obejct The progress of abstraction But their primary abstraction still requires you ...
- RHEL/CentOS/Fedora各种源(EPEL、Remi、RPMForge、RPMFusion)配置
最新文章:Virson’s Blog CentOS默认自带CentOS-Base.repo源,但官方源中去除了很多有版权争议的软件,而且安装的软件也不是最新的稳定版.Fedora自带的源中也找不到很多 ...
- phpcms流程
phpcms流程1: 安装 将下载好的文件放到www目录下 地址栏中输入 http://localhost/phpcms/install_package/install 打开安装页面 进行安装即可. ...
- 蓝牙--对象交换协议(OBEX)
1.OBEX协议概述 OBEX是IrOBEX的简称,IrOBEX协议是红外数据协会IrDA开发的用于红外数据链路上数据对象交换的会话层协议.OBEX是一种紧凑高效的二进制协议,功能类似于HTTP协议. ...
- HDFS的概念
1.数据块 每个磁盘都有默认的数据块大小,这是磁盘进行数据读/写的最小单位.构建于单个磁盘之上的文件系统通过磁盘块来管理该文件系统中的块,该文件系统块的大小可以是磁盘块的整数倍.文件系统快一半为几千字 ...
- JMeter学习-010-JMeter 配置元件实例之 - CSV Data Set Config 参数化配置
众所周知,在进行接口测试的过程中,需要创建不同的场景(不同条件的输入,来验证不同的入参的返回结果).因而,在日常的自动化接口监控或商品监控等线上监控过程中,需要配置大量的入参来监控接口的返回是否正确. ...
- 与子域名共用session信息
参考自 http://www.jb51.net/article/19664.htm 下面的步骤只使用于两个域名在同一个服务起得情况下,如果不在一个服务器上,就需要考虑通过数据库来存储session信息 ...
- Java StringBuilder 高性能用法总结
StringBuilder 误解: 1. Java编译优化后+和StringBuilder的效果一样: 2. StringBuilder不是线程安全的,为了"安全"起见最好还是用S ...