Dla ułatwienia życia niektórym z nas napisałem prosty plugin jQuery, który jest odpowiedzią na pytania jakie dostaje dotyczące mojego artykułu o tym jak zrobić wysuwany LikeBox, social Facebook slider. Plugin został rozbudowany o możliwość zdefiniowania eventu, który uruchomi animację, oraz podania czasu tej animacji.

Musli – plugin jQuery animujący zakładki

Bez dłuższego wstępu, dzisiaj pokaże jak zaimplementować plugin musli (MUltitab social SLIder) na swojej stronie. Slider może być wykorzystany do tworzenia „zakładek” na których można dodać właściwie cokolwiek. Przy pomocy pluginu możemy utworzyć kilka zakładek z widgetami z portali społecznościowych, jak np. SocialBox z Facebooka, Bagne z Google plus, stream ostatnich Tweetów z Twittera, widget z ostatnimi wpisami z naszej-klasy itp… Jest to uaktualniona wersja artykułów, które zostały opublikowane na łamach niniejszego bloga.

Plugin nadaje się zarówno do zastosowania dla pojedynczej zakładki jak i wielu.

Co będzie potrzebne?

Aby plugin mógł działać prawidłowo, trzeba będzie spełnić następujące warunki:

• należy utworzyć poprawną strukturę listy nieuporządkowanej do strony,
• dodać odpowiedni zestaw reguł CSS pozycjonujących zakładki na stronie,
• utworzyć zestaw grafik, które będą imitować zakładki,
• dołączyć bibliotekę jQuery,
• dołączyć plugin Musli,
• dodać snippet uruchamiający plugin.

Struktura kodu HTML

Struktura kodu HTML właściwie nie zmieniła się w stosunku do ostatniego artykułu, w którym pisałem jak stworzyć wiele animowanych zakładek na jednej stronie i wygląda następująco:

<ul id="musli">
    <li>
        <img src="tab-image/facebook.png" alt="Image for Facebook tab" />
        <div class="musli-facebook"> Wygenerowany kod widgetu LikeBox Facebook </div>
    </li>
    <li>
        <img src="tab-image/googleplus.png" alt="Image for Google tab" />
        <div class="musli-google"> Wygenerowany kod widgetu Google+ </div>
    </li>
    <li>
        <img src="tab-image/twitter.png" alt="Image for Twitter tab" />
        <div class="musli-twitter"> Wygenerowany kod widgetu Twittera </div>
    </li>
</ul>

Opcjonalnie można dodać różne klasy CSS, jak to zrobiłem w powyższym przykładzie, jeżeli planujemy np. użycie wielokolorowych grafik zakładek i chcemy aby obramowania wyjeżdżających bloków pasowały do siebie.

Ten kod HTML należy wkleić w sekcji BODY, gdzieś poza poza pozostałym kodem strony (nie należy umieszczać kodu w żadnym innym bloku, czy elemencie), kod najlepiej wkleić tuż przed tagiem zamykającym wspomnianą sekcję.

Styl CSS

W tym przypadku również nie wiele zmian, dodałem prosty reset stylu, dla przypadków w których ktoś nie usuwa punktorów w listach, oraz regułę z-index, aby zakładki były zawsze na wierzchu (jeżeli mimo tego wyświetlają się, chowają się pod innymi blokami na stronie wartość tej reguły należy zwiększyć).

#musli *{
    margin: 0;
    padding: 0;
    outline: 0;
    list-style: none;
}
#musli{
    position:fixed;
    right:0px;
    top:150px;
    z-index:100;
}
#musli li{
    cursor:pointer;
    width:35px;
    height:110px;
    margin-bottom:1px;
    position:relative;
}
#musli > li > div{
    padding:5px;
    background: #fff;
    float:left;
    width:286px;
    height:296px;
    -moz-border-radius: 0 0 0 8px;
    -webkit-border-radius: 0 0 0 8px;
    border-radius: 0 0 0 8px;
    position:absolute;
    top:0;
    left:35px;
    z-index:100;
}
/* tylko jeśli wykorzystujesz klasy CSS, o których wspominałem wyżej */
.musli-google{
    border: solid #cd3c2a 3px;
}
.musli-facebook{
    border: solid #0170cf 3px;
}
.musli-twitter{
    border: solid #07afee 3px;
}

Reguły najlepiej wkleić na końcu pliku CSS.

Grafika zakładek

Można skorzystać z przygotowanych przeze mnie zestawów grafik, albo wykorzystać swoje. Jeżeli chcesz użyć swojej grafiki, pamiętaj o dopasowaniu jej wymiarów do tych wymiarów:

    width:35px;
    height:110px;

Albo ich zmianie w sekcji CSS tutaj #musli li.

Tutaj znajduje się paczka z przygotowanymi przeze mnie skórkami i już gotowymi plikami CSS, dzięki czemu, Twoje zakładki mogą wyglądać tak jak na poprzednim obrazku.

Należy pamiętać o podaniu prawidłowych ścieżek do plików graficznych, i stylu CSS, który różni się minimalnie w tych 4 zestawach. Jeżeli komuś nie przypadły do gustu moje zakładki, to zawsze może utworzyć i wykorzystać inne, których w Internecie można znaleźć multum, albo własne. Grafiki zostały przygotowane tylko dla 4 popularnych widgetów społecznościowych:

• LikeBox Facebook
• Badge Google
• Twitter Widget
• Widget Nasza-Klasa

Dlatego jeżeli ktoś będzie potrzebował innej, pasującej grafiki dla innego portalu, zamieszczam również projekty zakładek wykonanych w GIMP-ie, w zakładkach wykorzystano czcionkę Segoe Print Bold o wielkości 16px.

Dołączenie biblioteki jQuery

Do animowania zakładek potrzebna będzie biblioteka jQuery, którą możemy podłączyć np. w ten sposób:

<script src="http://code.jquery.com/jquery.js"></script>

Powyższy snippet najlepiej jest wkleić gdzieś w sekcji HEAD strony.

Dołączenie pluginu MUSLI

Właściwą animacją zakładek zajmie się plugin Musli, tutaj wystarczy tylko plugin pobrać (link do pluginu), wrzucić na swój serwer i odpowiednio go podlinkować:

<script src="js/musli.js"></script>

Uruchomienie pluginu

Gdy już mamy wszystkie powyższe czynności zrobione, możemy wreszcie uruchomić animacje. Do uruchomienia pluginu z domyślnymi opcjami można użyć tego kodu:

<script type="text/javascript">
$(function(){
  $( "#musli" ).musli();
});
</script>

Plugin zostanie uruchomiony z domyślnymi opcjami, czyli zakładki będą się rozwijać, gdy ktoś najedzie kursorem na jej grafikę, z prędkością animacji 1000 ms.

Możemy także zrobić, aby zakładki były chowane i otwierane po kliknięciu w odpowiednią grafikę, wystarczy uruchomić plugin w ten sposób:

<script type="text/javascript">
$(function(){
  $( "#musli" ).musli({animationAction: "click"});
});
</script>

Możliwe jest także manipulowanie prędkością animacji:

<script type="text/javascript">
$(function(){
  $( "#musli" ).musli({animationAction: "hover", animationSpeed: 1000});
});
</script>

DEMO

Zakładki w akcji można oczywiście zobaczyć na tym blogu i tutaj (link do dema).

Uwagi końcowe

Plugin można użyć w podanej tutaj formie na wszystkich stronach, na których mamy dostęp do plików. Z powodzeniem można użyć pluginu również w różnego rodzaju CMS’ach, forach, blogach i innych portalach.

WordPress korzysta z własnej biblioteki jQuery, od tej wersji plugin jest przystosowany do korzystania z niej, więc nie ma potrzeby dołączania biblioteki drugi raz. Oprócz tego w tym wpisie znaleźć można informacje o pluginie do WordPress z prostym panelem administracyjnym, więcej w kolejnym wpisie.