Wyrażając

Z różnych karuzel tam, wiele do Mootools jak dobrze, nadal postanowił napisać własną klasę Carousel, na kilka dobrych powodów
1. Poszukujemy funkcję stronicowania (aby móc skakać konkretnego pokazu / krok w karuzeli).
2. Zainteresowanie wolność z umieszczania na lewy i prawy przycisk / linki, gdzie nigdy mi się podoba.
3. Większa kontrola nad Schodami slajdów.

I udało się stworzyć nową karuzeli z powyższych cech ... jak poniżej ... Zapraszam do sugerują żadnych zmian należy wymagać!

Mój przykład wygląda tak ... [ Demo Zobacz ]

Zobacz demo | DLA Pobierz mootools Carousel Z stronicowania w wersji 1.0 (pobrany 1998 razy)

1. Przywoływanie karuzela

Możesz łatwo dodać stronicowania do karuzeli, po prostu ustawiając flagę stronicowania, który jest ostatni parater przeszedł podczas tworzenia instancji MooCarousel na true (chcę stronicowania) lub false (dawca chce stronicowania).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true); / / ns = liczba slajdów, sss = wielkość kroku slajdów

I oczywiście możesz zmienić wygląd-n-styl tych achors stronicowania jak należy modyfikując CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging prąd, carousel_paging strona {outline: none; szerokość:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging aktualny {background: # 4D4D9B; color: # FFFFFF;}..

Dobrze! jest mały problem choć Kotwy stronicowania jeśli ustawione, to zostanie on generowany zawsze po Carousel komponentu. Chciałem zrobić to dynamiczny, jak również, ale potem po prostu zachować scenariusz do wydmuchiwania proporcjach, postanowiłem go pominąć.
Ale wiesz, trochę Javascript, można łatwo zmodyfikować kod generacji stronicowania w MooCarousel klasy zadowolić swoich potrzeb.

2. Dostosowywanie Lewa i prawa ikony

Możesz zmienić położenie, obrazy lub jakikolwiek displat mienia z przycisków lewego i prawego po prostu zabawy z CSS. aby móc zmieniać miejsca docelowe o buttoms lewego i prawego był rzeczywisty powód, dla mnie do prawej mojej naszej Carousel klasy.
Ponieważ ten MooCarousel Class, przyjmuje id jest z tych przycisków, można rzeczywiście umieścić te przyciski dowolnym miejscu na stronie, proszę ... nie muszą być w hierarchii elementów, jak w moim przykładzie.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Dostosowywanie kroki slajdów

Co mam na myśli MOICH Dostosowywanie KROKI slajdów?
Większość Karuzele przesuń wypełniona z widocznym oknem. Więc mówisz, że miał cztery elementy (jak w mojej próbce powyżej), to przesunąć wszystkie cztery elementy. Z tego Carousel, możecie przekazać liczbę slajdów i wielkość kroku wybór.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true);
c_ns = liczba slajdów, c_sss = wielkość kroku slajdów

Także w moim example1 mam calcuted wielkość kroku slajdów, oparty na logice gdzie, wiem liczbę elementów, szerokość na każdej pozycji i marże, które złożyły po każdej pozycji w moim CSS.

/ * Dla hulanka 1 * /

var c1_w = 92 / / hulanka Szerokość produktu

var c1_n = 10 / / Całkowita liczba pozycji hulanka Porównanie

var c1_pp = 4 / / Liczba pozycji hulanka Porównanie perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = wielkość kroku slajdów

var c1_ns znaku = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = liczba slajdów

c1_sss + = c1_marginFactor / / sss slide = wielkość kroku, 51 na marginesie

Wymagania: Mootools 1.2

Zobacz demo | DLA Pobierz mootools Carousel Z stronicowania w wersji 1.0 (pobrany 1998 razy)

MooRating jest prosty (cross przeglądarki, oczywiście jak to wykorzystuje moc biblioteki mootools), lekkie i doskonale Mootools oparte rozwiązanie znamionową. To nie jest określany jako "Ilość gwiazdek", po prostu dlatego, że obraz ocena może być, jak wybrać (I dostarczyły Gwiazdy, barów i serca do pobrania, ale można stworzyć swój własny wybór i po prostu wrzucasz).

Jak to wygląda:

	Ocena Mootools z różnych obrazów Zobacz demo
	Ocena Mootools z wartości procentowych Zobacz demo
	Ocena Mootools z wartości ułamkowych Zobacz demo

Pobierz Mootols Star Rating Script (Pobrane 720 razy)

Ocena dane: Liczba całkowita, dziesiętna lub procent
Aktualnie skrypt został zaprojektowany, aby pokazać dane ratingowe całych wartości (1,2,3,4,5), w dziesiętnych (1,24, 3,45 itd.) lub w procentach (12%, 55% itd.). Wybór wyświetlania danych w dowolnym z wymienionych formatów można ustawić po prostu zmieniając niektóre wartości flag w ramach javascript (moorating.js)
Zasadniczo istnieją dwa e dwie flagi do zabawy, do wyświetlania wartości w wybranym przez Ciebie formacie ...

var inpercent = false; / / Ustawienie tej flagi na true, jeśli wymagają wartości procentowe, które mają być wyświetlone
var isFractional = false / / Ustaw na true, jeśli chcesz ułamkowe wartości, takie jak 1,24, 1.25, 4.56, a nie 1,2 ... 5

I nie sądzę istnieje wyjaśnienie wymaga tego. Ponadto. Skrypt jest bardzo prosta. Jeśli znasz trochę javascripting, możesz zmodyfikować skrypt, aby uzyskać jakichkolwiek wartości wyświetlanej. Na przykład: jeśli chcesz trzech miejsc po przecinku, które będą wyświetlane ... tylko dostosować skrypt jak poniżej ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = FormatNumber (x, 3);.} / / 2 zostaje zmieniony na 3
else {moostartval [i] innerHTML = Math.round (x).;

Aktualizacja wartości Ocenianie:
I havent przeszkadza pisanie skryptów AJAX do aktualizacji wartości Oceny, bo wiem z doświadczenia, że ​​nie zawsze ma on zamiar zaktualizować RATING jak tylko czegoś stopy użytkownika. Jesteś wolny, aby robić, co chcesz z wartości znamionowej, zaktualizuj je za pomocą AJAX lub wysłanie go lub ustawić ukrytą wartość pola formularza, które należy przedłożyć wraz z całą postaci itp.

Funkcja updateRating (id, ocena) {
/ / Alert (id + "," + ocena);
/ / Zróbcie wszystko, cokolwiek się oceną
}

Istnieje funkcja w javascript o nazwie "updateRating". Funkcja ta została przekazana do id w div Rating, w celu określenia, co do których wskaźniki (jeżeli jest więcej niż jeden wskaźniki na stronie) został zaktualizowany i wartość rankingu [updateRating (id, ocena)]. Możesz wybrać co chcesz z tymi wartościami, jak wspomniałem wcześniej.

Obrazek Ocena: gwiazdy, kier, bary czy cokolwiek proszę
Zmiana ratingu na którekolwiek z powyższych typów (gwiazdy, serca itp.) jest bardzo prosta. Wystarczy utworzyć obraz podobny do wskazanego jednego i upuść go w. Pamiętaj, że jeśli zmienisz nazwę obrazu, należy dokonać niezbędnych zmian w pliku CSS, patrz poniżej.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif ") repeat-x;}
. Moostar p {float: left; margin: 0px; padding: 0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif ") opuścił 25px;}

Większość ocen widgety stosować gwiazdę i pół-gwiazdkowe obrazy ze myszy nad wydarzeniami na każdej gwiazdy. Oceny Moo wykorzystuje prosty sprite obraz jako tło do osiągnięcia wymaganych efektów wizualnych z głową bardzo niskim poziomie.

Wymagania: Mootools 1.2
Pobierz Mootols Star Rating Script (Pobrane 720 razy)

I szukał podwójnym suwakiem przypięty (suwak z dwoma pokrętłami, minimalna i maksymalna) przy użyciu Mootools. Choć znalazłem kilka dobrze zrobić podwójny suwak wpiętych w forum mootools, jedynym problemem było to, że wszystkie te dint suwaki mieć wybrany marker zasięgu. Wreszcie! Postanowiłem stworzyć własną rękę. Dobrze! Zrobiłem używać oryginalnego kodu i zmodyfikować go mieć tło suwak że wskazany zakres wybrany wizualnie, jak w moim przykładzie poniżej. The Blue obszary wskazuje zakres wartości wybranego.

Zobacz Wersja 2.2 Demo | Mootools Pobierz Pokój Przypięty Version Slider 2.2 (pobrany 11850 razy)

Można bardzo łatwo zmienić wygląd i wskaźnika zasięgu (w kolorze niebieskim w powyższym przykładzie), pokrętło suwak, tor suwaka poprzez modyfikację slider.css miarę potrzeb.

Nie daj mi komentarz jeśli okaże się to przydatne.

Jeśli jesteś jednym z tych facetów (jak ja), którzy często sprawdzać CSS dobrze wykonane strony HTML, aby zainspirować czy cokolwiek innego, to pewnie zauważyłeś, że użyliśmy Faux pozycjonowania (jak już wspomniano we wcześniejszym artykule Jesteśmy Faux Absolute Positioning używając: Brilliant Układ CCS )

Zrobiliśmy kawał dobrej roboty na tym szablonie, więc pomyślałem, że miło się nią dzielić .... Pobierz ten temat WordPress (pobrany 197 razy)