как настроить вкладки jquery на высоту 100%?

как настроить вкладки jquery на высоту 100%?

мне также нужно изменить размер iframe внутри него, чтобы расширить его до 100% высоты.

спасибо!


person Community    schedule 24.07.2009    source источник
comment
некоторый код облегчил бы просмотр того, что происходит... Разметка CSS и HTML обсуждаемых элементов.   -  person peirix    schedule 24.07.2009


Ответы (5)


Чтобы изменить размер вкладок пользовательского интерфейса (по крайней мере, последняя версия 1.7.2), он работал со следующим кодом:

$ (document).ready (function () {
function resizeUi() {
    var h = $(window).height();
    var w = $(window).width();
    $("#tabs").css('height', h-95 );
    $(".ui-tabs-panel").css('height', h-140 );
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeUi, 100);
});
resizeUi();
}

Плюс следующий css:

#tabs { 
    display: inline-block; 
    width:325px;
}

Вам придется отредактировать некоторые числа в соответствии с вашими потребностями.

person Omiod    schedule 26.10.2009
comment
Забыл про IFRAME. Просто добавьте эту строку $(iframe#myiframe).css('height', h-95 ); в конце функции выше и настройте значение 95. может быть 0 в вашем случае. - person Omiod; 26.10.2009

Если когда-нибудь это может быть полезно кому-то еще, я добавил несколько обратных вызовов для «показать» и «добавить», чтобы всегда получать идеальную высоту. В моем случае верхний контейнер имеет класс «ui-layout-pane» (поскольку я использую макеты jquery), но он должен работать с любым классом.

myTab = $("#tabs").tabs({
    show: function(e,ui){
        var $c = $(ui.panel), h = parseInt($(ui.tab).parent().outerHeight());
        while ( $c.length > 0 && !$c.hasClass("ui-layout-pane") ){
            h += ( $c.outerHeight(true) - $c.innerHeight() );
            $c = $c.parent();
        }
        h = parseInt($c.innerHeight() - h );
        $(ui.panel).height(h);
        return true;
    },
    add: function(e,ui){
        $(this).tabs("select",ui.index);
    }
});
person Nabab    schedule 20.11.2011
comment
В событии «show» мне пришлось изменить $(ui.panel).height(h); на $(ui.panel).parent().height(h);, и это сработало! Пользовательский интерфейс JQuery версии 1.8.14. - person icats; 27.02.2012

Я не думаю, что вы можете сделать это надежно (кроссбраузерно) только с помощью css.

Возможно, вам следует использовать jquery, чтобы получить высоту страницы и установить каждый элемент следующим образом:

$(window).resize(function() {
   var wh = parseInt($(window).height());

   if ($.browser.opera) {
      wh = $.browser.version > "9.5" ? document.documentElement["clientHeight"] : wh;
   }

   $('#elementid').css("height", wh);
});
person user142360    schedule 24.07.2009

Вы можете использовать div с высотой: 100%, чтобы содержимое вкладки расширялось на всю высоту экрана.

Информацию об изменении размера iframe см. здесь.

person kgiannakakis    schedule 24.07.2009
comment
уже сделал 100% высоту для всех html, body и div. но все же мне не повезло. трюк с iframe также не сработал. любые другие предложения? - person ; 24.07.2009
comment
кстати, я генерирую iframe через .html() - person ; 24.07.2009

Вы пытались установить свойство высоты с помощью метода CSS:

$("#ID OF YOUR TAB ELEMENT").css("height","100%");
person TheVillageIdiot    schedule 24.07.2009