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 页关闭按钮时,需要做判断,判 ...
随机推荐
- Matlab里面的SVM
支持向量机是建立在统计学习理论基础之上的新一代机器学习算法,支持向量机的优势主要体现在解决线性不可分问题,它通过引入核函数,巧妙地解决了在高维空间中的内积运算,从而很好地解决了非线性分类问题. 构造出 ...
- EmguCV 阈值化
一.public static double cvThreshold( IntPtr src, IntPtr dst, double threshold, double maxValue, //Max ...
- js中的text()，html() ，val()的区别
js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...
- PHP 标准库 SPL 之数据结构栈（SplStack）简单实践
PHP 5.3.0 版本及以上的堆栈描述可以使用标准库 SPL 中的 SplStack class,SplStack 类继承双链表 ( SplDoublyLinkedList ) 实现栈. 代码: & ...
- 奥迪--S5
--型号:S5 --生产:奥迪进口 --价格:60-80W --发动机:3T 333马力 V6,机械增压 --变速箱:7档双离合 --气缸排列:V --总部:德国,英戈尔施塔特 --类型:中型车 -- ...
- 20145221高其&20145326蔡馨熠《信息安全系统设计基础》实验二 固件设计
20145221高其&20145326蔡馨熠<信息安全系统设计基础>实验二 固件设计 实验目的与要求 了解多线程程序设计的基本原理,学习 pthread 库函数的使用. 了解在 l ...
- CentOS7安装mysql5.6.23
============安装glibc版本============== 一.下载glibc版本的Mysql mysql-advanced-5.6.23-linux-glibc2.5-x86_64.zi ...
- 自定义 导航条分割线，tabBar分割线颜色（或者是 去掉）
UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, bgView.frame.size.width, 0.5)]; l ...
- Objective-C 编码建议
Objective-C 是 C 语言的扩展,增加了动态类型和面对对象的特性.它被设计成具有易读易用的,支持复杂的面向对象设计的编程语言.它是 Mac OS X 以及 iPhone 的主要开发语言. C ...
- LeetCode Binary Tree Longest Consecutive Sequence
原题链接在这里:https://leetcode.com/problems/binary-tree-longest-consecutive-sequence/ 题目: Given a binary t ...