Latest web development tutorials

jQuery UI projektowania tematu

Struktura plików

Temat jest specyficznym sposobem na zwiększenie ich łatwość użycia. Typowo struktura katalogów pliku jest następujący:

  • themename/ - Twój wątek musi być w pełni zawarte w odrębnej nazwy tematu nazwie folderu.
  • themename/themename.css - Jest to podstawowy plik CSS. Niezależnie od tego, jakie wtyczki, plik musi znaleźć się w każdej z tych stron z wykorzystaniem motywów. Plik powinien być lekki, zawiera jedynie główne punkty.
  • themename/themename.pluginname.css - każdy widżet wsparcia wymaga pliku CSS. Nazwa wtyczki powinny być bezpośrednio włączone w nazwie pliku. Na przykład, jeśli kategoryzacji JOT (TAB) plug-in, są: themename.tabs.js .
  • themename/img.png - motywu mogą zawierać obrazy. Mogą być nazywane zgodnie z własnymi preferencjami, nie ma konkretnych konwencji nazewnictwa.

Aby dowiedzieć się, w jaki sposób struktura plików tematem zakończeniu wystąpień, odwiedź jQuery UI podstawowym tematem .

Style niestandardowe

Napisz styl motyw jest bardzo prosta, to z powodu tematu elastyczności.

Wszystkie tematy powinny mieć podstawową klasę CSS. Głównym tematem klasy pozwala użytkownikowi włączyć wyłączone. Twój główny Format klasa powinna być .ui-themename . I używać go w pliku HTML, co następuje: 

<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>

W powyższym przykładzie, kilka ważnych rzeczy wydarzyło:

  • Mamy również załadować dwa tematy do dokumentu.
  • Wszystkie maszyny Cała zawartość strony, odbywa się zgodnie z tematem THEMENAME stylów.
  • Jednak z UI-othertheme klasy <div> i każdego elementu (w tym modalnych okien dialogowych) są przeprowadzane zgodnie z tematem stylów othertheme.

Jeśli otworzymy themename.css plik do oglądania, widzimy następujący kod: 

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; }

Należy pamiętać, themename.css plik zawiera tylko informacje uniwersalny styl globalny, informacje o stylu dla konkretnego widget tu nie ma być zdefiniowany. Tutaj styl wszystkich tematów są stosowane. Nie martw się o temacie zajmie wiele plików - te zostaną uproszczone w procesie tworzenia i pobierania.