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 1989 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 1989 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 718 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 718 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 11665 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.

Zanim mieliśmy do czynienia z CSS do tworzenia naszych układów stron, ustawiając pewne treści wewnątrz komórki tabeli wydawała się dziecinnie prosta. Wystarczy ustawić "align" lub "valign" własność tabeli, aby mieć wyrównanie do wyboru, bułka z masłem!
Z układów CSS, choć mamy "vertical-align" własności dla elementów, nie wydaje się być tak proste jak "align" lub "valign" właściwości. Aby być bardziej konkretną "vertical-align" nigdy się nie rozwiąże żadnego z problemów, zwłaszcza jeśli są napisać kawałek cross-browser CSS.

Bez użycia tabel HTML, PROBLEM centrowania na obiekcie, czy to obraz lub fragment tekstu wewnątrz zawierających podział, był prawdopodobnie każdy UI / CSS koszmar deweloperzy w pewnym momencie. Ten problem dalej ekstrapoluje swoje obawy z dostosowania, jeśli obiekt się koncentrować jest dynamiczny charakter, tzn. gdy jego wysokość jest zmienna (nieznane wysokość).

Choć nie ma znany proste rozwiązanie, które będzie działać w całej gamie przeglądarek mamy do czynienia, rozwiązanie, które starałem się dotrzeć nie wydają się działać w kilku przeglądarkach, że próbowali go (IE6, IE 7 , FF).

ROZWIĄZANIE:
W przeglądarkach takich jak Mozilla, Opera i Safari, dziwnie zachowujących się "vertical-align" nieruchomość może być wniesiona do swoich zmysłów, poprzez ustawienie "display" własność zawierających podział na "table-cell" (display: table-cell) .

Problemem pozostaje z IE rodziny przeglądarek, którzy jeszcze nie wydają się zrozumieć, co do z "table-cell" nieruchomości i nieświadomych, ponieważ są one po prostu zignorować. Rozwiązanie podane poniżej, choć proste, reklamy kilku elementów do kodu HTML do zdziała więcej DOM.

CSS i HTML wygląda tak
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> widoki: 3456 </ div>
</ Div>
</ Div>

Wynik wygląda tak: -

Obejrzyj demo tutaj | DLA Pobieranie plików źródłowych (pobrany 451 razy)

TOP Wyrównaj CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> widoki: 1234 </ div>
</ Div>
</ Div>

Wynik wygląda tak: -

Bottom Wyrównuje CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> widoki: 1234 </ div>
</ Div>
</ Div>

Wynik wygląda tak: -

Obejrzyj demo tutaj | Pobierz tutaj

Wygląda na wieki, ponieważ starałem się znaleźć rozsądne rozwiązanie tego problemu wyrównania. Ale teraz z tego rozwiązania, czuję się jak w małym pokoju.

Z nadzieją, że kiedyś

• pionowe wyrównanie własności w CSS będzie działać tak jak to robi wewnątrz komórki tabeli, bez konieczności pokonać wiele w bawełnę
• Przynajmniej, ustawienie margin-top: auto i margin-bottom: auto, da się taki sam wynik jak z margin-left i margin-right ustawione na auto
• Wojny przeglądarek będzie się pewnego dnia.
• Nie będzie tylko jednym z przeglądarką dla ALL.

Pobierz CSS i HTML w powyższy sposób roztwór tutaj (pobrany 451 razy) .. dla zrozumiałości, CSS nie jest zoptymalizowana

PS: A swoją drogą, to są miniaturki niektórych zdjęciach mam kliknęli ...

Nie, że istnieje tylko kilka LightBox tych, które można znaleźć przy google. Problem z większością lightboxach które znalazłem było to, że wszystko wydawało się wykorzystać jedną lub innych ciężkich środowisk JavaScript wagi, takich jak jQuery, Prototype, MooTools i lubi. Wszystkie są fajne i swanky szuka. Ale jeśli wymogiem jest "Ale ja chcę prostą i LEKKA SCRIPT Lightbox na mojej stronie", to tutaj jest;

Jakieś fajne cechy tego ulubionych

1. Bardzo lekki
   . 4KB skryptów w opakowaniu (8 kb rozpakowaniu)
   b. 2 kb CSS
   c. Kilka linijek kodu HTML do pojemnika Lightboxu
2. Proste do zrozumienia i wdrożenia
3. Może mieć wiele Lightboxy na tej samej stronie.
4. Ten sam pojemnik lightbox służy do wyświetlania, inną zawartość (która jest oddzielnie ujęte jako ukrytych działów znajdujących się na stronie), w zależności od łącza / opcji, który zostanie kliknięty.
5. Automatycznie centruje się, biorąc pod uwagę wszystkie czynniki, takie jak wysokości okna i szerokość (rozdzielczość ekranu), strona przewijania ilości i wysokości zawartości ulubionych
6. Testowane w IE 7 i FF

Zobacz demo |
Pobierz Zip Źródło Lightbox (Pobrane 1801 razy)

jo.js i jo_pack.js [pakowane wersja]: - prosty zestaw JavaScript obiektów [JO], która zawiera element, okna i skrypty pozycjonowania dokumentów. Można otworzyć JO.JS jeśli chcesz trochę popracować z jakimś zaawansowanym Javascripting, tworząc abstrakcyjne funkcji, rozszerzenie właściwości elementów i takie. Jeśli nie za dużo w Javascripting, Zostaw ją w spokoju.

lightbox.js, lightbox_pack.js [opakowaniach wersja]: - Zawiera lekkie skrypty menedżer pola. Jeśli jesteś projektant, odpowiedzialny także ze stosowaniem koszyk na stronie, musisz zrozumieć LightBoxManager. LightBoxManager zasadniczo zawiera showLightBox tylko dwie funkcje i closeLightBox.

lightbox.css: - Jeśli znasz CSS, możesz bawić się z lightbox.css dostosować wygląd-n-czuć lightbox.css

index.html: realizacja próbka ulubionych z dwóch różnych treści

lb_underlay_bkg.png: - To światło / Simi przejrzysty obraz, który jest używany tło dla podkładu Lightboxu [Podkład jest warstwa poniżej lighbox, co uniemożliwia użytkownikowi kliknięcie innego podmiotu na stronie, a lightbox jest otwarta]. Można użyć dowolnego obrazu lub nawet stałych kolorów w tym celu, w zależności od projektu strony i wymóg.

icon_lb_close.gif: - obraz ścisłej uchwytem Lightboxu w prawym górnym rogu pola światła. Można użyć dowolnego obrazu wg projektu

Zobacz demo |
Pobierz Zip Źródło Lightbox (Pobrane 1801 razy)

Proszę dać nam swoje komentarze i opinie ...

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 196 razy)