odpicuj mi forum tutorial cz3

Wreszcie nadszedł ten moment. Na naszym forum możemy bez ograniczeń dodawać gotowce jQuery. Jak to jednak zrobić?

Zasadniczo mamy dwa wyjścia. Tak naprawdę zalecam korzystanie z pierwszego z nich, jednakże zdaję sobie sprawę, że nie zawsze jest to możliwe. Dlatego dla kompletności poradnika pokazuję też drugi sposób, który w sytuacjach awaryjnych możemy zastosować.

  1. Wykorzystujemy strony hostujące gotowce. W Internecie jest dużo stron, które jedyne czym się zajmują to po prostu przechowywaniem różnych bibliotek jQuery i udostępnianiem ich dla świata. Oczywistą zaletą tego rozwiązania jest oszczędność. Nie tylko oszczędzamy miejsce na naszym serwerze i utrzymujemy na nim porządek (bo nie zapychamy go gotowcami, tylko dołączamy już wystawione przez kogoś innego), ale również oszczędzamy czas. Łatwiej bowiem jest dołączyć link do gotowca, zamiast go pobierać, wgrywać przez FTP w odpowiednie miejsce i później go dopinać przez jakieś ścieżki względne które muszą się zgadzać. Tak naprawdę wykorzystaliśmy już ten sposób, gdy dodawaliśmy w poprzedniej części jQuery. Wtedy też po prostu dorzuciliśmy je przez znacznik <script>, zamiast fizycznie pobierać plik.
  2. Robimy wszystko sami. A więc musimy pościągać wszystkie pliki biblioteki z Internetu, później wgrać to wszystko w odpowiednie miejsca przez FTP na nasz serwer i później dopiero gdzieś tam w innych plikach możemy skorzystać z tak wgranego gotowca. Najważniejsze wady tego podejścia wymieniłem w poprzednim poście, ale czy ten sposób ma jakieś zalety? Dwie podstawowe: gotowce są fizycznie u nas i jeśli ich sami nie usuniemy to zawsze tam będą (ale stronki udostępniające gotowce są tak popularne, że pewnie dalece przeżyją żywotność naszego PBF-a, więc ta zaleta jest marginalna) oraz zawsze możemy ściągnąć pliki źródłowe danego gotowca (tego, który oczywiście na to za darmo pozwala) w przeciwieństwie do sposobu przez strony hostujące, które przecież mogą akurat danego gotowca u siebie wystawionego nie posiadać i zwyczajnie ta opcja jest naszą jedyną.


A więc jak wspominałem staramy się korzystać z pierwszego sposobu, gdy tylko możemy (a więc uda nam się znaleźć stronkę, która wystawia naszego gotowca na świat). Takich stron jest oczywiście bardzo wiele, krótkie googlanie haseł typu "cdn jquery plugins" wyświetli Wam odpowiednie rezultaty. Ja osobiście korzystam z https://cdnjs.com/ i tego w tym poradniku się będę trzymał, ale nie mówię, że jest to jedyna słuszna strona hostująca pluginy jQuery. Co do tego, jak znaleźć same gotowce znowu odsyłam do google. Wpisujemy "jquery library", "jquery plugin", "jQuery calendar", "best jquery plugins ever!!!" i tym podobne hasła i możemy przeglądać i przeglądać, aż nie natrafimy na coś co nam się spodoba.

Dobra, wiemy już że istnieją strony, które wystawiają nasze ukochane biblioteki jQuery na świat i możemy w ten sposób z nich korzystać. Ale jak dokładnie? Pokażę to na przykładzie naszego gotowca slick-carousel: http://kenwheeler.github.io/slick/

A więc wyszukujemy sobie na https://cdnjs.com/ "slick-carousel" i naszym oczom ukazuje się coś takiego:

Obrazek

Sukces! Nasza biblioteka, którą chcemy dodać jest udostępniania, a tym samym nie musimy jej ręcznie sami ściągać etc. Po wybraniu go z listy wyświetla nam się coś takiego:

Obrazek

Mamy tam krótki opis, autora, link do githuba (najczęściej, w skrócie jest to miejsce, gdzie programiści przechowują i rozwijają swój kod oraz często znajduje się tam dobra dokumentacja jak z niego korzystać) i cała masa linków. Czasem jest ich tak dużo, że można się porządnie wystraszyć. Przyjrzyjmy im się bliżej:

Obrazek

Kolorowymi ramkami zaznaczyłem 3 linki, które w tym konkretnym przypadku nas interesują, ale jest to dość analogiczne dla większości gotowców.

  • Niebieska — jest to plik z rozszerzeniem .js oznaczającym, że jest to plik javascript (jQuery, to jak może pamiętacie też javascript i rozszerzenie .js ma tu zastosowanie). W skrócie jest to cała logika naszego gotowca, obsługa wszystkich zdarzeń, np. że coś się ma dziać po kliknięciu, automatycznie, etc. etc. Jest to najważniejszy plik i zawsze będzie jeśli szukamy gotowców jQuery.
  • Zielona — jest to plik z rozszerzeniem .css oznaczającym, że jest to plik kaskadowych arkuszy stylu. W skrócie jest to cały wygląd naszego gotowca, np. kolorki, ramki, obrazki etc. etc. Jest to drugi najważniejszy plik, który z reguły będzie przy naszych gotowcach jQuery (chyba, że nie polegają one na wyglądzie, lecz na jakiejś innej funkcjonalności, wtedy plik .css może być zbędny).
  • CzerwonaOPCJONALNA. W tym konkretnym przypadku, tego konkretnego gotowca autor dorzucił "theme" czyli taki motyw przewodni gotowca, czyli taki przykładowy wygląd. Jeśli więc chcemy skorzystać z domyślnego wyglądu danego gotowca, a taki plik jest nam udostępniany (z reguły go nie ma), to możemy go również wziąć.


UWAGA! Wszystkie wymienione i zaznaczone pliki mają dodatkowo rozszerzenie .min przed rozszerzeniem właściwym. Nie jest to oczywiście obowiązkowe, ale dobrą praktyką jest brać właśnie je zamiast zwykłych (jak widać są też linki do plików bez .min). To dodatkowe rozszerzenie oznacza ni mniej, ni więcej, a tyle, że jest to wersja zminimalizowana pliku, czyli bez znaków nowej linii, niepotrzebnych wcięć, spacji etc. Sprawia to, że plik w konsekwencji mniej waży, a więc strona szybciej się ładuje. Minusem jest absolutne zabicie przejrzystości zawartości, ale z reguły i tak nie chcemy zmieniać kodu gotowca, ani w niego zaglądać, więc nie jest to problemem.

Reasumując w tym przypadku istotne są dla nas te 3 linki:

  • https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css (opcjonalnie)


No dobrze, teraz możemy wreszcie wgrać gotowca do nas. Oczywiście umieszczamy go tam, gdzie chcemy (mamy przecież dostęp do FTP, możemy edytować dowolny plik, a w konsekwencji podgrywać gotowce gdzie dusza zapragnie). Ja w ramach tego przykładu będę się trzymał już poruszanego wcześniej overall_header.html.

A więc w nim, gdzieś między znacznikami <head></head> ale KONIECZNIE POD wstawionym wcześniej linkiem od jQuery wklejamy następujące linie:

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>

Zwracam tylko uwagę że plik o rozszerzeniu .js to skrypt i jest w znaczniku <script> a reszta to .css czyli styl i w znaczniku <link>. Jak widać w przypadku <script> w atrybucie src wklejamy nasz link bezpośrednio i już. W przypadku <link> musimy ustawić zarówno relację czyli stylesheet jak i typ stylu text/css a w href podajemy nasz link. Jest to standardowa procedura i dla każdego pliku o danym rozszerzeniu wyglądać to będzie identycznie za każdym razem.

Mój zmieniony plik wygląda więc teraz tak:

Obrazek

Jeszcze raz zwracam uwagę, że jest to poniżej linii dołączającej jQuery. Jest to absolutnie niezbędne, gdyż aby gotowce jQuery działały, muszą mieć dostęp do jQuery, a więc musi być przed nimi zdefiniowane. Pamiętajcie, żeby też wgrać wszelkie zmieniane pliki przez FTP na serwer, żeby wprowadzić zmiany w życie.

No i to tyle w kwestii dołączania bibliotek jQuery do naszego forum. W analogiczny sposób możemy dodać dowolną publicznie dostępną i darmową bibliotekę do naszego PBF-a i cieszyć się możliwościami jakie oferuje. Pozostaje już tylko ostatnia kwestia, czyli jak danego dołączonego gotowca wykorzystać? I odpowiedź brzmi: to zależy. Zależy od samego gotowca, od tego co chcemy uzyskać etc. Zaprezentuję to w kolejnej i zarazem ostatniej części poradnika na naszym przykładzie slick-carousel, włącznie z drobnymi modyfikacjami samego gotowca.

Luxter

Additional Info

  • Data publikacji: Środa, 10 Sierpień 2016

Komentarze

  • Brak komentarzy
Dodaj komentarz