Рубрика «Разное»

Модальные окна: Simple Modal для jQuery. Часть 2

Добавляем стиль элементов через внешний CSS-файл:

#modalOverlay {
  background-color:#000;
  cursor:wait;
}

#modalContainer {
  height:400px;
  width:600px;
  left:50%;
  top:15%;
  margin-left:-300px; /* half the width, to center */
  background-color:#fff;
  border:3px solid #ccc;
}

#modalContainer a.modalCloseImg {
  background:url(../img/x.png) no-repeat;
  width:25px;
  height:29px;
  display:inline;
  z-index:3200;
  position:absolute;
  top:-14px;
  right:-18px;
  cursor:pointer;
}

Для того, чтобы MS IE 6 стал учитывать альфа-канал PNG для кнопки закрытия окна, необходимо задействовать фильтр AlphaImageLoader:

<!--[if lt IE 7]>
<style type='text/css'>
  #modalContainer a.modalCloseImg{
    background:none;
    right:-14px;
    width:22px;
    height:26px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/x.png', sizingMethod='scale'
      );
  }
  #modalContainer {
    top: expression((document.documentElement.scrollTop
        || document.body.scrollTop) + Math.round(15 *
        (document.documentElement.offsetHeight
        || document.body.clientHeight) / 100) + 'px');
  }
</style>
<![endif]-->

Функции modal() может быть передан объект настроек модального окна:

  • overlay: прозрачность; от 0 до 100; 0 - прозрачный, 100 - непрозрачный; по умолчанию - 50;
  • overlayId: ID overlay div-элемента; по умолчанию - ‘modalOverlay’;
  • overlayCss: CSS-стиль для overlay div-элемента; по умолчанию - {} (пусто);
  • containerId: ID div-элемента окна; по умолчанию ‘modalContainer’;
  • containerCss: CSS-стиль для div-элемента окна; по умолчанию - {} (пусто);
  • close: показывать (true) или нет (false) кнопку закрытия окна; по умолчанию true;
  • closeTitle: значение атрибута title для кнопки закрытия окна; по умолчанию ‘Close’;
  • closeClass: CSS класс, привязанный к событию закрытия окна; по умолчанию ‘modalClose’;
  • onOpen: функция, которая будет вызвана при открытии окна; по умолчанию null;
  • onShow: функция, которая будет вызвана после открытия окна; по умолчанию null;
  • onClose: функция, которая будет вызвана при закрытии окна; по умолчанию null;

Ссылки по теме:

Проверить отображение сайта в разных браузерах

Мы не можем знать, каким браузером пользуется очередной посетитель нашего сайта, а различия в обработке HTML/CSS кода столь велики, чтобы нельзя просто игнорировать их. Практически невозможно помнить обо всех возможных проблемах: детальное тестирование в различных браузерах — это единственный способ обеспечить нормальное функционирование сайта. Если у вас нет нужного браузера, то вы можете найти практически любой на сайте browsers.evolt.org.

В Windows предусмотрена возможность установки только одной версии Internet Explorer, но, чтобы гарантировать правильное отображение сайта в наиболее популярных браузерах, нам нужно как минимум IE6 и IE7. Microsoft предлагает использовать Virtual PC, чтобы запускать браузеры одновременно, но есть и более простое решение: multiple versions of IE от TredoSoft позволяет установить на компьютер несколько версий IE.

Браузеры установленные таким образом работают не очень устойчиво и иногда падают без видимых причин, но, несмотря на это, свои задачи пакет выполняет в полном объеме. Установщик работает в Windows XP, пользователям Windows Vista придется использовать Virtual PC.

Есть ещё один инструмент: IETester — бесплатный браузер, который позволяет тестировать страницы в IE8 beta 2, IE7, IE6 и IE5.5 на Vista и XP.

Для тестирования также можно использовать специальные онлайновые сервисы, показывающие скриншот вашего сайта в разных браузерах.

Плагины для Firefox

Всё больше и больше web-разработчиков отдают предпочтение FireFox в качестве основного браузера. Поскольку я тоже пользуюсь Firefox, расскажу о нескольких удобных расширениях к браузеру.

Web Developer

Плагин Web Developer позволяет выполнять следующие действия:

  • включать и отключать cookies;
  • включать и отключать выполнение скриптов JavaScript;
  • просматривать и редактировать таблицы стилей CSS и исходный код страницы;
  • отображать подробную информацию об элементах страницы: формах, рисунках, таблицах, гиперссылках, заголовках и т. д.;
  • выделять элементы страницы заданного типа: формы, ячейки таблиц, рисунки и т. д.;
  • отображать подробную информацию о выбранном элементе страницы;
  • просматривать дизайн сайта в различных разрешениях экрана;
  • проверить код HTML и CSS на соответствие стандартам W3C;
  • получить информацию о размере страницы и отдельных типов ее содержимого, а также информацию о времени загрузки страницы с учетом типа используемого соединения;
  • и многое другое.

DOM Inspector

В третьей версии Firefox инспектор DOM был удалён из сборки, но может быть установлен как дополнение.

Инспектор DOM позволяет просмотреть структуру документа в виде дерева с подробной информацией по каждому элементу.

Чтобы получить информацию об элементе страницы, нажмите кнопку со стрелкой-указателем на панели инструментов инспектора DOM, затем щелкните по этому элементу на странице. В правой части окна появится описание элемента, а сам элемент будет выделен в структуре дерева.

Firebug

Прекрасной альтернативой (или дополнением) к плагину Web Developer служит расширение Firebug. Плагин обладает примерно теми же возможностями, что и Web Developer, но есть и приятные мелочи, например отладчик скриптов JavaScript.

Откроем рабочее окно расширения Firebug (пункт меню “Инструменты – Firebug – Open Firebug”). В левой части окна плагина расположен набор вкладок, реализующих его основные возможности:

  • консоль JavaScript (Console);
  • редактор исходного кода (HTML);
  • редактор таблицы стилей CSS;
  • отладчик скриптов JavaScript (Script);
  • инспектор DOM;
  • вкладка со статистикой загрузки отдельных элементов страницы (Net).

PageDiff

Плагин Page Diff позволяет сравнить код двух веб-страниц, например локальной копии страницы и ее серверной копии. После установки плагина в контекстном меню браузера появятся пункты Start DIFF и Show DIFF. Чтобы сравнить код двух веб-страниц, нужно выбрать пункт Start DIFF на одной из них и Show DIFF - на другой. После этого откроется окошко с результатами сравнения.

Консоль ошибок

Еще один инструмент для веб-разработки уже есть в базовой конфигурации браузера - консоль ошибок JavaScript.

В окне консоли ошибок отображаются предупреждения JavaScript, а также ошибки и предупреждения CSS с указанием номеров строк кода. Эта информация незаменима при отладке скриптов JavaScript, а также дает некоторое представление о соответствии кода стандартам W3C.