Latest web development tutorials

jQuery UI tematu

Wszystko jQuery UI plug-in pozwala programistom na łatwą integrację widżety UI do wyglądu swoich stron lub aplikacji. Każdy widżet jest określony przez style CSS i zawiera dwa style informacje: standardowe ramowych jQuery UI CSS style i plug-in specyficzny styl.

jQuery UI CSS ramy zapewnia semantycznej reprezentacji klasy wskazania roli małych elementów składowych, takich jak tytuł, treść, lub obszar klikalny. Są spójne we wszystkich małych części, a zakładka klikalny (karta), akordeon (akordeon) lub przycisk (przycisk) mają taki sam ui-state-default , klasy, aby pokazać, że są klikalne a. Kiedy użytkownik najedzie na szczycie tych elementów, klasa staje ui-state-hover , to te elementy stają się wybrany w ui-state-active . Klasę konsystencji sprawia, że ​​wygląd stałej wydajności wszystkich elementów lub elementów, które mają podobną rolę w stan.

style CSS ramka jest zawarta w oddzielnym pliku, o nazwie ui.theme.css . Ten plik udostępniony przez ThemeRoller aplikacji zmodyfikować. styl ramki zawiera wpływ tylko na wygląd i charakter nieruchomości, tak długo, jak kolory, obrazy tła, ikon i tak dalej. To są "bezpieczne" styl, to nie będzie miało wpływu na funkcję plug-in. Ten podział oznacza, że programiści mogą wykorzystać w theme.css modyfikować pliki kolorów i obrazu, aby utworzyć niestandardowy wygląd. Ponieważ przyszłość wtyczek lub poprawek będzie dostępny, a te mogą być używane bez modyfikacji przez tematu.

Ponieważ pokrywa styl ramki tylko wyglądać i czuć, więc musi on zawierać konkretne plug-in arkuszy stylów, te arkusze stylów obejmują wszystkie dodatkowe widgety umożliwiają funkcjonalne zasady struktura styl, takie jak wielkość, dopełnienia, marginesów, pozycjonowanie, pływak. Każdy stylów widget themes/base folder i z "jquery.ui.accordion.css" plug-in nazwy, jak np. Wzorce te muszą być starannie edytowane skrypty, ponieważ zapewniają ramy obejmujące style razem.

Zachęcamy wszystkich deweloperów do tworzenia wtyczek jQuery, jQuery UI CSS ramy ułatwia użytkownikom końcowym używać własnych motywów i wtyczek.

Skórki

Oto trzy z widgetem jQuery UI związanych z ogólną procedurą:

  • Pobierz tematów ThemeRoller: najpierw utworzyć motyw jest użycie ThemeRoller wygenerować i pobrać motyw. Ta aplikacja utworzy nowy ui.theme.css plik i zawiera wszystkie niezbędne obrazy tła i ikony ikonki images folderu. Metoda ta jest pierwszym na stworzenie i utrzymanie motywu drogi, ale opcje zapewnia ograniczoną ThemeRoller zwyczaj.
  • Zmodyfikować plik CSS: W celu dalszej wygląd i kontroli, można wybrać jeden z domyślnego motywu (Gładkość) rozpoczyna lub z jednego tematu generowanego przez ThemeRoller Start, a następnie dostosować ui.theme.css plik, oddzielną wtyczkę lub którykolwiek arkusz stylów. Na przykład, można łatwo dostosować kąt promienia wszystkich przycisków różni się od wartości innych elementów interfejsu użytkownika lub użyj niestandardową ikonę, aby zmienić kreatora ścieżki. Style zakresu, w trochę, można nawet używać więcej niż jednego tematu w interfejsie użytkownika. Dla łatwiejszego utrzymania, proponowana zmiana ma tylko ui.theme.css plików i obrazów.
  • Ponownie napisać niestandardowy CSS: Aby zmaksymalizować kontrolować wygląd, można ponownie zacząć pisanie na każdym widget i CSS, bez użycia klas ramowych wtykowych lub konkretnego arkusza stylów. Jeśli chcesz wyglądać i czuć się może być osiągnięte poprzez zmianę CSS lub przy użyciu wysoce niestandardowe znaczniki, a następnie można użyć tej metody. Takie podejście wymaga głębokiej wiedzy w zakresie CSS i wymaga ręcznej aktualizacji dla przyszłej wtyczek.

Użyj ThemeRoller, jQuery UI ramy CSS, a także projektowanie motyw niestandardowy