JQuery UI и width:auto в IE6 - фикс бага

О самом фреймворке JQuery и на основе его пользовательского интерфейса, написанно много. О преимуществах JQuery UI (user interface) можно говорить постоянно, скажу от себя - это очень гибкий и сильный инструмент для построения пользовательских интерфейсов, который не требует сильных навыков и опыта, а лишь только понимания того, как это функционирует.

Ну а если по теме, то в JQuery UI есть такая "штука" - диалоговые окна, конечно это не те самые окна, которые строит операционная система и её пользовательский интерфейс, это имитация окон на основе HTML-вёрстки и её грамотной обвёртки на базе JQuery. Углубляться в особенности диалоговых окон в JQuery UI, это не тема данной статьи.

Так уж сложилась судьба браузера IE6 (Internet Explore версии 6), что не смотря на свою "древность" и "дырявость", им до сих пор пользуются, и он является основным браузером в компаниях, где на компьютерах до сих пор ставят Windows XP. Ну и как предполагает "классический жанр" админского сознания, которое не позволяет им менять своим коллегам старенький IE6 на что нибудь новое и совершенное, в конечном итоге приходится страдать тем, кто идёт в ногу со временем и не отстаёт от современных технологий и инноваций, дабы дать своим конечным потребителям конкурентный на рынке продукт. В данном случае, страдают верстальщики, т.к. приходится стараться максимально соблюдать кроссбраузерность HTML-верстки и JS (Java Script) в своей работе.

Для понимания сути проблемы IE6 и представленного здесь багфикса, вот пример кода:

...
<link rel="stylesheet" type="text/css" media="all" href="/jquery-ui-1.8.16.custom.css" />
<script language="javascript" type="text/javascript" src="/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/jquery-ui-1.8.16.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="/fixWidthAuto.js"></script>

<div id="idDialog">
	
Содержимое окна.
	
<nobr>А это самое длинное содержимое окна, которое в виду своейос обенности не переносится по строкам.</nobr>
</div>

<script>
	$(function () {
		$('#idDialog').dialog({
			'title': 'Диалоговое окно',
			'position': 'center',
			'modal': true,
			'width': 'auto',
			'buttons':{
				'Ок': function ( ) {
					$("#idDialog").remove(); // Закрываем и уничтожаем окно
				}
			}
		});
	});
</script>
...

А теперь разложим всё по полочкам.

Внешние файлы:

• jquery-ui-1.8.16.custom.css - CSS стили для компонентов JQuery UI;
• jquery.min.js - JS фреймворк JQuery;
• jquery-ui-1.8.16.custom.min.js - компоненты JQuery UI, которые основаны на фреймворке JQuery;
• fixWidthAuto.js - собственно "фишка" или точнее багфикс о котором чуть ниже.

Диалоговое окно представлено в виде слоя DIV и его содержимым:

...
<div id="idDialog">
	
Содержимое окна.
	
<nobr>А это самое длинное содержимое окна, которое в виду своейос обенности не переносится по строкам.</nobr>
</div>
...

Слой DIV обязательно должен содержать атрибут "id", для уникальной идентификации данного тега.

Само окно диалоговое инициализируется следующим образом:

...
<script>
	$(function () {
		$('#idDialog').dialog({
			'title': 'Диалоговое окно',
			'position': 'center',
			'modal': true,
			'width': 'auto',
			'buttons':{
				'Ок': function ( ) {
					$("#idDialog").remove(); // Закрываем и уничтожаем окно
				}
			}
		});
	});
</script>
...

Я бы настоятельно рекомендовал бы вам обратить внимание на следующие момент:

...
<script>
	$(function () {
		...
	});
</script>
...

Приведённый выше контейнер, а точнее callback-функция, сработает только тогда, когда загрузится в браузер внешний файл jquery.min.js и произойдет инициализация фреймворка JQuery. Другими словами, любое содержимое данной функции не будет обработано, пока в окружении страницы нету инициализированного фреймворка JQuery.

Ну а теперь создание и отображение диалогового окна:

...
$('#idDialog').dialog({
	'title': 'Диалоговое окно',
	'position': 'center',
	'modal': true,
	'width': 'auto',
	'buttons':{
		'Ок': function () {
			$("#idDialog").remove(); // Закрываем и уничтожаем окно
		}
	}
});
...

Всё очень просто!

Пример того как это работает, можно посмотреть тут

Разберем по подробнее параметры диалогового окна:

• title - ясно из контекста, это заголовок диалогового окна;
• position - это позиция выравнивания диалогового окна на странице, в данном случае, окно будет отображаться по центру видимой части страницы;
• modal - логическое значение, флаг, указывающий модальность диалогового окна. В нашем случае, диалоговое окно - модальное;
• width - а вот и "корень зла", об этом чуть ниже;
• buttons - кнопки в нижней части диалогового окна.

"Корень зла" заключается в следующем, что параметр "width" у нас имеет значение "auto", а это равнозначно тому, что мы нашему слою укажем стиль:

...
<div id="idDialog" style="width:auto;">
	...
</div>
...

И вот тут начинаются проблемы. Дело в том, что параметр стиля "width" со значением "auto", устанавливает ширину тега, исходя из его содержимого:

...
<div id="idDialog" style="width:auto;">
	
Содержимое окна.
	
<nobr>А это самое длинное содержимое окна, которое в виду своейос обенности не переносится по строкам.</nobr>
</div>
...

В итоге, браузер IE6 не поддерживает значение "auto" параметра "width" и у нас получается следующая картина.
В FF6 (Mozilla Firefox версии 6) диалоговое окно выглядит следующим образом:

Для этого мной и придуман багфикс данного обстоятельства. Если кратко о его действии, то он попросту внедряется в инициализирующую функцию окна, что на уровне JQuery UI и замеряет ширину содержимого диалогового окна, а значение ширины содержимого, подставляет в качестве значения ширины диалогового окна. Пример того как это работает:

Вот и всё!

Весь код и примеры можно скачать тут.