[Jquery Ui] Tabs and IFRAME

Key code:

(function(window) {yjqueryuiutils = {tab: {addiframe:function(TabID) {// <summary>                /// tabs nested iframe                ///<para> Example: YjqueryuiUtils.tab.addIframe (' tabs '); </para>                ///<para> reference: http://deano.me/2011/08/jquery-tabs-iframes/</para>                ///<para> Description: Each TabPage should be set Href,id,rel properties </para>                // </summary>                /// <param name= "TabID" >tabs id</param>                varTabs = $ (' # '+ tabid). tabs ();varURL = $ ("#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 nested iframe                // </summary>                /// <param name= "href" > Hyperlink href</param>                /// <param name= "rel" > Hyperlink rel</param>                /// <param name= "id" > Hyperlink id</param>                if($ (HREF). Find ("iframe"). Length = = 0) {varOpenout = $ ("#tp"+ id), Iframetab = $ ("#tpiframe"+ ID);if(Openout.length = = 0 && Iframetab.length = = 0) {varhtml = []; Html.push (' <div> '); Html.push (' <div id= ' TP '+ ID +' "></div><iframe id=" Tpiframe '+ ID +' "src=" '+ 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);

Example:

"Jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script> <script src="Jquery-ui-1.11.2.custom/jquery-ui.js"></script> <link href="Jquery-ui-1.11.2.custom/jquery-ui.css"Rel="stylesheet"/> <script src="Yjqueryuiutils.js"Type="Text/javascript"></script> <style> html {font-size:10px; } </style> <script> $ (document). Ready (function () {YjqueryuiUtils.tab.addIframe (' tabs ');    }); </script>"Tabs"> <ul> <li><a href="#tabs-1"Id="Tab1"Rel="Http://www.baidu.com">baidu</a></li> <li><a href="#tabs-2"Id="TAB2"Rel="http://www.microsoft.com">microsoft</a></li> <li><a href="#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>
Effect:
[Jquery Ui] Tabs and IFRAME