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 页关闭按钮时,需要做判断,判 ...
随机推荐
- codeforces480E Parking Lot
题目大意:给一个点阵,其中有的地方没有点,操作是去掉某个点,并询问当前点阵中最大的正方形 若没有修改的话,裸dp 加上修改,可以考虑时光倒流,这样答案就是递增的 可以用并查集维护点的连通性,O^2的 ...
- Git subtree和Git submodule
git submodule允许其他的仓库指定以一个commit嵌入仓库的子目录. git subtree替代git submodule命令,合并子仓库到项目中的子目录.不用像submodule那样每次 ...
- A trip through the Graphics Pipeline 2011_05
After the last post about texture samplers, we’re now back in the 3D frontend. We’re done with verte ...
- php高并发状态下文件的读写
php高并发状态下文件的读写 背景 1.对于PV不高或者说并发数不是很大的应用,不用考虑这些,一般的文件操作方法完全没有问题 2.如果并发高,在我们对文件进行读写操作时,很有可能多个进程对进一文件 ...
- HAProxy 实践(一)
运行环境 OS: Deiban 7 软件:haproxy 1.5.8 HTTP Server: 192.168.99.1:8520 192.168.99.1:8530 192.168.99.1:854 ...
- (地址)eclipse插件开发攻略的访问地址
园子地址: http://www.cnblogs.com/liuzhuo/category/257208.html 关键字: Eclipse插件开发彻底攻略 eclipse插件开发基础篇之
- RDIFramework.NET 中多表关联查询分页实例
RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...
- MyBatis 注解使用动态SQL
使用MyBatis很长时间了,一直使用的是XML配置的 SQL,刚好在上一个项目中尝试使用注解方式开发,主要是由于XML配置过于繁琐,注解可以直接写在Mapper函数上,更加的方便一些. 在注解上不能 ...
- 【Selenium】4.创建你的第一个Selenium IDE脚本
http://newtours.demoaut.com/ 这个网站将会用来作为我们测试的网址. 通过录制来创建一个脚本 让我们来用最普遍的方法——录制来创建一个脚本.然后,我们将会用回放的功能来执行录 ...
- 获取访问者ip的方法
package com.mi.util; import javax.servlet.http.HttpServletRequest; import org.apache.commons.lang3.S ...