|
,
heel 2011.03.25. 21:55
"Garázs" mintájú JavaScript menü leirása
(hogyan csináld meg)
Ma végre rászántam magam, hogy egy kicsit is beleméjedjek ebbe az egész jQuery "kódolásba". Néhányan
azt irták hogy "jQuery helyett Scriptaculous-t hazsnálj". Ezen gondolkoztam. Ma pedig utánam néztem a jQuery-nek, és úgy döntöttem, hogy át alakitom az én legelső jQuery kódom!
(Röviden ez tulajdon képp a jQuery könyvtár, idézem: "A JQuery egy JavaScript könyvtár (Keretrendszer, Eszköztár), amivel egyszerűsödnek a JavaScript feladatok a HTML dokumentumokon, mivel számtalan megoldást készen kapunk benne. De a legnagyobb előnye, hogy a jól megírt produktum, nagy valószínűséggel az összes böngészőben fog futni."
Szóval, eddig a bevezetőig jutottam el én is, mert nem volt kedvem az egészet elolvasni, lehet, hogy még is el kelett volna. Na oké, kezdem is ezt az egészet, nem húzom tovább az időt!
Mivel elsőnek kedzek én is bele ilyenbe, szóval miközbe ezt irom, elsőnek csinálok ilyet, ezért lehet, hogy elsőre nekem se fog összejönni ez az egész. De próbálkozom!:D
Szóval, itt található a garázs demó:
http://www.gayadesign.com/scripts/jquerygaragedoor/
Ezt pedig tölts le, mert erre szükség van:
http://www.gayadesign.com/scripts/jquerygaragedoor/jquerygarage.zip
Csomagold ki a tartalmat, és töltsd fel a tartalmat a szerverre, a beállitott mappákat pedig a saját igényeidnek megfelelően beállithatod.
Elsőnek csinálj egy scriptet a GarageDoor munkastilusba. Ahhoz, hogy ezt elérd, egy jQuery-re lesz szükséged. Ez a könyvtár interfész hatásokat tesz lehetővé, úgy, hogy azt neked nem kell már létrehoznod. Ragadj meg egy jQuery-t és töltsd fel azt a szerveredre.
Add hozzá a következő kódot az oldalad cimkéjéhez:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/garagedoorjQuery.js" type="text/javascript"></script>
<link href='css/garagedoor.css' rel='stylesheet' type='text/css' />
Ez be fogja tölteni a szkripteket, és a Garage Door a megfelelő stilust. Állitsd be az "utakat" ahol szükséges.
A következő dolog, amit meg kell jelenitenem, hogy megteremtse a HTML kód elrendezését a garagedoors.
A következő kód azt mutatja, hogyan teremtsd, szerkezd meg a dokumentumod:
<div class='garagedoor' id='garagedoor'>
<div title='linktofile' class='item'>
<div class='underlay'>
Caption text
</div>
<img src='uritooverlayimage' class='overlay' />
<div class='mouse'><img src='images/nothing.gif' /> </div>
</div>
<div title='linktofile' class='item'>
<div class='underlay'>
Caption text
</div>
<img src='uritooverlayimage' class='overlay' />
<div class='mouse'><img src='images/nothing.gif' /> </div>
</div>
</div>
Ez két részt tartalmaz.
Azelemek alapértelmezett mérete: 100px szélesség és magasság 80px.
Sablont is tudsz létrehozni. Ennek érdekében, viszont vessünk egy pillantást a garagedoor.css fájlra, és állitsuk be a szélességet, és a magasságot!
Még egy kód:
<script>
GarageDoor.scrollY = -55;
GarageDoor.scrollX = 0;
GarageDoor.setBindings('garagedoor');
</script>
Az első sor a <script> tag (ejtsd: 'teg) határozza meg a görgetés, a sablon teensőit, a kurzort. Ebben a példában a sablon 55-ig mehet, ami azt jelenti, hogy 55px (pixel) a mozgás a Y tengelyen! Ezt viszintesen is tudod csinálni.
Add meg az id a garagedoor tartály a setBindings módszer és a GarageDoor hatásalesz inicializálva! Ügyeljen arra, hogy a hívás létrehozása után a html.
Ennyi lenne az egész kód! Ez ugye a a garázsos menünek az egész leirása. Szerintem a többi si ugyan igy működik, csak ugye a kódolást át kell irni.,
Saját forditás!
| 
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
Archívum
