Latest web development tutorials
×

jQuery UI курс

jQuery UI курс jQuery UI Краткое введение jQuery UI скачать jQuery UI использование jQuery UI Настроить jQuery UI завод

jQuery UI тема

jQuery UI тема jQuery UI ThemeRoller jQuery UI CSS рамка API jQuery UI Дизайн темы

jQuery UI Библиотека компонентов

jQuery UI Библиотека компонентов jQuery UI Расширенный виджет jQuery UI Метод Призвание виджет jQuery UI Зачем использовать библиотеку виджетов jQuery UI Как использовать виджет библиотеки

jQuery UI справочное руководство

jQuery UI API файл API категория - Специально хороший эффект API категория - эффекты ядра API категория - попеременно API категория - перегрузка методов API категория - способ API категория - селектор API категория - тема API категория - UI ядро API категория - утилита API категория - Виджеты

jQuery UI примеров

jQuery UI примеров лобовое сопротивление место пересчет выбрать последовательность Складные панели автозаполнения кнопка Выбор даты диалог меню Шкала прогресса ползунок поворотное устройство таб подсказке окно Специально хороший эффект дисплей скрывать Переключение .addClass() .removeClass() .toggleClass() .switchClass() Цвет Анимация разместить Библиотека компонентов

JQuery UI тема дизайна

Структура файла

Тема является специфическим способом увеличить свою простоту в использовании. Как правило, структура каталогов файлов выглядит следующим образом:

  • themename/ - Ваша тема должна быть полностью содержаться в отдельном разделе имя с именем папки.
  • themename/themename.css - Это основной файл CSS. Вне зависимости от того, какие плагины, файл должен содержать ссылки на каждой из страниц, используя темы. Файл должен быть легким, включает в себя только основные моменты.
  • themename/themename.pluginname.css - каждый виджет , поддержка требует файл CSS. Имя плагина должен быть включен непосредственно в имени файла. Например, если вы тематизации (вкладки) вкладок плагина, есть: themename.tabs.js .
  • themename/img.png - Ваша тема может содержать изображения. Они могут быть названы в соответствии с вашими предпочтениями, не существует какого-либо конкретного именования.

Чтобы узнать , каким образом структура файл темы завершается экземпляры, посетите Jquery UI основную тему .

Пользовательский стиль

Написать стиль тему очень просто, это из-за темы гибкости.

Все темы должны иметь базовый класс CSS. Основной темой класс позволяет пользователю включить инвалидов. Ваш формат класса корень должен быть .ui-themename . И использовать его в HTML-файл следующим образом: 

<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="themename/themename.css" />
    <link rel="stylesheet" href="othertheme/othertheme.css" />
    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
    <div class="ui-othertheme">
        <div class="ui-dialog">This is a modal dialog.</div>
    </div>
</body>
</html>

В приведенном выше примере, некоторые важные вещи, случилось:

  • Мы также загружать две темы к документу.
  • Все машины все содержимое страницы, осуществляется в соответствии с темой THEMENAME стилей.
  • Тем не менее, с Ui-othertheme класса <div> и каждого элемента (включая модальных диалоговых окон) осуществляется в соответствии с темой othertheme стилей.

Если мы открываем themename.css файл для просмотра, мы можем увидеть следующий код: 

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

Обратите внимание, что themename.css файл содержит только универсальную глобальную информацию о стиле, информацию о стиле для конкретного виджета не должен здесь быть определен. Здесь стиль все темы применимы. Не беспокойтесь о теме будет занимать несколько файлов - это будет упрощен в процессе создания и загрузки.