Лучшее руководство по JQuery UI тема дизайна в 2024 году. В этом руководстве вы можете изучить JQuery UI тема дизайна
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 файл содержит только универсальную глобальную информацию о стиле, информацию о стиле для конкретного виджета не должен здесь быть определен. Здесь стиль все темы применимы. Не беспокойтесь о теме будет занимать несколько файлов - это будет упрощен в процессе создания и загрузки.
