Najlepszy samouczek jQuery UI projektowania tematu W 2024 r. W tym samouczku możesz dowiedzieć się jQuery UI projektowania tematu
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 .
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:
<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.