标签：
关键代码：
(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="‘ + 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);
示例：
<html>
<head>
<script src="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>
</head>
<body>
<div id="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>
</html>
效果：
标签：
原文地址：http://www.cnblogs.com/Yan-Zhiwei/p/4195657.html
