2013-02-12 51 views
0

我一直在网上搜索并找不到答案。 从JQuery UI 1.9.2升级到1.10.0时,除了制表符以外,一切都很顺利。 我在1.9.2中设置了'show'选项,并将其替换为'active'和'activate'。 重点在于,在创建标签后,不会调用“激活”功能。 我该如何解决这个问题? (我试图用“创造”活动,但如何调用从“创造”的“激活”事件?JQuery UI选项卡1.10.0激活不会在创建后调用

谢谢。

<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页面时被激活。

+2

请分享您的源代码。如果你必须使用jsfiddle。 – 2013-02-12 17:17:22

+0

刚刚编辑我的问题的示例 – Cedric 2013-02-12 17:46:50

+0

一些评论:jquery.cookie.js用于存储/加载最后选定的选项卡,query.iframe-auto-height.js根据内容的高度调整iframe元素的大小 – Cedric 2013-02-12 17:52:33

回答

1

我终于得到了解决。 我有一个“loadTab()”功能,并使用“创造”和“激活”事件。 的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>