首页 > 代码库 > [Jquery Ui]Tabs与iframe
[Jquery Ui]Tabs与iframe
关键代码：
(function (window) { yjqueryuiUtils = { tab: { addIframe: function (tabid) { /// <summary> /// tabs嵌套iframe /// <para>示例:yjqueryuiUtils.tab.addIframe(‘tabs‘); </para> /// <para>参考:http://deano.me/2011/08/jquery-tabs-iframes/ </para> /// <para>说明:每个Tabpage应设置href,id,rel属性</para> /// </summary> /// <param name="tabid">tabs的ID</param> var tabs = $(‘#‘ + tabid).tabs(); var url = $("#tabs ul li:eq(" + 0 + ")").find("a"); this.addEveryIframe(url.attr("href"), url.attr("rel"), url.attr("id")); $("#" + tabid + " ul li a").click(function () { yjqueryuiUtils.tab.addEveryIframe($(this).attr("href"), $(this).attr("rel"), $(this).attr("id")); }); }, addEveryIframe: function (href, rel, id) { /// <summary> /// tabs嵌套iframe /// </summary> /// <param name="href">超链接的href</param> /// <param name="rel">超链接的rel</param> /// <param name="id">超链接的id</param> if ($(href).find("iframe").length == 0) { var openout = $("#tp" + id), iframetab = $("#tpiframe" + id); if (openout.length == 0 && iframetab.length == 0) { var html = []; html.push(‘<div>‘); html.push(‘<div id="tp‘ + id + ‘"></div><iframe id="tpiframe‘ + id + ‘" src=http://www.mamicode.com/"‘ + rel + ‘"/>‘); html.push(‘</div>‘); $(href).append(html.join("")); openout = $("#tp" + id), iframetab = $("#tpiframe" + id); openout.css({ ‘float‘: ‘right‘, ‘position‘: ‘relative‘, ‘top‘: ‘-28‘, ‘left‘: ‘-5‘ }); iframetab.css({ ‘width‘: ‘100%‘, ‘height‘: ‘auto‘, ‘border‘: ‘0‘, ‘margin‘: ‘0‘, ‘position‘: ‘relative‘, ‘top‘: ‘0‘, ‘background‘: ‘white‘ }); } $(href).find("iframe").height($(window).height() - 80); } return false; } } } window.yjqueryuiUtils = yjqueryuiUtils;})(window);
<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>
示例：
<html><head> <script src=http://www.mamicode.com/"jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script> <script src=http://www.mamicode.com/"jquery-ui-1.11.2.custom/jquery-ui.js"></script> <link href=http://www.mamicode.com/"jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet" /> <script src=http://www.mamicode.com/"yjqueryuiUtils.js" type="text/javascript"></script> <style> html { font-size: 10px; } </style> <script> $(document).ready(function () { yjqueryuiUtils.tab.addIframe(‘tabs‘); }); </script></head><body> <div id="tabs"> <ul> <li><a href=http://www.mamicode.com/"#tabs-1" id="tab1" rel="http://www.baidu.com">baidu</a></li> <li><a href=http://www.mamicode.com/"#tabs-2" id="tab2" rel="http://www.microsoft.com">microsoft</a></li> <li><a href=http://www.mamicode.com/"#tabs-3" id="tab3" rel="http://www.bing.com">bing</a></li> </ul> <div id="tabs-1"> </div> <div id="tabs-2"> </div> <div id="tabs-3"> </div> </div></body></html>
<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>
效果：
[Jquery Ui]Tabs与iframe