Knowledge Team





iCarousel


iCarousel
Copyright © By Fabio Zendhi Nagao
For original English text, go to: http://zendold.lojcomm.com.br/icarousel/

index:

abstrakt:

Jednym z najczęstszych problemów web developer zwykle twarz wiąże się nieustannie obracać fragment treści. Może to być prezentacja gazet, drobne fragmenty wiadomości lub listę miniaturek. Natury rzeczy obracania nie ma znaczenia, bo za dużo tu tych wszystkich, rodzaj aplikacji, dzielić się zawsze ten sam pomysł: Obracanie. Cel ten można osiągnąć na różne sposoby, jak blaknięcie i przewijanie. Więc tutaj jest iCarousel staje się użyteczny. To jeden krok do przodu próbuje uogólniać tych wszystkich typów widżetów zapewniając bogatą prezentację i co łatwe zadanie do zrobienia.
przykłady:

Prosty news ticker

Pionowy scroller wiadomości z wydarzeń onClickPrevious i onClickNext

Pozioma scroller zdjęć

Pionowy scroller zdjęć

Pionowy scroller tekstu

Poziomy suwak obraz

Kompatybilność z przeglądarkami:

iCarousel jest kompatybilny i przetestowane w programie Internet Explorer, Firefox (i jego mozilla przyjaciół), Opera i Safari (Kamicane dzięki testowania go). Ale to powinno działać w innych przeglądarkach też … Jeśli uda znaleźć innego kompatybilnego przeglądarki, daj mi znać

Funkcje:

iCarousel jest w pełni konfigurowalny. Możesz zmienić każdą opcję domyślną tylko initializating klasę z obiektu w formacie JSON. Następujące opcje są dostępne:

(Obiekt) animacja
(String) typ (domyślnie “fadeNscroll” Wartości: ["fadeNscroll", "scroll", "Fade"]).
(String) kierunek (domyślnie “left”, wartości: ["top", "left"]) – wymagany tylko typu “scroll”.
(Int) ilość (domyślnie 1) – ilość elementów do przewijania :: żądać jedynie typu “scroll”.
(Funkcja) przejście (Fx.Transition.Cubic.easeInOut domyślne).
(Int) czas trwania (domyślnie 500)
(Obiekt) obrócić
(String) typ (domyślnie “manual”, wartości: ["manual", "auto"]).
(Int) interwał (domyślnie 5000 ms) – wymagane tylko przez “auto” typu.
(String) onMouseOver (domyślnie “stop”, wartości: ["stop", "kontynuować"]) – wymagane tylko przez “auto” typu.
(Obiekt) poz
(String) klass (domyślnie “item”)
(Int) rozmiar (domyślnie 100) – dotyczy wielkości pozycji :: żądać jedynie typu “scroll”.
(String) idPrevious (domyślnie “poprzedni”)
(String) idNext (domyślnie “next”)
(String) idToggle (domyślnie “przełącznik”)

Sposób użycia:

Przede wszystkim iCarouse zbudowana jest nad mootools v1.1, więc obie biblioteki są wymagane.
Pobierz MooTools w http://mootools.net i iCarousel tutaj. Użyj IceBeat Packito zobaczyć zależności Mootools.
Ze skryptami w ręce, obejmują je między “głową” definicji:
zobaczyć plainprint?

<head>
.
. <- / / Kody tutaj / / ->
.
<script type=”text/javascript” src=”js/mootools.js”> </ script>
<script type=”text/javascript” src=”js/icarousel.js”> </ script>
.
. <- / / I tu / / ->
.
</ Head>

Zainicjować iCarousel klasę:
zobaczyć plainprint?

nowy iCarousel (“kontener”, {
animacja: {
typ: “Fade”,
Przejście: Fx.Transitions.linear,
obracać: {
typ: “auto”
}
}
});

To wszystko, w tym tempie powinieneś być w stanie zobaczyć iCarousel tworząc news ticker z elementami z klasy “przedmiot”.
Licencja:

Ten kawałek kodu jest udostępniany na zasadach Open Source licencji MIT, co pozwala używać go i zmodyfikować go w każdej sytuacji. Więcej informacji przeczytać poniżej:
Licencja MIT

Copyright (c) 2007 Fabio Zendhi Nagao – http://zend.lojcomm.com.br

Niniejszym udziela się bezpłatnie, każdej osobie uzyskanie kopii tego oprogramowania oraz powiązane pliki dokumentacji (“Oprogramowanie”), radzenia sobie w oprogramowaniu bez ograniczeń, w tym bez ograniczeń praw do używania, kopiowania, modyfikowania, łączenia , publikowania, dystrybucji, udzielać sublicencji i / lub sprzedaży kopii tego Oprogramowania, oraz w celu umożliwienia osobom, do których Oprogramowanie jest dostarczane tak, z zastrzeżeniem następujących warunków:

Powyżej prawach autorskich i niniejsze pozwolenie musi być zawarte we wszystkich egzemplarzach lub istotnych fragmentach Oprogramowania.

OPROGRAMOWANIE JEST DOSTARCZANE “TAK JAK JEST” BEZ ŻADNYCH GWARANCJI ANI RĘKOJMI, W TYM GWARANCJI PRZYDATNOŚCI HANDLOWEJ, PRZYDATNOŚCI DO OKREŚLONEGO CELU I NIENARUSZALNOŚCI. W ŻADNYM WYPADKU AUTORZY LUB WŁAŚCICIELE PRAW AUTORSKICH NIE PONOSI ODPOWIEDZIALNOŚCI ZA JAKIEKOLWIEK ROSZCZENIA, SZKODY LUB INNEJ ODPOWIEDZIALNOŚCI, CZY TO W WYNIKU WYKONANIA UMOWY, deliktowej lub innej, WYNIKAJĄCE Z, LUB W ZWIĄZKU Z OPROGRAMOWANIEM LUB WYKORZYSTANIA LUB INNYCH ZWIĄZANYMI OPROGRAMOWANIE.

download:

iCarousel dostępna jest w formatach poniżej:

Pakowane wersja: Ultra sprężonego wersja (3.40KB) – gotowy do użycia “, jak to jest” wersja.
Pełna wersja: Pełna wersja (8.60KB) – Dla programistów, którzy potrzebują zmienić lub po prostu ją studiować.

Historia wersji:

22.05.2007: v1.001

[Zmiana] (opcja) animation.type [scroll -> fadeNscroll (domyślnie), teraz przewiń nie blaknięcie nic (naprawdę szybko)]
[Dodane] (metoda) goto (index) – wykorzystanie iCarousel.goTo (n) do animowania do n-tego elementu zbioru pozycji
[Dodane] (zdarzenia) onClickPrevious, onClickNext, onPrevious, onNext, onGoTo
[Zmiana] OnMouseOver: “STOP” zachowanie teraz kasuje licznik animacji na onMouseEnter i zacząć od nowa na onMouseLeave
[Zmienione] Przykład I ilustruje sposób użycia onPrevious i onNext
[Zmienione] Przykład II do zilustrowania wykorzystania onClickPrevious i onClickNext
[Zmienione] Przykład V do zilustrowania nowego onMouseEnter, zachowanie onMouseLeave
[Dodane] Przykład VI, aby zilustrować użycie goto

09.05.2007: 1.0 – pierwsze publiczne wydanie // <![CDATA[

.
.
.

Zainicjować iCarousel klasę:
zobaczyć plainprint?

nowy iCarousel ("kontener", {
animacja: {
typ: "Fade",
Przejście: Fx.Transitions.linear,
obracać: {
typ: "auto"
}
}
});

To wszystko, w tym tempie powinieneś być w stanie zobaczyć iCarousel tworząc news ticker z elementami z klasy "przedmiot".
Licencja:

Ten kawałek kodu jest udostępniany na zasadach Open Source licencji MIT, co pozwala używać go i zmodyfikować go w każdej sytuacji. Więcej informacji przeczytać poniżej:
Licencja MIT

Copyright (c) 2007 Fabio Zendhi Nagao - http://zend.lojcomm.com.br

Niniejszym udziela się bezpłatnie, każdej osobie uzyskanie kopii tego oprogramowania oraz powiązane pliki dokumentacji ("Oprogramowanie"), radzenia sobie w oprogramowaniu bez ograniczeń, w tym bez ograniczeń praw do używania, kopiowania, modyfikowania, łączenia , publikowania, dystrybucji, udzielać sublicencji i / lub sprzedaży kopii tego Oprogramowania, oraz w celu umożliwienia osobom, do których Oprogramowanie jest dostarczane tak, z zastrzeżeniem następujących warunków:

Powyżej prawach autorskich i niniejsze pozwolenie musi być zawarte we wszystkich egzemplarzach lub istotnych fragmentach Oprogramowania.

OPROGRAMOWANIE JEST DOSTARCZANE "TAK JAK JEST" BEZ ŻADNYCH GWARANCJI ANI RĘKOJMI, W TYM GWARANCJI PRZYDATNOŚCI HANDLOWEJ, PRZYDATNOŚCI DO OKREŚLONEGO CELU I NIENARUSZALNOŚCI. W ŻADNYM WYPADKU AUTORZY LUB WŁAŚCICIELE PRAW AUTORSKICH NIE PONOSI ODPOWIEDZIALNOŚCI ZA JAKIEKOLWIEK ROSZCZENIA, SZKODY LUB INNEJ ODPOWIEDZIALNOŚCI, CZY TO W WYNIKU WYKONANIA UMOWY, deliktowej lub innej, WYNIKAJĄCE Z, LUB W ZWIĄZKU Z OPROGRAMOWANIEM LUB WYKORZYSTANIA LUB INNYCH ZWIĄZANYMI OPROGRAMOWANIE.
download:

iCarousel dostępna jest w formatach poniżej:

pakowane wersja: Ultra sprężonego wersja (3.40KB) - gotowy do użycia ", jak to jest" wersja.
Pełna wersja: Pełna wersja (8.60KB) - Dla programistów, którzy potrzebują zmienić lub po prostu ją studiować.

Historia wersji:

22.05.2007: v1.001

[Zmiana] (opcja) animation.type [scroll -> fadeNscroll (domyślnie), teraz przewiń nie blaknięcie nic (naprawdę szybko)]
[Dodane] (metoda) goto (index) – wykorzystanie iCarousel.goTo (n) do animowania do n-tego elementu zbioru pozycji
[Dodane] (zdarzenia) onClickPrevious, onClickNext, onPrevious, onNext, onGoTo
[Zmiana] OnMouseOver: “STOP” zachowanie teraz kasuje licznik animacji na onMouseEnter i zacząć od nowa na onMouseLeave
[Zmienione] Przykład I ilustruje sposób użycia onPrevious i onNext
[Zmienione] Przykład II do zilustrowania wykorzystania onClickPrevious i onClickNext
[Zmienione] Przykład V do zilustrowania nowego onMouseEnter, zachowanie onMouseLeave
[Dodane] Przykład VI, aby zilustrować użycie goto

09.05.2007: 1.0 – pierwsze publiczne wydanie
// ]]>

Popular article: