KOD ZAKŁADKI 1
KOD ZAKŁADKI 2
KOD ZAKŁADKI 3
KOD ZAKŁADKI 4
Przykład użycia pluginu musli do animowania wielu zakładek o różnych wymiarach.
W pierwszym kroku budujemy HTML-ową listę, która później zamieni się w nasz slider. W tej realizacji slider będzie po lewej stronie, a każda zakładka będzie miała inne wymiary.
<ul id="musli" class="musli musli-left"> <li> <img src="fb.png" /> <div class="musli-facebook">KOD ZAKŁADKI 1</div> </li> <li> <img src="gp.png" /> <div class="musli-google">KOD ZAKŁADKI 2</div> </li> <li> <img src="facebook.png" /> <div class="musli-facebook">KOD ZAKŁADKI 3</div> </li> <li> <img src="gp.png" /> <div class="musli-google">KOD ZAKŁADKI 4</div> </li> </ul>
4 zakładki = 4 elementy listy.
Slider ma znaleźć się po lewej stronie dlatego obok klasy musli, dodano dodatkową klasę - musli-left.
Identyfikator jest potrzebny tylko do uruchomienia slidera w jQuery, spokojnie można skorzystać z nadanych klas, o ile są one unikalne na stronie - w przeciwnym wypadku mogą dziać się dziwne rzeczy. Dla uproszczenia lepiej użyć nowego identyfikatora.
Nadane klasy do bloków div mają za zadanie tylko dodać odpowiedni kolor obramowania, w domyślnym kodzie CSS mamy 4 klasy z kolorami - czerownym (musli-google), niebieskim (musli-facebook), zielonym (musli-nk), oraz błękitnym (musli-twitter). Kolor można łatwo zmienić albo modyfikując wartość koloru w istniejącej klasie, albo utworzyć własną klasę, z nowym kolorem.
/* reset */
.musli, .musli *{
padding:0;
margin:0;
list-style:none;
}
.musli{
position:fixed;
right:0px;
top:150px;
z-index:100;
list-style:none;
}
.musli-bottom{
left:300px;
bottom:0px;
right:auto;
top:auto;
}
.musli-top{
left:300px;
top:0px;
right:auto;
bottom:auto;
}
.musli-left{
left:0px;
top:200px;
right:auto;
bottom:auto;
}
.musli > li{
cursor:pointer;
width:35px;
height:35px;
margin-bottom:1px;
position:relative;
}
.musli-bottom > li, .musli-top > li{
margin-right: 1px;
margin-bottom: 0;
float:left;
}
.musli > li > img{
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
.musli-bottom > li > img{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.musli-top > li > img{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.musli-left > li > img{
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
.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;
}
.musli-bottom > li > div{
top:35px;
left:auto;
-moz-border-radius: 0 8px 0 0;
-webkit-border-radius: 0 8px 0 0;
border-radius: 0 8px 0 0;
}
.musli-top > li > div{
bottom:35px;
left:auto;
top:auto;
-moz-border-radius: 0 0 8px 0;
-webkit-border-radius: 0 0 8px 0;
border-radius: 0 0 8px 0;
}
.musli-left > li > div{
top:0px;
left:auto;
right:35px;
-moz-border-radius: 0 0 8px 0;
-webkit-border-radius: 0 0 8px 0;
border-radius: 0 0 8px 0;
}
.musli-google{
border: solid #cd3c2a 3px;
}
.musli-facebook{
border: solid #0170cf 3px;
}
.musli-twitter{
border: solid #07afee 3px;
}
.musli-nk{
border: solid #8fc44c 3px;
}
Skopiować całość i wkleić albo do nowego pliku CSS, albo do już istniejącego. Należy upewnić się że kod CSS został dodany prawidłowo i działa - na tym etapie slider powinien znaleźć się już we właściwym miejscu, i "dobrze" wyglądać.
Najpierw należy podpiąć bibliotekę jQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Poprawność tego kroku możemy sprawdzić na przykład poprzez wykonanie prostego skryptu:
<script type="text/javascript">
$(function(){
alert('jQuery działa!');
});
</script>
Zapisujemy zmiany w pliku i odświeżamy nasze demo. Jeżeli wyskoczy komunikat 'jQuery działa!', to możemy przejść dalej.
Teraz należy podpiąć do strony plugin jQuery Musli, plugin można pobrać stąd (musli.js).
<script src="musli.js"></script>
Jeżeli wszystko do tej pory zrobiliśmy prawidłowo, to teraz można skasować testowy skrypt i zastąpić go właściwym:
<script type="text/javascript">
$(function(){
$('#musli').musli({ musliPosition: "left" });
});
</script>
Całość zapisujemy, i teraz możemy sprawdzić czy slider działa prawidłowo i animuje zakładki.
#musli - taki identyfikator nadaliśmy przy tworzeniu kodu HTML.
parametr musliPosition: "left" oznacza, że zakłaki znajdują się po lewej stronie. Bardzo ważne.
Na tym etapie wszystko powinno już działać i wyglądać. W tym kroku ustawimy wymiary zakładek, zmienimy odległość pomiędzy zakładkami, odległość całego slidera od krawędzi okna przeglądarki itp.
Pierwszy problem, z którym bardzo szybko możemy się spotkać, to nachodzące na siebie ikony, albo ikony chowające się pod zakładki. Jeżeli dochoodzi do tego pozycja na dole, albo po prawej, to może to wyglądać na zbyt duży odstęp pomiędzy sliderem a krawędzią okna. Problem - wymiary grafik nie pasują do slidera. W Musli rozmiar i kształt ikon może być właściwie dowolny, ale trzeba nieco dostosowac kod CSS.
Jeżeli Twoje ikony mają inne wymiary niż domyślne 35px x 35px, to:
Modyfikujemy plik CSS w tych linijkach:
.musli > li{
width:35px; /*szerokość ikony*/
height:35px; /*wysokość ikony*/
}
W zależności od tego w jakiej pozycji mamy slider (left, right, top, bottom) modyfikujemy także:
/* dla slidera po lewej */
.musli-left > li > div{
right:35px; /* = szerokości ikony */
}
/* dla slidera po prawej */
.musli > li > div{
left:35px; /* = szerokości ikony */
}
/* dla slidera na górze */
.musli-top > li > div{
bottom:35px; /* = wysokość ikony */
}
/* dla slidera na dole */
.musli-bottom > li > div{
top:35px; /* = wysokość ikony */
}
Aby zmienić rozmiar wszystkich zakładek modyfikujemy plik CSS w tych linijkach:
.musli > li > div{
width:286px; /* szerokość zakładek */
height:296px; /* wysokość zakładek */
}
Jedną z tych fajnych rzeczy w musli jest to, że zakładki mogą być różnej wielkości i szerokości. Plugin automatycznie oblicza o ile powinien animować zakładkę, uwzględniając marginesy i paddingi, aby wyjechała cała. Dlatego od strony jQuery nie trzeba się niczym martwić.
Jedyną rzeczą którą musimy zrobić, aby zmienić rozmiary zakładek będzie nadpisanie domyślnych wartości:
Najprościej - można wykorzystać klasy przypisane do bloków div (musli-facebook, musli-google, musli-nk, musli-twitter), ale tylko jeśli są one unikalne - dla każdej zakładki mamy inną klasę. Jeżeli wykorzystamy np jedną klasę dla kilku zakładek, to w efekcie te dwie zakładki będą miały tę samą szerokość/wysokość.
Modyfikujemy plik CSS. Przyjmijmy, że dla pierwszej zakładki chcemy mieć niestandardowe wymiary np. 300px wysokości i 200px szerokości:
.musli-facebook{
width:200px!important;
height:300px!important;
}
W efekcie, wszystkie zakładki z klasą musli-facebook, w tym przypadku dwie, będą miały nowe wymiary.
Wysokość i szerokość zakładek możemy też zmianić np. korzystając z selektora CSS nth-child:
.musli > li:nth-child(1) > div{
width:200px!important;
height:400px!important;
}
.musli > li:nth-child(2) > div{
width:100px!important;
height:400px!important;
}
Po dodaniu powyższego kodu CSS, pierwsza zakładka (nth-child(1)) będzie miała wymiary 200x400, druga (nth-child(2)) 100x400, trzecia 200x300 (poprzedni przykład), a ostatnia wymiary domyślne.
Przykład z nth-child powinien działać we wszystkich współczesnych przeglądarkach poza IE 8 i wcześniejszymi.
Trzeci sposób to dodawanie styli inline, czyli w kodzie HTML. Przykładowa modyfikacja wymiarów dla czwartej zakładki:
/* stary kod */ <li> <img src="gp.png" /> <div class="musli-google">KOD ZAKŁADKI 4</div> </li> /* zmieniamy na */ <li> <img src="gp.png" /> <div class="musli-google" style="height:200px!important; width:150px!important;">KOD ZAKŁADKI 4</div> </li>
Oprócz tego można jeszcze nadać własne identyfikatory do zakładek, albo od razu do bloków, sposobów jest kilka, chodzi tylko o to aby nadpisać domyślne wartości dla diva znajdującego się wewnątrz elementu listy. Nie jest tutaj ważny sposób tylko efekt. :)