W odpowiedzi na kilka ostatnich powtarzających się maili z pytaniami dotyczącymi MUSLI i nie tylko postanowiłem dodać ten krótki wpis z mam nadzieję wyczerpującymi odpowiedziami. Nie będzie może żadnych rewelacji, ale większość tutaj wpisów powstaje tylko po ty by pamiętać, że tak można. 🙂 Do rzeczy…

Jedno z pytań dotyczyło tego, czy da się i jak połączyć inny plugin z efektownymi animacjami z MUSLI. Otóż da się i nawet można to zrobić na kilka sposobów, ale o tym za chwilę…

Inne pytanie, „czy w sliderze zakładek, jak MUSLI, do zakładki można dodać inne niż Facebook LikeBox treści?” -Zdecydowanie tak!

W większości poradników preferowany jest kod LikeBoxa w postaci iframe z tego względu że jest on 'najprostszą opcją’ – aby osadzić plugin na stronie wystarczy jeden wygenerowany kod ramki wkleić do kodu HTML, w miejscu w którym chcemy, aby widget się pokazał.

Natomiast przy wykorzystaniu pozostałych, sprawa się trochę komplikuje, bo trzeba dołączyć dodatkowe skrypty i dużo zależy od tego co już masz na stronie.
W każdym razie, wszystkie poradniki się nadają, a wysuwaną ramkę możesz wypełnić czymkolwiek (obrazek, formularz, jakiś tekst, kalendarz itp.). Weźmy za przykład poradnik z mojego bloga. Wszystko należy zrobić tak jak jest opisane w tym artykule do momentu, w którym ramkę trzeba wypełnić, czyli wygenerować kod LikeBoxa. W tym miejscu możesz wkleić każdy inny kod LikeBoxa, pod warunkiem, że zrobisz to w sposób zalecany na stronie deweloperów Facebook-a.

jQuery easing plugin z MUSLI, łatwy sposób

Pierwszy, najprostszy sposób, w którym właściwie wystarczy tylko podpiąć bibliotekę  rozszerzającą sposób animacji, czyli jQuery easing plugin, a następnie tylko zdefiniować domyślną, zastępczą animację. Użycie biblioteki jest banalnie proste, ale zdefiniowanie w ten sposób animacji może wpłynąć na wszystkie inne elementy na stronie, które animujemy z jQuery. Innymi słowy taka definicja dotknie wszystkich elementów na stronie do których animacji używamy jQuery.

No dobra, teraz jak to zrobić?

Najpierw w bardzo prosty sposób podpinamy bibliotekę (wystarczy skopiować linijkę i wkleić do sekcji HEAD dokumentu HTML, najlepiej pod jQuery):

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

Teraz dodajemy snippet, w którym definiujemy domyślny 'efekt przejścia’ (animacji), o tak:

<script type="text/javascript">
$(function(){
  jQuery.easing.def = "string";
});
</script>

W miejsce string 'wrzucamy’ nazwę przejścia, którego chcemy użyć.

Przejścia możemy podejrzeć na stronie domowej pluginu (w lewej kolumnie znajdują się dwie listy wyboru, wybierając efekt przejścia, a następnie klikając niżej link The Clicker możemy zobaczyć jak dany efekt wygląda).

I to wszystko.

jQuery easing plugin z MUSLI, drugi sposób

Od teraz opcjonalnie w pluginie można ustawić, czy chcemy skorzystać z dodatkowych animacji. Jeżeli nie potrzebujemy takiego dodatkowego bajeru i nie chcemy spowalniac naszej strony to wszystko pozostanie bez zmian. W przeciwnym wypadku, jeżeli ktoś chciałby pobawić się w dodatkowe animacje, to wystarczy jak wyżej podpiąć bibliotekę z przejściami, a następnie skorzystać z dodatkowej opcji animationEasing, dzięki której ustawimy niestandardową animację. Przykładowe realizacje.

Inspirując się lekko na 'klikaczu’ ze strony z pluginem przejść napisałem coś podobnego – zabawkę, która z jednej strony pozwala zobaczyć w akcji wszystkie rodzaje animacji, a z drugiej sprawdzić jak powinien wyglądać kod odpalający plugin z wybranymi opcjami. jQuery easing i MUSLI.

Facebook Slider HTML+CSS

Na koniec wariacja MUSLI bez jQuery (trochę mi się nudziło ;)), właściwie w czystym HTML i CSS można osiągnąć podobny efekt do tego z jQuery. Nie jest to żadna nowość i w sieci można znaleźć całe mnóstwo materiałów, podobnych rozwiązań i wiele zastosowań dla takiego slidera. Oczywiście są plusy i minusy takiego rozwiązania, ale wszystko zależy od potrzeb. No i warto wiedzieć, że można coś takiego zrobić.

Do zdecydowanych plusów należy zaliczyć to, że jeżeli nasza strona nie korzysta z jQuery w ogóle, to tak może zostać i nie trzeba dołączać do dokumentu HTML dodatkowych skryptów. A skoro nie ma jQuery, to nie ma również ani definiowania, ani konfigurowania opcji pluginu – jednym słowem pozbywamy się JavaScript-u.

Minusy? Oczywiście chodzi tutaj o kompatybilność z różnymi przeglądarkami na różnych urządzeniach. Chociaż obecnie CSS transitions obsługiwane są przez sporą część przeglądarek i CSS-owe 'przejścia’ nie są już tak straszne jak kiedyś (u mnie np. działa na wszystkich 4 przeglądarkach), to może zdarzyć się tak, że w jakiejś nieaktualizowanej przeglądarce może to nie 'ruszyć’.

Przykład MUSLI bez jQuery.

W tym wszystkim można także pozbyć się obrazków zakładek – np. wypełniając wszystko gradientami CSS, dodać i odwrócić napis, ale w to akurat nie bardzo chciałem się już bawić… 😉