0

我在网上搜索了一段时间，找不到答案。从 JQuery UI 1.9.2 升级到 1.10.0 时，除了选项卡外，一切都很顺利。我在 1.9.2 中设置了“显示”选项，并将其替换为“活动”和“激活”。关键是在创建选项卡之后，不会调用“激活”函数。我该如何解决？（我尝试使用“创建”事件，但如何从“创建”调用“激活”事件？

谢谢你。

<html>
<head>
    <link href="/css/styles.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/base/jquery.ui.all.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/Cupertino/jquery-ui.css" rel='stylesheet' type='text/css'></link>
    <script src='/js/jquery-1.9.1.min.js' rel='text/javascript'></script>
    <script src='/js/jquery-ui-1.10.0.custom.js' rel='text/javascript'></script>
    <script src='/js/jquery.cookie.js' rel='text/javascript'></script>
    <script src='/js/jquery.browser.js' rel='text/javascript'></script>
    <script src='/js/jquery.iframe-auto-height.1.9.1.js' rel='text/javascript'></script>
</head>
<body class='ui-widget-content'>
    <div id='tabber'>
        <ul>
            <li>
                <a href="#tabber-00">General information</a>
            </li>
            <li>
                <a href="#tabber-01" url='.page.php'>Remote page</a>
            </li>
        </ul>
        <div id='tabber-00'>
            <p>Some content here</p>
        </div>
        <div id='tabber-01'></div>
    </div>
</body>
<script type='text/javascript'>
    $(function() {
        $('#tabber').tabs({
        ajaxOptions:{cache:false},
        active: ($.cookie('tabber') || 0 ),
        activate:function(event,ui) {
                      var tab = ui.newTab.find('a').attr('href');
                      var url=ui.newTab.find('a').attr('url');
                      if( url != null ) {
                        var html=[];
                        html.push('<iframe width="100%" height="auto" frameborder="0" margin="0" src="' + url + '">Load Failed?</iframe>');
                        $(tab).empty();
                        $(tab).append( html.join('') ); 
                        $(tab).find('iframe').iframeAutoHeight({minHeight:400});
                      }
                      alert('activate');
                      var index = ui.newTab.parent().children().index(ui.newTab);
                      $.cookie('tabber_user_info', index, { expires:999 } )
                     },
        });
    });
</script>
</html>

我的主要问题是我使用 iframe 并希望能够在页面被激活时动态加载 iframe。

4

1 回答 1

1

我终于得到了解决方案。我有一个“loadTab()”函数并使用“创建”和“激活”事件。loadTab() 函数创建一个 iframe 并根据其内容调整其大小。

我正在使用以下插件：

  • jquery.cookie.js
  • jquery.browser.js
  • jquery.iframe-auto-height.js

谢谢。

<html>

<title></title>
<head>

    <link href="/css/styles.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/base/jquery.ui.all.css" rel='stylesheet' type='text/css'></link>
    <link href="/css/themes-1.10.0/Cupertino/jquery-ui.css" rel='stylesheet' type='text/css'></link>
    <script src='/js/jquery-1.9.1.min.js' rel='text/javascript'></script>
    <script src='/js/jquery-ui-1.10.0.custom.js' rel='text/javascript'></script>
    <script src='/js/jquery.cookie.js' rel='text/javascript'></script>
    <script src='/js/jquery.browser.js' rel='text/javascript'></script>
    <script src='/js/jquery.iframe-auto-height.1.9.1.js' rel='text/javascript'></script>
</head>
<body class='ui-widget-content'>

    <div id='tabber'>
        <ul>
            <li>
                <a href="#tabber-00">Tab 1</a>
            </li>
            <li>
                <a href="#tabber-01" url="page.php">Tab 2</a>
            </li>
        </ul>
        <div id='tabber-00'>
            <p>Some Text</p>
        </div>
        <div id='tabber-01'></div>
    </div>
</body>
<script type='text/javascript'>
    $(function() {
        function loadTab(tab) { var href = tab.find('a').attr('href'); var url = tab.find('a').attr('url'); if( url != null ) { $(href).empty(); $(href).append( '<iframe width="100%" height="auto" frameborder="0" margin="0" src="' + url + '">Load Failed?</iframe>' ); $(href).find('iframe').iframeAutoHeight({minHeight:400}); } }
        $('#tabber').tabs({
        ajaxOptions:{cache:false},
        active:($.cookie('tabber') || 0 ),
        activate:function(event,ui) { loadTab(ui.newTab); var index = ui.newTab.parent().children().index(ui.newTab); $.cookie('tabber', index, { expires:999 } ) },
        create:function(event,ui) { loadTab(ui.tab); },
        });

    });
</script>
</html>
于 2013-02-13T16:16:40.687 回答