как настроить вкладки jquery на высоту 100%?
мне также нужно изменить размер iframe внутри него, чтобы расширить его до 100% высоты.
спасибо!
как настроить вкладки jquery на высоту 100%?
мне также нужно изменить размер iframe внутри него, чтобы расширить его до 100% высоты.
спасибо!
Чтобы изменить размер вкладок пользовательского интерфейса (по крайней мере, последняя версия 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;
}
Вам придется отредактировать некоторые числа в соответствии с вашими потребностями.
Если когда-нибудь это может быть полезно кому-то еще, я добавил несколько обратных вызовов для «показать» и «добавить», чтобы всегда получать идеальную высоту. В моем случае верхний контейнер имеет класс «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);
}
});
$(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);
});
Вы можете использовать div с высотой: 100%, чтобы содержимое вкладки расширялось на всю высоту экрана.
Информацию об изменении размера iframe см. здесь.
Вы пытались установить свойство высоты с помощью метода CSS:
$("#ID OF YOUR TAB ELEMENT").css("height","100%");