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>
