首页 > 网站 > WEB开发 > 正文

[Jquery Ui]Tabs与iframe

2024-04-27 14:14:31
字体:
来源:转载
供稿:网友

[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="' + 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>

效果:

image


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表