Homepage » Coding » Hangerőszabályzó létrehozása a jQuery UI csúszkával
Hangerőszabályzó létrehozása a jQuery UI csúszkával
Ha egy freebies vadász, akkor valószínűleg letöltött sok PSD felhasználói felületet (UI). Némelyikük valóban csodálatos, és időt takaríthat meg az általunk kidolgozott design prototípusával.
Ebben a bejegyzésben egy PSD UI kódot fogunk kódolni, és valamilyen funkcionálisabbá alakítjuk. A következő PSD UI Slider kódot fogjuk kódolni a jQuery UI Slider témaként.
azonban, Kérjük, vegye figyelembe hogy ez a bemutató célja közepes szinten tapasztalat. Ezt mondva, még mindig viszonylag könnyű követni, amíg megismerkedik a CSS és a jQuery.
Rendben, most kezdjük.
1. lépés: a jQuery felhasználói felület
Nyilvánvalóan szükségünk van a jQueryre és a jQuery UI könyvtárra, és két lehetőségünk van arra, hogy ezeket kihasználjuk. Először, a jQuery és a jQuery UI közvetlenül a következő CDN-ről tudunk összekapcsolni: Google Ajax API CDN, Microsoft CDN és jQuery CDN, rengeteg előnye van a tárolt CDN fájl használatának, amikor honlapunkat online töltjük.
De mivel csak akkor fogunk dolgozni, ha offline állapotban dolgozunk, akkor az második helyett.
Letölthetjük és testreszabjuk a jQuery UI könyvtárat a hivatalos letöltési oldalon. Mivel csak a Slider pluginre van szükségünk, csak a Slider könyvtárat választjuk függőségeivel együtt és elhagyjuk a többit. Így az általunk használt fájlok sokkal vékonyabbak lesznek és gyorsabban töltődhetnek be. Ezután kapcsolja össze az összes könyvtárat a HTML-dokumentummal, lehetőleg az oldal alján, vagy a zárás előtt
a címke pontos.
2. lépés: HTML jelölés
A csúszka jelölése nagyon egyszerű, minden szükséges jelölést - az eszköztippet, a csúszkát és a kötetet - HTML5-ben csomagoltuk. szakasz címke. A jQuery UI automatikusan generálja a többit.
3. lépés: A csúszka UI telepítése
Az alábbi töredék telepíti a csúszkát az oldalon, de csak az alapértelmezett konfigurációt alkalmazza.
$ (függvény () $ ("#slider") .slider (););
Tehát itt egy kicsit növeljük a csúszkát más konfigurációk hozzáadásával.
Először változóként tároljuk a csúszkát.
var slider = $ ('# csúszka'),
Ezután beállítjuk a csúszka minimális alapértelmezett értékét 35, amikor először betöltődik.
slider.slider (tartomány: "min", érték: 35,);
Ezen a ponton még nem látunk semmit a böngészőben, mert a jQuery UI alapvetően csak a jelölés létrehozása. Ezért bizonyos stílusokat kell alkalmaznunk ahhoz, hogy a böngészőben vizuálisan láthassuk az eredményt.
4. lépés: A stílusok
Mielőtt továbblépnénk, szükségünk van bizonyos eszközökre a PSD forrásfájlból, mint például a háttér textúra és az ikon.
Nem fogunk beszélni hogyan szeleteljük ebben a cikkben csak a kódra összpontosítunk. Ha nem biztos benne, hogyan kell szeletelni, először nézze meg az alábbi screencast-t.
Tervezés konvertálása PSD-ről HTML-re - Nettuts+
Rendben, most kezdjük hozzá a stílusokat.
Először a csúszkát a böngésző ablakának középpontjába helyezzük, és csatoljuk a hátteret, amelyet a PSD-ről szeleteltünk a test.
test background: url ('… /images/bg.jpg') ismételten balra; szekció szélesség: 150px; magasság: auto; margin: 100px auto 0; pozíció: relatív;
Ezután a stílusokat alkalmazzuk az eszköztippet, a hangerő, a fogantyút, a csúszkát hatótávolság és a csúszka maga.
Ezt részlegesen fogjuk megtenni, kezdve…
Slider
Mivel nem definiáltuk a csúszka maximális értékét, a jQuery UI alkalmazza az alapértelmezett értéket; ez az 100. Ezért is alkalmazhatunk 100 (px) a csúszkához szélesség.
Egy kicsit módosítottuk a kötet ikonját, hogy eleget tegyünk ötletünknek. Az ötlet, hogy hatással leszünk fokozatosan emelje fel a hangerőt a csúszka értékének megfelelően. Biztos vagyok benne, hogy gyakran látott ilyen hatást egy médialejátszó felhasználói felületén.
Ebben a lépésben kezdjük a Slider speciális hatását.
Tooltip
Ezen a ponton az eszköztippnek még nincs tartalma, így a csúszka értékével fogjuk kitölteni. Továbbá az eszköztipp vízszintes pozíciója megfelel a fogantyú helyzetének.
Először is, az eszköztipp elemet változóként tároljuk.
var tooltip = $ ('. tooltip');
Ezután meghatározzuk a fent említett szerszámpecek hatását a Slide Eventen belül.
slide: funkció (esemény, ui) var value = slider.slider ('érték'), tooltip.css ('bal', érték) .text (ui.value);
De azt is szeretnénk, hogy az eszköztippet kezdetben elrejtse.
tooltip.hide ();
Ezt követően, amikor a fogantyú hamarosan elkezdenek csúszni, ez egy fade-in hatású lesz.
Ahogy már említettük a Stílusok szakasz, a kötet ikonját úgy tervezzük, hogy megfelelően módosítsa a fogantyú helyzetét vagy pontos legyen, a csúszka értékét. Tehát a következő feltételes nyilatkozatot fogjuk alkalmazni ennek a hatásnak a létrehozásához.
Először is, a kötetelemet és a csúszka értékét változóként tároljuk.
hangerő = $ ('. kötet');
Ezután elindítjuk a feltételes nyilatkozatot.
Ha a csúszka értéke kisebb vagy egyenlő 5 a kötet ikonja egyáltalán nem fog megjelenni, jelezve, hogy a kötet nagyon alacsony, de amikor a csúszka értéke növekszik, a kötet sáv is növekszik.
if (érték <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
Tedd össze őket!
Rendben, ha összezavarod a fenti dolgokkal, ne legyél. Itt van a parancsikon. Helyezze az alábbi kódokat a dokumentumba.
Ma sikeresen létrehoztunk egy elegánsabb jQuery UI témát, de ugyanakkor sikeresen lefordítottuk a PSD felhasználói felületet egy funkcionális hangerőszabályzóvá..
Reméljük, hogy ez a bemutató inspirálja Önt, és segíthet megérteni, hogyan lehet a PSD-t egy használhatóbb termékké alakítani.
Végül, ha bármilyen kérdése van a bemutatóval kapcsolatban, nyugodtan adhatja hozzá az alábbi megjegyzésekhez.
