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 и представленного здесь багфикса, вот пример кода:

{codecitation style="brush: html;"} ... ... {/codecitation}

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

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

• 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 и его содержимым:

{codecitation style="brush: html;"} ... ... {/codecitation}

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

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

{codecitation style="brush: html;"} ... ... {/codecitation}

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

{codecitation style="brush: html;"} ... ... {/codecitation}

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

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

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

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

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

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

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

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

{codecitation style="brush: html;"} ... ... {/codecitation}

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

{codecitation style="brush: html;"} ... ... {/codecitation}

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

В IE8 (Internet Explorer версии 8) диалоговое окно выглядит следующим образом:

А в IE6 диалоговое окно выглядит совершенно иначе:

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

Вот и всё!

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