這是最近學到的內容，當時是有思路但是不知道怎么獲取當前的點擊對象，就沒有實現功能，通過更深入的學習，我知道了不僅僅是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>