使用easyUI+bootStrap框架做一個彈出式的tab標籤頁
阿新 • • 發佈：2018-11-11
參考網址：https://blog.csdn.net/wttykj/article/details/78538592<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>https://www.cnblogs.com/baiyangyuanzi/p/6625744.html</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.2/themes/default/easyui.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ $('#s1').click(function(){ var $biaoTi=$('#s1').text(); //tab標題頁 var th=[{tab:"aaa"},{tab:"bbb"},{tab:"ccc"}]; //tab內容頁 var nr=[{nr:"aaaaa"},{nr:"bbbbb"},{nr:"ccccc"}]; //動態生成tab頁面的HTML，注意這個標籤頁的class，div等不要隨便修改，因為它是與bootstrap內建的相關聯的。 var tabStr=tabWindow(th,nr); //寫入到iframe視窗中的body之中，這是主視窗寫入子視窗的一個方法， $("#wind_1").contents().find('body').html(tabStr); //啟動TAB彈窗 $("#wind_1").window({ title:$biaoTi,//彈窗標題 width:700, //大小 height:550, modal:true //模態對話方塊 }); }); //下面的這個啟動同一個彈窗的目的，是看彈窗會不會受到快取的影響 $('#s2').click(function(){ var $biaoTi=$('#s2').text(); var th=[{tab:"中國"},{tab:"美國"},{tab:"德國"}]; var nr=[{nr:"aaaaa"},{nr:"bbbbb"},{nr:"ccccc"}]; var tabStr=tabWindow(th,nr); //寫入到iframe視窗中的body之中 $("#wind_1").contents().find('body').html(tabStr); $("#wind_1").window({ title:$biaoTi, width:700, height:550, modal:true }); }); }); </script> <style type="text/css"> #wind{ display:none; } </style> </head> <body onload="$('#s1').click();"> <section id="s1">這是一句</section> <section id="s2">這是二句</section> <div id="wind" title="彈窗"> <iframe id="wind_1" name="wind_1" src="openW.html"></iframe> </div> </body> </html> <script type="text/javascript"> /** * 功能：動態建立標籤頁 * 引數：th是一個json陣列，th陣列的個數決定標籤頁的個數；格式：th=[{'tab':'aaa'},{'tab':'bbb'}],aaa,bbb是標籤頁名 * 引數：n是一個json陣列，是對應th的每頁的內容格式：var n=[ {"nr":"內容一"}, {"nr":"內容二"} ]; * 作者：庭博 */ function tabWindow( th, n) { var hf = new Array(); var ar = new Array(); var tapWindow = '<div id="tab_box1"><ul class="nav nav-tabs" role="tablist">'; for(var i = 0; i < th.length; i++) { hf[i] = "#hf" + (i + 1); ar[i] = "hf" + (i + 1); if(i == 0) { tapWindow += '<li role="presentation" class="active">'; } else { tapWindow += '<li role="presentation">'; } tapWindow += '<a href="' + hf[i] + '" aria-controls="' + ar[i] + '" role="tab" data-toggle="tab">' + th[i].tab + '</a>'; tapWindow += '</li>'; } tapWindow += '</ul></div>'; var tabid = new Array(); tapWindow+='<div id="tab_box2"><div class="tab-content">'; for(var i = 0; i < th.length; i++) { tabid[i] = 'neirongId' + (i + 1); if(i == 0) { tapWindow += '<div role="tabpanel" class="tab-pane active" id="' + ar[i] + '">'+n[i].nr+'</div>'; } else { tapWindow += '<div role="tabpanel" class="tab-pane" id="' + ar[i] + '">'+n[i].nr+'</div>'; } } tapWindow+="</div></div>"; return tapWindow; } </script>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>這是被其它視窗呼叫的個彈窗</title> <!--引入bootstrap外掛--> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"> <script src="js/jquery.js" type="text/javascript"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script type="text/javascript"> </script> </head> <body> </body> </html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
效果：
但這個彈窗還是有一個缺點，就是第一次啟動時，它會出來一個空視窗，第二次時，才會出現這個tab頁。有誰知道解決辦法的，請留言！