Автоматическое изменение размера диалогового окна jQuery UI по ширине контента, загружаемого ajax
У меня много проблем с поиском конкретной информации и примеров по этому вопросу. У меня есть несколько диалоговых окон jQuery UI в моем приложении, связанных с div, которые загружаются вызовами .ajax (). Все они используют один и тот же вызов установки:
$(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true
});
Я просто хочу, чтобы диалоговое окно изменило размер до ширины загружаемого контента. Прямо сейчас ширина остается на уровне 300 пикселей (по умолчанию), и я получаю горизонтальную полосу прокрутки.
Насколько я могу судить, «autoResize» больше не является опцией для диалогов, и ничего не происходит, когда я ее указываю.
Я пытаюсь не писать отдельную функцию для каждого диалога, поэтому .dialog("option", "width", "500") на самом деле не вариант, так как каждый диалог будет иметь разную ширину.
Указание width: 'auto' для параметров диалога просто заставляет диалоги занимать 100% ширины окна браузера.
Какие у меня варианты? Я использую jQuery 1.4.1 с jQuery UI 1.8rc1. Кажется, что это должно быть что-то, что действительно легко.
РЕДАКТИРОВАТЬ: я применил грязный обходной путь для этого, но я все еще ищу лучшее решение.
3 ответа
Я только что написал крошечный образец приложения с использованием JQuery 1.4.1 и UI 1.8rc1. Все, что я сделал, это определил конструктор как:
var theDialog = $(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true,
width:'auto'
});
Я знаю, что вы сказали, что он занимает 100% ширины окна браузера, но здесь он отлично работает, протестирован в FF3.6, Chrome и IE8.
Я не выполняю вызовы AJAX, просто вручную меняю HTML-код диалогового окна, но не думаю, что это вызовет какие-либо проблемы. Может ли какой-то другой параметр CSS выбить это из строя?
Единственная проблема в том, что это делает ширину смещенной от центра, но я нашел этот билет поддержки , где они предоставляют обходной путь размещения dialog ('open') в setTimeout для устранения проблемы.
Вот содержимое моего заголовочного тега:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
var theDialog = $(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 'auto'
});
$('#one').click(function(){
theDialog.html('some random text').dialog('open');
});
$('#two').click(function(){
theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
});
$('#three').click(function(){
//this is only call where off-centre is noticeable so use setTimeout
theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
setTimeout(function(){ theDialog.dialog('open') }, 100);;
});
});
</script>
Я загрузил js и css для пользовательского интерфейса Jquery с http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip . и тело:
<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>
Думаю, установка float: left для диалога будет работать. Предположительно, диалог абсолютно позиционируется плагином, и в этом случае его положение будет определяться этим, но побочный эффект float - создание элементов только такой ширины, какой они должны быть для хранения контента - все равно будет действовать.
Это должно сработать, если вы просто поместите правило вроде
.myDialog {float:left}
в свою таблицу стилей, хотя вам может потребоваться установить его с помощью jQuery
У меня была такая же проблема, когда я обновил пользовательский интерфейс jquery до 1.8.1 без обновления соответствующей темы. Только нужно обновить тему тоже и "авто" снова работает.