Egyedi görgetősáv használata javascript, ilya Bodrov
Van egy angol nyelvű változata ezt a cikket elérhető.
Ebben a cikkben fogok beszélni, hogyan mindössze 10 perc jScrollPane - könyvtár jQuery - tudod, hogy egy egyéni görgetősávot a webhelyre, és hogyan formálhatja meg és hozzanak létre.
alapinformációk
Előbb vagy utóbb, a designer szembesül azzal a ténnyel, hogy a görgetősáv a helyszínen, az általa létrehozott, nézd neorganichno (és minden böngésző jeleníti meg a maga módján). Sok esetben ez nem jelent problémát, de találkoznak az ügyfelek, akik fizetnek erre a pillanatra a figyelmet, és követelik, hogy scrollbars festettek egy bizonyos színt, már például lekerekített élek és a nyilak (fel-le, jobbra-balra) nem jelenik meg. Ez felveti egy egyszerű kérdést: hogyan kell csinálni? Nem kellene, hogy tud segíteni ebben az esetben a CSS? Tény, hogy sok évvel ezelőtt egyes oldalakon láttam CSS utasításokat, hogy valóban festeni görgetősáv, de ez csak akkor működik, ha az összes kedvenc IE böngésző verzió óta 6 és a mi esetünkben ez nem járható út. Mégis, ha valaki érdeklődik, kiderült, hogy van valami, mint ez:
Ez elég ahhoz, hogy a szélesség és a magasság, amely alkalmas az Ön esetében. Kapsz valami ilyesmi:
Itt van, mi történt eredményeként:
Hurrá, ez működött. Most már csak be kell stílusokat alkalmazni a görgetősáv. Mi ez a szürke árnyalataiban és egy keskenyebb (mellesleg, mert ott jScrollPane preopredelonnaya dizájn):
Beállítás jScrollPane
Talán észrevetted, hogy a tekercset az egér kerék túl lassú. Nos, ez könnyű rögzíteni - jScrollPane lehetővé teszi több paraméter beállítására (a teljes lista megtalálható itt):
70 görgetési sebesség, véleményem szerint a legjobb, de lehet kísérletezni magát (alapértelmezett - 10).
Egy másik fontos paraméter felelős-e a készülék a görgetősáv automatikusan frissülnek. Ebben az esetben hasznos, ha? Például, ha a görgetés egység tartalmaz egy rögzített szélességű, és a relatív (előre meghatározott százaléka, em vagy rem). Ebben az esetben, ha a felhasználó ablak átméretezéséhez a blokk változtatni a szélességét, és annak szükségességét, hogy megfelelően módosítsa a görgetősáv. Ezt meg lehet tenni az API használatával, mely elérhető a jScrollPane (erről bővebben később), de könnyebb lesz írni:
Ebben az esetben a görgetősáv automatikusan felülbírálja. Egy másik forgatókönyv használata ezt a paramétert - a dinamikus hozzáadása tartalmat blokkolni görgetést. Ha egy automatikus túlszabályozás nem, ha új tartalommal görgetősáv nem frissül, és az új tartalom nem lesz képes menni (ez kívül maradnak bloc, és nem lesz látható) - autoReinitialise tulajdonság, hogy elkerülje ezt a problémát. Vegye figyelembe, hogy az alapértelmezett automatikus újradefiniálása történik igen gyakran - minden fél másodpercben. Ha az Ön esetében ez elegendő lesz, hogy frissítse a görgetősáv minden, mondjuk, 5 másodperc, akkor át kell menni egy másik paramétert autoReinitialiseDelay:
Az érték meghatározása a milliszekundum.
Szintén fontos megjegyezni, hogy ha a hangsúly a blokk a görgetősáv, a felhasználó görgetni a nyilakkal „fel” és „le” a billentyűzeten. Ha le szeretné tiltani ezt a funkciót, állítsa enableKeyboardNavigation paramétert false.
API jScrollPane
Az utolsó dolog, amit beszélni egy kicsit - egy API irányító jScrollPane. Hozzáférés az API nagyon egyszerű:
Most változó api lehet hozzáféréshez használt jScrollPane. Például ezt a kódot
indítaniuk prinuditilnoe frissíti a görgetősáv (ne felejtsük el, hogy akkor használja autoReinitialise opció az automatikus frissítések). Egy másik érdekes módja az API scrollToElement. amely lehetővé teszi a görgetést kénytelen egy adott elemének a tartály; ez az elem átvitelre, mint első paramétert és lehet meghatározni, mint akár jQuery tárgy vagy, mint egy DOM-csomópont, mint akár jQuery szelektor. A második argumentum egy logikai értéket igaz vagy hamis. amely meghatározza, hogy egy elemet kell, hogy amelyek adunk görgetve a tetején a tartály; Ha false. jScrollPane majd próbálja meg végrehajtani a minimális scroll az elem csak megjelent a látható tartományban. A harmadik paraméter is telt egy logikai érték, amely azt jelzi, hogy vagy nem animálni görgetést. Megmutatjuk, ez a módszer egy példát. Erre vnesom kis változások a mi elrendezés előtt használt:
Itt az első, hogy egy változót api. amellyel a módszereket és elvégzi jScrollPane, majd megkötik a kattintás eseménykezelő a kapcsolatot az osztály .scroll_to_element. A linkre kattintva lesz az alapértelmezett viselkedés feldolgozás tilos első via preventDefault () metódust. A böngésző nem próbálta átugrani a link. Aztán kénytelen görgetés történik, sőt, mi meg két logikai paramétert true. az elem volt a tetején látható terület görgetni és animált.
Számos módszer, hogy Hasonló feladatok elvégzésére: scrollTo (felfelé egy bizonyos ponton, amely definíció szerint az x és y koordinátái a bal felső sarokban a tartály); scrollToX és scrollToY (felfelé egy bizonyos ponton az x vagy y tengely); scrollToPercentX és scrollToPercentY (lépjünk a megfelelő tengely mentén, hogy egy bizonyos százalékát) és mások. Ezen túlmenően, az API lehetővé teszi kihallgatni jScrollPane: getIsScrollableH és getIsScrollableV (hogy lehetséges-e görgetni vízszintesen és függőlegesen); getContentPositionX és getContentPositionY (fogadó helyzetbe X és az Y tengelyre, rendre); getPercentScrolledX és getPercentScrolledY (százalékos görgetni az X tengely és az Y-kal), és mások. És végül, annak érdekében, hogy visszatérjen a tartályt a normál görgetősáv eltávolításával funkcionális JScrollPane, akkor az API elpusztítani módszer.
Ezen talán én befejezi a felülvizsgálat a könyvtár, amely lehet igazán hasznos sok fejlesztő. Amint láttuk, ez nem csak egy interfészt biztosít elég rugalmas ahhoz, beállítás, de API módszerek további ellenőrzés. A könyvtár egy állandó fejlődés; Ha hibát találsz, vagy azt sugallják, hogy további funkciókat, nyisson meg egy új alkalmazás az adattárban GitHubról. Ha jelentési detektált hibát, ne felejtsd el leírni részletesen (használt változata a könyvtár, jQuery változata az oldalon, használja a forgatókönyvet JScrollPane).
Ruby on Rails fejlesztő
Köszönjük megértését és sikeres munkát.
Follow me on Twitter frissítéseket kapni az új cikkek >>
Kérjük, engedélyezze keresztül az alábbi szociális hálózatok, hogy megjegyzést: