DSsys DSsys i skrypty JavaScript są miłe!

(akt. wer. 1.1.1)

Lista funkcji

Kategorie

Składnia

void klasa DSsys.Przesuwanie ( string id [, object konf = null ] )

Klasa do animowanego przesuwania obiektów div wraz z meni.

Kategoria: Obsługa

Lokalizacja: biblioteki/Przesuwanie.js

Opis

Klasa do animowanego przesuwania obiektów div wraz z meni.

info UWAGA!

Klasa korzysta z pliku konfiguracyjnego o postaci:

Przykład:

DSsys.konf.przesuwanie = {
  co_ile: 5,//ile sekund ma być wyświetlany element
  jak_wolno: 2,//i większa liczba tym dłużej wykonuje się przejście między kolejnymi elementami.
  klasa: 'jeden_elmn',//Klasa div-a zawierającego treść pojedynczego elementu.
  przycisk_id: 'meni_przesuwanie_przycisk',//id przycisków typ_meni[0]
  przycisk_klasa: 'meni_przycisk',//klasa przycisków typ_meni[0] Dla typ_meni[1] dodaktkowo: '_naw'
  przycisk_klasa_zaz: 'zaznaczone',//klasa aktywnego przycisku.
  meni_klasa: 'meni',//klasa div-a zawierającego przyciski 
  pamiec_id: 'pamiec_przesuwanie',//id elementu pamiętająca poprzedni wyświetlony indeks.
  szerokosc: 900,//szerokość w pikselach elementu do przesuwania (div-a z klasą pola klasa).
  przesuniecie: 100,//co ile pikseli ma się odbywać jeden krok przesunięcia. Pole szerokosc musi być wielokrotnością tego pola
  typ_meni: [1,1]//Pierwsze meni indeks 0 przyciski, drugie indeks 1 to meni przycisków z dwóch stron; 1 pokazuje dane meni, 0 ukrywa.
};

info WSKAZÓWKA!

Obiekt posiada jedną metodę: Przesuwanie::dodajElmn(tresc);

[string] tresc = łańcuch znaków zawierający kompletny kod html wstawianego kolejnego elementu (na koniec)

Parametry

string id

Nazwa id kontenera, który przechowuje ,,pojedyncze elementy'' do przesuwania.

object konf = null

Specjalizowana konfiguracja dla konkretnego egzemplarza klasy.

Przykłady

#1 Przesuwanie kilku elementów z domyślną konfiguracją. zapisz zapiszZIP

Przykład:

DSsys.start(['o.doklej.js','o.efekty.js','Przesuwanie.js']);
DSsys.ladowanie.dodAuto(function() {
  var przes = new DSsys.Przesuwanie('kontener');
  DSsys.o.wezid('przycisk').onclick = function() {//Przycisk który dodaje dynamicznie nowy element do wyświetlania.
    przes.dodajElmn('<div class="jeden_elmn" style="background-color: orange; color: blue;">5</div>');
  };
});

HTML:

<div id="kontener">
<div class="jeden_elmn" style="background-color: white; color: black;">1</div>
<div class="jeden_elmn" style="background-color: black; color: white;">2</div>
<div class="jeden_elmn" style="background-color: green; color: yellow;">3</div>
<div class="jeden_elmn" style="background-color: yellow; color: green;">4</div>
</div>
<div><input type="button" value="Dodaj nową pozycję" id="przycisk" /></div>

CSS:

#kontener, .jeden_elmn {
width: 900px;
height: 600px;
}
#kontener {
overflow: hidden;
margin: 0 auto;
position: relative;
}
.jeden_elmn {
display: none;
position: absolute;
top: 0;
left: 0;

text-align: center;
font-size: 160px;
line-height: 600px;
}
.meni {
position: absolute;
bottom: 20px;
right: 20px;
}
.meni li {
display: inline-block;
width: 25px;
margin: 2px;
cursor: pointer;
color: white;
background-color: grey;
text-align: center;
}
.meni li.zaznaczone {
color: red;
}
.meni_przycisk_naw {
position: absolute;
top: 50%;
font-weight: bold;
font-size: 24px;
background-color: grey;
color: white;
border-radius: 10px;
cursor: pointer;
}
#meni_przycisk_wlewo {
left: 50px;
}
#meni_przycisk_wprawo {
right: 50px;
}

Podobne

[DSsys.Przenikanie] - Klasa do animowanego przenikania obiektów div wraz z meni.

Aktualna wersja: 1.1.1

* * *
© <^> 2012-2014

Projekt i wykonanie: DrezynSoft


Partner Autorska witryna kolejowa Partner DrezynSoft Partner Fotograficzna galeria krajobrazów Partner FotoStacyjka
Partner SelekTTor Partner Mapy Partner Edytor XML Partner Gry Partner Tłumacz Partner DSsys
Partner MojaMuzyka Partner Kanał Ostródzko-Elbląski w obiektywie <^> Partner Konwerter tekstu

Podstronę załadowano w 0.0185 sekundy.