Question

我一直在网上搜索，但找不到答案。从JQuery UI 1.9.2升级到1.10.0时，除标签外一切顺利。我在1.9.2中设置了'show'选项，并将其替换为'active'和'activate'。关键是在创建选项卡后，不会调用'activate'函数。我怎么解决这个问题？（我尝试使用'create'事件，但如何从'create'调用'activate'事件？

谢谢。

<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。

Answer 1

我终于得到了解决方案。我有一个'loadTab（）'函数并使用'create'和'activate'事件。 loadTab（）函数创建一个iframe并根据其内容调整大小。

我使用以下插件：

jquery.cookie.js
jquery.browser.js
jquery.iframe-自动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>

创建后不会调用JQuery UI选项卡1.10.0 activate

1 个答案: