jQuery UI i ThemeRoller

• Może 12, 2024

Jeśli chcesz w łatwy i szybki sposób zaprojektować interfejs użytkownika dla strony internetowej lub aplikacji internetowej, a także zawierać jQuery, sprawdź interfejs użytkownika jQuery. Znajdziesz tam kompletny pakiet funkcji CSS i jQuery, który sprawia, że ​​dodanie tych funkcji do nowego projektu jest bardzo proste.

Przejdźmy się po stronie. Pod linkiem Dema i dokumenty znajdziesz listę interaktywnych wtyczek jQuery, takich jak przeciąganie i upuszczanie, tabulatory i przejścia. Dla każdej wtyczki jest demo, dokumentacja i przykładowy kod wycinania i wklejania do testowania.

Jeśli chcesz pobrać pliki „pod klucz”, kliknij łącze Motywy dla jQuery ThemeRoller. Domyślny css to biały i szary motyw z pustymi kośćmi. Możesz kliknąć przycisk pobierania i używać go takim, jaki jest, ale jest też Galeria kolorowych motywów, aby zacząć. W obszarze Galeria znajduje się kilka miniatur motywów. Po prostu kliknij ten, który ci się podoba. Możesz pobrać ten motyw w obecnym stanie, klikając kartę Rzuć własną, a następnie przycisk Pobierz motyw. Ale zabawa zaczyna się, gdy zaczniesz tweetować motyw za pomocą silnika ThemeRoller. Istnieje 11 opcji, które można dostosować. Większość opcji umożliwia zmianę tekstury i koloru tła, koloru obramowania oraz kolorów tekstu i ikon.

Masz kilka opcji tweetowania na temat.

• Ustawienia czcionek: Możesz zmienić rodzinę czcionek, ich wagę i rozmiar.
  
  
• Promień narożnika: Możesz zmienić promień narożnika. Każdy motyw ma domyślny zaokrąglony styl tabulacji, ale tutaj możesz zmienić rozmiar narożnika lub ustawić go na zero dla kwadratowej zakładki. (Karty są zbudowane na CSS3, który obecnie nie jest obsługiwany przez IE.)
  
  
• Nagłówek / pasek narzędzi: Możesz ustawić wartości kolorów dla obszaru za kartami i obszarów nagłówka, takich jak wtyczka kalendarza.
  
  
• Treść: Tutaj możesz ustawić kolory dla głównego obszaru zawartości. Możesz uzyskać zupełnie inny projekt w zależności od wyboru granicy lub bez granicy.
  
  
• Klikalny stan domyślny: Określa domyślny (nieaktywny) wygląd kart i przycisków.
  
  
• Klikalny stan najechania kursorem: Te elementy sterujące służą do wyświetlania kart i przycisków w stanie najechania kursorem.
  
  
• Klikalny stan aktywny: Kontroluje wygląd karty i przycisku dla aktywnej strony.
  
  
• Podświetlenie: kolory tła, obramowania, tekstu i ikon dla podświetlonych obszarów.
  
  
• Błąd: kolory tła, ramki, tekstu i ikon dla komunikatów o błędach.
  
  
• Modalny ekran dla nakładek: Kontroluje kolor i teksturę tła.
  
  
• Cienie: Kontroluje krycie, grubość, przesunięcie i narożniki cienia, aby uzyskać efekt cienia.
  
  

Po pobraniu jquery-ui-x.x.xx.custom.zip i upzipowaniu pakietu zobaczysz trzy foldery (css, pakiet deweloperski i js) oraz plik index.html. Plik index.html to wersja demonstracyjna wtyczek stylizowanych na Twój motyw. Będziesz chciał umieścić foldery css i js w katalogu głównym i skopiować / wkleić kod z pliku index.html do kodu witryny, w miejscu, w którym chcesz wyświetlać wtyczki.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Instrukcje Wideo: Theming Theme Roller Customizations in JQuery UI (Może 2024).