jQuery使用iframe做tab标签
jQuery Tab插件 http://jqueryui.com/tabs/#default
Jquery、tabs、iframe相结合 http://blog.sina.com.cn/s/blog_656977f401014oy6.html
使用Jquery中的ui.tabs.js，如果tab中的界面有按钮需要跳转到新的页面时，整个页面会跳转，为了使界
面在tab内部跳转，可以在tab中使用iframe将页面加载。代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
Html代码 <div id="expenseTabs" style="width: 98%; background: #cadbe7;"> <ul> <li><a id="noTravelExpenseTab" href="#noTravelExpenseDiv"><nobr>非差旅报销</nobr></a> </li> <li><a id="travelExpenseTab" href="#travelExpenseDiv"><nobr>差旅报销</nobr></a> </li> </ul> <div id="noTravelExpenseDiv"> <iframe id="noTravelExpenseFrame" src="${contextPath}/expense/noTravelExpenseAction.do" width="100%" frameborder="0" marginheight="0" marginwidth="0"> </iframe> </div> <div id="travelExpenseDiv"> <iframe id="travelExpenseFrame" src="${contextPath}/expense/travelExpenseAction.do" width="100%" frameborder="0" marginheight="0" marginwidth="0"> </iframe> </div> </div> <script language="javascript"> $(function() { $('#expenseTabs').tabs({ cookie: { // store cookie for a day, without, it would be a session cookie expires: 1 }, select:function(event,ui) { $('#expenseTabs').tabs("url",ui.index, ""); } }); $("table tr:nth-child(odd)").addClass("striped"); }); </script> |
此时，iframe会出现纵向滚动条，是因为其高度所致。我们可以再加一段代码来设置它的高度。
|
1 2 3 4 5 6 7 |
Html代码 <script type="text/javascript"> var noTravelExpenseFrame = document.getElementByIdx_x("noTravelExpenseFrame"); noTravelExpenseFrame.height = document.body.clientHeight; var travelExpenseFrame = document.getElementByIdx_x("travelExpenseFrame"); travelExpenseFrame.height = document.body.clientHeight; </script> |
这样问题得以解决。
点击“申请报销”按钮时，跳转到另一页面，但此时页面仍在刚才的tab中，如下图所示：
当然，tab边界与iframe边界之间有背景颜色的差异，是因为iframe中src返回的jsp页面宽度不为100%引起的。样式问题可以自己调试。
jQuery Tabs + iFrame’s http://deano.me/2011/08/jquery-tabs-iframes/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
Html代码 <html> <head> <script type="text/javascript" src="data/js/jquery.js"></script> <script type="text/javascript" src="data/js/jquery-ui.js"></script> <link href="data/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"> <style> html { font-size:10px; } .iframetab { width:100%; height:auto; border:0px; margin:0px; background:url("data/iframeno.png"); position:relative; top:-13px; } .ui-tabs-panel { padding:5px !important; } .openout { float:right; position:relative; top:-28px; left:-5px; } </style> <script> $(document).ready(function() { var $tabs = $('#tabs').tabs(); //get selected tab function getSelectedTabIndex() { return $tabs.tabs('option', 'active'); } //get tab contents beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a"); loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel")); $("a.tabref").click(function() { loadTabFrame($(this).attr("href"),$(this).attr("rel")); }); //tab switching function function loadTabFrame(tab, url) { if ($(tab).find("iframe").length == 0) { var html = []; html.push('<div class="tabIframeWrapper">'); html.push('<div class="openout"><a href="' + url + '"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>'); html.push('</div>'); $(tab).append(html.join("")); $(tab).find("iframe").height($(window).height()-80); } return false; } }); </script> </head> <body> <div id="tabs"> <ul> <li><a class="tabref" href="#tabs-1" rel="http://google.co.uk">google</a></li> <li><a class="tabref" href="#tabs-2" rel="http://yahoo.co.uk">yahoo</a></li> <li><a class="tabref" href="#tabs-3" rel="http://bing.co.uk">bing</a></li> </ul> <div id="tabs-1" class="tabMain"> </div> <div id="tabs-2"> </div> <div id="tabs-3"> </div> </div> </body> </html> |
