0

私はしばらくウェブで検索していましたが、答えが見つかりませんでした。JQuery UI 1.9.2 から 1.10.0 へのアップグレード中、タブを除いてすべてがスムーズに進みました。1.9.2 で「表示」オプションをセットアップし、それを「アクティブ」および「アクティブ化」に置き換えました。ポイントは、タブを作成した直後は、'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 を動的に読み込めるようにしたいということです。

4

1 に答える 1

1

私はついに解決策を得ました。「loadTab()」関数があり、「create」および「activate」イベントを使用しました。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 に答える