JQuery UI вкладки загрузки / вкладки событие не запускается - PullRequest
Новая
       19

JQuery UI вкладки загрузки / вкладки событие не запускается

1 голос
/ 31 января 2012

Это похоже на мой вопрос: Событие загрузки вкладок jquery ui не запускается

но предоставленное решение не работает для меня.

мой код: 

<script type="text/javascript">

    $(document).ready(function(){

        $( "#tabs" ).bind( "tabsload", function(event, ui) {
            alert("ok");
            changeheight();
        });
        $("#tabs").tabs({
        load: function(event, ui){
            alert("load");
            changeheight();},
        cache: true});
    });

function changeheight(){
    alert("changeheight");
    var iframe = document.getElementById("#iframe1");
    var htmlheight = iframe.contentWindow.document.body.scrollHeight;
    alert(htmlheight);
    $("#iframe1").height(htmlheight+"px");
}

</script>

<div id="tabs">
    <ul style="padding: 0; margin: 0;">
        <li class="context-tab" ><a href="#iframe1" id="recent-tab" >Recent</a></li>
    </ul>

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:95%;">
        </iframe>

Как видите, я пробую оба пути, но ни один из них не работает.

1 Ответ

0 голосов
/ 31 января 2012

Обработчик load предназначен только для вкладок, загружаемых через ajax.Чтобы сделать то, что вы хотите, вам нужно прикрепить обработчик загрузки к элементу iframe: 

<script type="text/javascript">

    $(document).ready(function(){
        $('#iframe1').load(function() {
          alert("ok");
          changeheight();
        });

        $("#tabs").tabs({
        load: function(event, ui){
            alert("load");
            changeheight();},
        cache: true});
    });

    function changeheight(){
        alert("changeheight");
        var iframe = document.getElementById("#iframe1");
        var htmlheight = iframe.contentWindow.document.body.scrollHeight;
        alert(htmlheight);
        $("#iframe1").height(htmlheight+"px");
    }

</script>

<div id="tabs">
    <ul style="padding: 0; margin: 0;">
        <li class="context-tab" ><a href="#iframe1" id="recent-tab" >Recent</a></li>
    </ul>

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:95%;"></iframe>
</div>

Обратите внимание, что ваш iframe может загружаться до того, как кто-то сможет нажать на вкладку.Это может быть то, что вы хотите.Если вы хотите просто вызвать что-то, когда выбрана вкладка, используйте событие tabsselect: 

$( ".selector" ).bind( "tabsselect", function(event, ui) {
  ...
});
...