✅ Wtyczki i biblioteki JQuery do tworzenia stron internetowych

Spisie treści

jQuery Sortable - właściciel drużyny gracza

Wtyczka to narzędzie wielokrotnego użytku napisane w standardowym pliku JavaScript. Pliki te udostępniają przydatne metody jQuery, których można używać w połączeniu z metodami struktury jQuery.

Zobaczmy kilka dostępnych wtyczek i przykłady ich użycia

Wtyczka Pagepilling lub ułożona strona
PagePiling.js to wtyczka jQuery do poruszania się między sekcjami witryny poprzez przewijanie myszą tak, jakby były przesuwane po menu, za pomocą strzałek na klawiaturze lub obracania kółka myszy, wszystkie sekcje znajdują się na tej samej witrynie. Przewijanie odbywa się w pionie, dlatego strona jest ułożona w stos.

Początek
Temary
JQuery

Celem tego samouczka jest przedstawienie wtyczek
z biblioteki JavaScript JQUERY

1 - Wprowadzenie do jQuery
2 - Podstawowe programowanie z jQuery
3 - Zaawansowane efekty z jQuery

Biblioteka JavaScript pozwalająca pisać mniej i robić więcej

Przykład

Konfiguracja odbywa się poprzez wywołanie funkcji pagepiling, gdzie wskazujemy id menu, następnie wskazujemy nazwę każdej sekcji, wskazujemy kolor tła dla każdej sekcji, a następnie w prawej nawigacji wskazujemy nazwę, która się pojawi.

 $ ('# pagina'). pagepiling ({menu: '#menu', kotwice: ['start', 'sekcja', 'sekcjab'], sectionColor: ['# 9aceed', '# 2ebe21', '# 2C3E50 '], nawigacja: {' position ':' right ',' tooltips': ['Home', 'Section A', 'Section B']}

Klasa sekcji jest używana przez Wtyczka JQuery Aby rozpoznać każdą sekcję, klasa wprowadzająca jest tą, którą wskazujemy, aby rozpocząć treść sekcji.

Sortowalna wtyczka do sortowania list
Ta wtyczka jest bardzo przydatna do zmiany kolejności list poprzez przeciąganie myszą i wymianę elementów. Wordpress cms używa tej wtyczki do zmiany kolejności kategorii, postów i stron.

Zróbmy przykład, załóżmy, że mamy listę zawodników startujących i rezerwowych, mamy też listę zawodników rezerwowych. Sporządzimy te trzy listy i za pomocą wtyczki sortowalnej będziemy mogli wymieniać się graczami z listy, po prostu przeciągając ich nazwę myszą na listę, którą chcemy umieścić lub zmienić jej pozycję na tej samej liście.

 jQuery Sortable - Lista graczy 
jQuery Sortable - właściciel drużyny gracza


 Zespół nagłówków Zespół zastępczy Zawodnicy rezerwy 

 
 

Jose
Alberto
Karol
Pozycja 4

 

Javier
ramki
Daniel
Genarò

 

Mario
Fernan
Hiacynt
Manuel
Silvano

Przykład

Jak stworzyć własną wtyczkę jQuery?
Wtyczka jQuery to skrypt lub nowa metoda, którą wykorzystujemy do tworzenia nowej funkcjonalności, rozszerzając lub ułatwiając możliwości, jakie oferuje nam jQuery. Aby stworzyć wtyczkę, musimy zadeklarować funkcję i zaprogramować funkcjonalność w formie ogólnej, dzięki czemu można je ponownie wykorzystać na dowolnej stronie lub witrynie internetowej.

Musimy przeanalizować i wziąć pod uwagę, że włączając naszą wtyczkę do jQuery, nie mamy konfliktu z żadną inną biblioteką lub funkcją, ani nawet z plikami css, które mogłyby zmienić działanie naszej wtyczki. jQuery pozwala nam definiować wtyczki na różne sposoby. Elementami strony internetowej nie można bezpiecznie manipulować, dopóki dokument nie zostanie w pełni załadowany w przeglądarce. jQuery wykrywa ten stan, aby określić, kiedy można uzyskać dostęp do elementów html.

Zdarzenie .ready() zostanie wykonane dopiero po załadowaniu strony i przed wyświetleniem jej w przeglądarce, .ready() ma na celu wykonanie jakiejś funkcji natychmiast po załadowaniu całego dokumentu HTML, zapewniając, że nasz kod zostanie wykonany na elementy, które są wyświetlane.

Format tej funkcji to:

 // Te funkcje będą dostępne po zakończeniu ładowania strony $ (dokument) .ready (function () {function mojafunkcja () {// kod funkcji}});

Jeśli zamiast funkcji zastosuję selektor CSS. Linia ta zostanie wykonana automatycznie po zakończeniu ładowania strony, np. po załadowaniu strony, wszystkie linki wstawiamy na zielono io rozmiarze 14 pikseli.

 $ (dokument) .ready (function () {$ ('a').css ({'color': green, 'font-size': '14px'});});

Następnie stworzymy wtyczkę, która eliminuje wszelkie wiadomości publikowane na liście komentarzy na stronie internetowej.

 
 
 Opinie użytkowników  

 
 Skomentuj Lorem Ipsum 1 - Piątek 01.04.2016 12:35 Lorem Ipsum to po prostu fikcyjny tekst z drukarek i plików tekstowych.
[email protected]  

 
 Skomentuj Lorem Ipsum 2 - Piątek 01.04.2016 12:35 Lorem Ipsum to po prostu fikcyjny tekst z drukarek i plików tekstowych.
[email protected]