Kolorowy suwak/ScrollBar na stronę w jQuery

Dziś chyba jak większość Polaków mam taki przygnębiony nastrój. Mecz Polska-Portugalia oczywiście był piękny dla nas, radość Polaków w drugiej minucie było słychać na całym osiedlu. Piękna gra na całym Euro, możemy być bardzo dumni za to co nam drużyna zaprezentowała, nawet nam się nie śniło, by tak daleko zajść. Brakowało tak niewiele, ale to samo mogą powiedzieć Szwajcarzy, im się wtedy prawie udało, dla nas też było bardzo blisko. Mogę śmiało napisać, że nasi grali lepiej, świetnie walczyli i powinni być z siebie dumni. A smutek to nie z powodu, że zawiedli, bo tak nie było, tylko z tego powodu, że będziemy tęsknić za ich kolejnymi meczami, ale będzie ich jeszcze dużo, pokazali klasę.

Blog webmastera, a ja piszę o piłce nożnej, ale co tam, nie będę przecież zakładać blogu typu „gadki szmatki” by czasem napisać coś nie na temat 🙂

To teraz do rzeczy. Czy zaprojektowaliście kiedyś taką stronę, która miała ciekawą grafikę, z polem na tekst, ale te pole nie bardzo można było rozciągnąć, a tekstu, czy grafiki było dużo? Ja tak miałam wiele razy. Przykładowo ostatnio zrobiłam stronę agroturystyczną:

suwak1

Jest fajne tło desek, a na nich galeria zdjęć. A zdjęć jest dużo, wiec pomyślałam, że zastosuję suwak. Ale by ten suwak nie wyglądał surowo i nie ładnie, to znalazłam ciekawy skrypt jQuery – mCustomScrollbar, który koloruje suwak i tworzy pole do przewijania zawartości strony.


Jak tego dokonać? Przykładowo że macie już zaprojektowaną grafikę tła na której taki suwak będzie, ja wam tylko pokaże gotowy kod, który podstawicie do swojej strony.

Strona składa się z:
– folderu script (pliki: jquery.mCustomScrollbar.concat.min.js, scrollbar.js i jquery.mCustomScrollbar.css)
– index.html
– style.css


W index.html w head, wstawiamy kod suwaka:

<link href="script/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="script/scrollbar.js"></script>

W body, tam gdzie ma być te pole z tekstem i suwakiem, wstawiamy kod:


<div id="scrollbar" class="content">

Tutaj zawartość okienka z suwakiem, by suwak był widoczny, należy dodać więcej treści.
  
</div>


Kod css diva z suwakiem w pliku style.css:

#scrollbar{
	float: left;
	height: 430px;
	overflow: auto; 
}

Należy do diva #scrollbar koniecznie wstawić wysokość: height, ustawić jaka nam potrzebna.


Zawartość pliku scrollbar.js w katalogu script:

(function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);

A zawartość dwóch pozostałych plików jak:
jquery.mCustomScrollbar.concat.min.js
i
jquery.mCustomScrollbar.css

dołączam do pobrania tutaj:
jquery.mCustomScrollbar.concat.min
jquery.mCustomScrollbar


Kolory, rozmiar suwaka można zmienić w pliku styli jquery.mCustomScrollbar.css.
Trochę jest tych opcji tam, należy poszukać, najlepiej użyć do tego narzędzi z mojego poprzedniego wpisu – wtyczki do Firefoxa dla webmastera.

No i gotowe 🙂 Możemy taki suwak zastosować np. do okienka z newsami, wtedy będzie więcej miejsca na stronie. Od teraz możecie tworzyć ciekawą grafikę, nie martwiąc się o miejsce na treść 🙂

Pozdrawiam iiiii Polska do bojuuuu!!!!! 🙂

Podobne wpisy

Subscribe
Powiadom o
guest

3 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Michał
8 lat temu

Grunt to detale. Fajnie, że zwróciłeś uwagę na taki wydawałoby się drobiazg, który jednak źle dobrany potrafi drażnić na stronie, a czasem wręcz odrzucać

kowalski
5 lat temu

GDZIE JAKIEŚ DEMO? To tak jakby „kupować” samochód bez jazdy próbnej.