Jquery szkriptek promóciója. jQuery példa. Egyszerű példák a jQuery szkriptekre. Új elemek létrehozása
A WEB 2.0 megjelenésével javascript keretrendszereket is fejlesztettek, amelyek segítségével a webmester sokkal gyorsabbá és egyszerűbbé teszi a dinamikus weboldalelemeket. Az egyik ilyen keretrendszer a jQuery, amely óriási népszerűségre tett szert egyszerűsége és hihetetlenül könnyű súlya miatt. Íme tehát a 10 leghasznosabb jQuery szkript webhelye felületének javításához.
vastag doboz
Leírás: Arra van szükség, hogy egy modális ablakon keresztül felhívja a felhasználó figyelmét valamilyen szövegre, képre vagy webes űrlapra.
Mikor és hol használják: Ha több információt kell megjelenítenie a felhasználónak, mutasson nagyobb képet, tegyen fel néhány kérdést egy webes űrlap segítségével, vagy jelenítsen meg egy bejelentkezési űrlapot, de nem szeretné, hogy a felhasználó elhagyja az oldalt.
Szkript, példa, dokumentáció
Beépülő modul a WordPresshez
táblázatok
Leírás: Lehetővé teszi az oldal tartalmának megjelenítését lapokon.
Mikor és hol használják: Ha képernyőterületet szeretne felszabadítani azáltal gyors hozzáférés nak nek rejtett információ. Gyakran használják különféle prémium WordPress témák widgeteiben.
Szkript, példa, dokumentáció
Beépülő modul a WordPresshez
kód csúszka
Leírás: Létrehoz egy csúszkát, mint a képernyőképen a Coda webhelyről.
Mikor és hol használják: A Codához hasonlóan ez a szkript kiválóan alkalmas termékek vagy szolgáltatások szakaszokba csoportosított bemutatására. A felhasználók megkapják a lehetőséget gyors áttekintés, valamint az intuitív navigáció.
Szkript, példa, dokumentáció
Téma a WordPresshez
Galleria
Leírás: A Galleria egy jQuery nyelven írt javascript-galéria. Egyesével betölti a képeket, és megjeleníti a hozzájuk tartozó miniatűröket.
Mikor és hol használják: Például valamilyen eseményről vagy termékről készült fényképek megjelenítésére.
Szkript, példa, dokumentáció
jTip
Leírás: A jQueryben megvalósított eszköztippek.
Mikor és hol használják: Amikor több információt kell adnia egy objektumról egy cikk kontextusában, vagy tippeket kell megvalósítania a felhasználónak különböző webes űrlapokon.
Szkript, példa, dokumentáció
Beépülő modul a WordPresshez
stíluslap váltó
Leírás: Lehetővé teszi a webhely látogatói számára, hogy „egy kattintással” önállóan módosítsák a tervezési stílusokat.
Mikor és hol használják: Ha azt szeretné, hogy a felhasználó különböző betűméreteket válasszon, jelenítse meg az információkat a megfelelő stílusban mobiltelefon vagy a kinyomtatáshoz hadd állítsa be a színeket. A stíluslapváltó valóban segíthet webhelye használhatóságának javításában.
Szkript, példa, dokumentáció
Beépülő modul a WordPresshez
jQuery harmonika menü
Leírás: Lehetővé teszi dinamikus menük létrehozását.
Szkript, példa, dokumentáció
Beépülő modul a WordPresshez
Csúszka galéria
Leírás: A termékeket/képeket görgethető galériaként ábrázolja.
Mikor és hol használják: Amikor az összes elemet el szeretné helyezni az oldalsávban, de nincs elég hely az összes lehetőséghez.
Szkript, példa, dokumentáció
Űrlap érvényesítése
Leírás:Érvényesítse a webes űrlapokat az Űrlapellenőrzéssel, hogy elkerülje az érvénytelen mezőket.
Mikor és hol használják: A legtöbb formában. Ez segít a felhasználóknak megérteni, hogy pontosan hol töltötték ki a rossz mezőket, kiemelve a hibáikat.
Szkript, példa, dokumentáció
jmordulok
Leírás: Az üzeneteket úgy jeleníti meg a böngészőben, mint a Growl MacOSX rendszeren
Mikor és hol használják: Ha tájékoztatja a felhasználót a műveletről, de nem szeretné, hogy elhagyja az aktuális oldalt/frissítse azt. Ez egy nagyszerű módja annak, hogy érvényesítse a felhasználói műveleteket, például a regisztrációt. A jGrowl használata különféle üzletekben és hasonlókban is lehetséges. egy tétel kosárba tételének megerősítésére vagy tranzakció megerősítésére.
Szkript, példa, dokumentáció
10 évvel ezelőtt, amikor jQuery még csak gyerekcipőben járt, a böngésző ökoszisztémája nagyon változatos volt, és az akkoriban létező termékek mindegyike a maga módján küzdött a DOM-elemek kezelésének bonyolultságával. Az ambiciózus feladat, amelyet magunk elé tűztünk jQuery fejlesztők, egy univerzális megközelítés kidolgozása volt e problémák megoldására, és egy olyan API létrehozása, amely minden helyzetben egyformán jól működik.
Amennyire sikerült megítélniük Önt, de 10 éves fennállása után a jQuery továbbra is az egyik legnépszerűbb JavaScript-könyvtár.
Maga a JavaScript már kiforrott termék, jól dokumentált és minden modern böngésző támogatja. A modern böngészők közössége is konszolidáltabb, és a legtöbb esetben biztos lehet benne, hogy ha mondjuk egy oldal helyesen jelenik meg a Crome-ban, akkor Firefoxban is ugyanúgy fog kinézni. A querySelectors-t szinte minden modern böngésző támogatja.
Úgy tűnik, hogy a jQuery fejlesztésének története a naplemente felé tart – miért töltsünk újra oldalakat és pazaroljunk extra CPU-ciklusokat, ha a legtöbb feladat megoldható szabvány azt jelenti nyelv? Másrészt a számítástechnikai ipar számára ilyen hosszú időn keresztül rengeteg olyan megoldást fejlesztettek ki, amelyek egyszerűen átvehetők és használhatók, itt és most.
Azt gondolom, hogy ezt a döntést minden konkrét helyzetben magának a fejlesztőnek kell meghoznia, nem a divatra és a trendekre, hanem a józan észre és alkotása fejlődési kilátásaira koncentrálva.
Ebben az áttekintésben összegyűjtöttem az általam ismert dolgokat ingyenes jQuery bővítmények amelyek jelenleg aktív fejlesztés alatt állnak, vagy amelyeket az elmúlt évben legalább egyszer frissítettek. Néhányat aktívan használtam és alkalmazok a praxisomban, néhányat csak felületesen ismerek, de képességeikkel lenyűgözött. Vannak köztük rendkívüli, nagy fantáziával készültek. És még ha nem is találja meg a módját, hogy ezeket a projektjei során felhasználja, talán inspirálják Önt saját, még hihetetlenebb megoldások megalkotására.
multiscroll.js
Érdekes megoldás a látogató figyelmének felkeltésére - az oldal görgetése két panel formájában történik, amelyek közül az egyik felcsúszik, a másik pedig lefelé, megnyitja a következő blokkot. Ezenkívül minden, még nagyon elavult böngészőn is kiválóan működik.
jquery.email-autocomplete.js
Az e-mail címeket nagyon gyakran kell megadni, és annak ellenére, hogy csak másfél tucat karakterből áll, gyakran fel akarják gyorsítani ezt a folyamatot. A jquery.email-autocomplete.js saját listával rendelkezik a népszerű tartományokról postai szolgáltatások amely alapján a cím automatikus kiegészítését javasolja. A felhasználó elfogadhatja ezt a felszólítást a Tab billentyű vagy a jobbra nyíl megnyomásával, vagy folytathatja a manuális gépelést. A plugin jól működik mobil verziók webhely. Azonban egy kicsit be kell fejeznie a beépülő modult, hogy működni kezdjen a belföldi levelezőszolgáltatásokkal.
tinyDatePicker
Ennek a bővítménynek 5 kB-jában sok lehetőség van. Naptárak, tervezők, áruk és szolgáltatások foglalása - ez nem egy teljes lista, ahol a tinyDatePicker használható. Gyors, könnyű, méretezhető – könnyen integrálható a Bootstrapbe vagy bármely más keretrendszerbe.
ReadRemaining.js
Sokunknak mindig nagyon kevés az idő. Mindig is irigyeltem azokat, akik tudják, hogyan kell helyesen kezelni. Valószínűleg a ReadRemaining.js bővítmény szerzője az egyikük. Ki másnak jutna eszébe a következtetés a szöveg mellett, hogy mennyi ideig tart elolvasni. És miközben a szöveg gördül, számolja újra ezt az időt egy adott felhasználó olvasási sebessége alapján.Egy nagyon eredeti bővítmény, amit szerintem a látogatók élvezni fognak, ha sok hosszú szöveges anyagod van.
Tooltipster
klasszikus eszköztipp(eszköztipp) számos funkcióval és opcióval. Maga az elem bárhol elhelyezkedhet a szülőelemhez képest, és bármilyen elemet tartalmazhat. A lényeg, hogy ne vigyük túlzásba a használatát, csak ott használjuk, ahol valóban szükséges.
Addel
A mássalhangzó név ellenére ennek a bővítménynek semmi köze Adele énekesnőhöz. Neve az angol ADd-DELete (hozzáadás és eltávolítás) szavakból származik, és tükrözi a célját - dinamikusan hozzáadhat vagy elrejthet HTML-elemeket, elsősorban formaelemek. A menedzsment rugalmas és intuitív.
Chart.js
Egy aktívan fejlődő bővítmény, amely lehetővé teszi Kimenet különböző típusok diagramok(összesen 8 féle, beleértve a vegyeseket is). Mindenki számára remekül működik modern böngészőkés sima és szép animációval rendelkezik, amikor az adatok megváltoznak.
jQuery Flip Quote
Egy nagyon érdekes bővítmény, amely két dolgot csinál. Először, idézőjelblokkokat forgat, akkor van jelen az oldalon, amikor a blokk láthatóvá válik (nagyon alkalmas a figyelem felkeltésére). Másodszor, amikor erre a blokkra kattint, idézet kiemelése a szövegben, amely lehetővé teszi, hogy gyorsan megtalálja az általános anyagáramlásban. Kiderült, hogy az idézeteket is lehet szórakoztatóvá varázsolni!
Algolia helyek
Gyors automatikus kiegészítés keresése postacímek, városok, útvonalakés minden, ami a világ helyeivel kapcsolatos az OpenStreetMap adatbázissal való integrációnak köszönhetően. Nagyon hasznos plugin online áruházak számára.
Bújócska
Egyszerű, de funkcionális élő keresési bővítmény. Képes különféle kritériumok alapján keresni, bizonyos műveleteket végrehajtani a keresett adatok megtalálása után és még sok más.
időzítő
Nagyon sok kényelmes beviteli megoldás létezik egy bizonyos pillanat idő. A Timedropper azonban kiemelkedik közülük egyszerűségével és könnyű kezelhetőségével. Változó óra és perc igazán kényelmes ezzel a vicces nyelvvel. Számos testreszabási lehetőséggel rendelkezik, például: időformátum (12 vagy 24 óra), a számlap színe, a teszt, a háttér, valamint az óra és a perc megváltoztatásának lehetősége az egér görgőjével. Egyébként van egy hasonló bővítmény a dátum beállításához.
Lori
Csúszka tiszta JavaScriptben írva. Minimalista, de támogatja a gesztusvezérlést, fix elem beállítását, gombvezérlők megjelenítését és több kép megjelenítését egyidejűleg, beleértve a különböző szélességet is.
CurrencyFormatter.js
Egy nagyon egyszerű és kicsi forgatókönyv, amely teljesít számértékek megjelenítése pénzben kifejezve. Pontokat, szóközöket ad hozzá az ezrek elválasztásához, valamint pénznemszimbólumot. 155 világ valutáját támogatja.
Shave.js
javascript, amely a vágja le szépen a szöveget A, ami nem fér bele az adott magasságú tartályba. Csak 1,5 kB-ot vesz igénybe, és nem igényel harmadik féltől származó könyvtárakat.
jQuery vonaldiagram
Diagramkönyvtár különféle típusú és nagy mennyiség kezdeti adatok. HTML/CSS/JS nyelven írva, azonban van egy Angular.js-en alapuló verzió is
Freewall
Hihetetlenül gyönyörű jQuery bővítmény csempézett felület létrehozásához többféle stílusban: Windows Metro, Pinterest, a szokásos lapos vagy hierarchikus, húzható és dinamikusan hozzáadott elemekkel. Kiválóan működik, mint mobil böngészők, és asztali számítógépen, beleértve az IE8-at is. Igazán sokoldalú eszköz!
rowGrid.js
Az apró plugin a képeket vagy más elemeket egyenlő magasságú, egyenletes sorokba rendezi, megválasztva a méretet és a köztük lévő hézagokat, hogy minden sor tökéletesen illeszkedjen az ablak szélességébe. Igaz, minden objektumnak azonos magasságúnak kell lennie.
csúszkák
csúszkák menüt ad a webhely oldalához ill oldalsáv , amelyek csúszó mozdulattal megjelennek vagy elrejtőznek, amikor a kurzor a vezérlőgombra kattint. Ennek a beépülő modulnak a 2-es verziója teljesen át lett írva, és most már korlátlan számú különböző elemek. Teljes értékű API-val rendelkezik, saját visszahívási funkcióinak csatlakoztatására és eseményekre való feliratkozásra.
pagePiling.js
Nagyon hasonló a cikkben tárgyalthoz ezt a felülvizsgálatot multiscroll.js bővítmény, de az oldal nincs két panelre osztva, hanem teljesen eltolódik. Megváltoztathatja az eltolás irányát és sebességét. Egy jó választás egy egyoldalas webhelyhez, amely egyformán jól fog kinézni mobileszközökön és nagy képernyőkön.
Élénkség
Az Animition fő célja különböző tranzitív effektusok nagy és változatos halmazának megvalósítása egyetlen bővítményben. Ezek közé tartozik az elhalványulás és előhívás, a forgatás, a tükrözés, a nagyítás stb. (összesen 58 db).
ZooMove
Nem szeretem a képek dinamikus nagyítását a lebegéssel – túlságosan bosszantónak találom ezt a hatást. De ha valóban hiba nélkül szeretné használni, akkor jobb, ha erre a célra használja a ZooMove-ot. Olyan sima és áramló nagyítás és görgetés más plugin nem fog.
Rippleria
könnyűsúlyú ripple effect plugin(hasonlóan a víz felszínén lévő hullámokhoz) bármely DOM-elemen: egy gomb, div elem, kép. Nagyon könnyű beállítani és kezelni.
Flickity
Gyors, érzékeny és gesztusvezérelt csúszka. Külsőleg - egészen hétköznapi, de hihetetlenül gondosan megírt és strukturált dokumentációval. Egy teljes és átgondolt API.
kihúzó
nagyon kicsi és egyszerű csúszka, amelynek számos paramétere van, amelyek lehetővé teszik viselkedésének diverzifikálását: különböző mozgási irányok (vízszintes és függőleges), ciklikus (végtelen) görgetés, automatikus futtatás.
Lightcase.js
Kiemelkedő lightbox css3 animációval. Működik DIV-ekkel, képekkel, szöveggel, flash-objektumokkal, videókkal és iframe-ekkel. Egyelőre nem támogatja a jQuery 3-at, de a fejlesztők azt ígérik, hogy ezt a következő kiadásokban kijavítják.
PhotoSwipe
csodálatos Képgaléria billentyűzetvezérléssel asztali böngészőkben és kézmozdulatokkal mobileszközökön. Lehetőség van a fényképek betöltésének késleltetésére, amíg maga az oldal teljesen be nem töltődik. És ennek az örömnek mindössze 14 kB a mérete.
Szalag
A csík egy átvilágítódoboz, amely az oldal egy bizonyos részét elfoglalja, így magát az oldalt nem csak részben láthatja, hanem elérhetővé is teszi a vele való interakcióhoz. Ezenkívül egyidejűleg csúszkaként is működhet. Emellett a képekkel együtt a Youtube és a Vimeo videótartalmait is támogatja.
lemezjátszó.js
Hihetetlenül hatékony megközelítés a termékbemutatóhoz, különösen, ha fizikai tárgyról van szó. Valójában a bővítmény nagyon egyszerű, és csak egy sor képet mutat. Mivel azonban a folyamat az egérgörgővel vagy a képernyőn megjelenő gesztusokkal vezérelhető, feltéve, hogy a készlet egy objektum különböző szögekből készült képe, a nézőnek teljes illúziója van az elforgatásáról.
Vide.js
Talán a legegyszerűbb módja háttérvideó hozzáadása az oldalhoz webhely a Vide.js beépülő modult használja. Az IE9+-tól kezdve minden modern böngészőn működik. Az iOS és Android rendszeren, amelyek nem mindig játszanak le háttérvideót, egy kimerevített kép jelenik meg.
háromszögezi
Ha nem háttérvideóval akarod betölteni az oldalt, hanem statikus kép triviálisnak tűnik, próbáld ki háromszögletűség! Ezek egyedi geometriaiak háromszög alakú minták amely némi egyéniséget ad a tervezésnek. A beépülő modul lehetővé teszi a szín, a cellaméret és a variancia megváltoztatását. Akár saját implementációt is írhat az algoritmushoz, és használhatja a Trianglify-ban.
LazeeMenu
Ha webhelyén van egy nagy, hierarchikus menü, amelyet egyszerűnek és áttekinthetőnek szeretne tartani, akkor a LazeeMenu biztosan hasznos lesz az Ön számára. Ő a beágyazott rendezetlen listákat praktikus legördülő menüvé alakítja.
web ticker
Ketyegő, hasonlóan azokhoz, amiket a tévéképernyőn gyakran látni a sajtóközleményekben - a legfrissebb események, tőzsdei árfolyamok, időjárás... De soha nem tudhatod, mit lehet oda helyezni! Tehát, ha szereti az információk bemutatásának ezt a módját, vegye figyelembe a Web-tickert.
beviteli maszk
Felhasználói élmény a gyakorlatban. Emlékszel azokra az időkre, amikor egy hiba miatt újra be kellett írni az adatokat egy űrlapba. És a hiba csak a szerver válasza után derült ki. Felejtsd el! Az Inputmask nem csak vezérli és vizuálisan megjeleníti a bemeneti adatok helyességét, megakadályozza a helytelenek bevezetését is. Próbálja meg például a 13. hónapot beírni a dátum mezőbe. A maszkok nagyon különbözőek lehetnek - dátumok, telefonok, e-mailek és még reguláris kifejezések is.
Ez az egyik legnépszerűbb könyvtár JavaScript. És ez nem meglepő azok számára, akik használják. Lehetővé teszi a szkriptek fejlesztésének egyszerűsítését, felgyorsítását és – ami a legmeglepőbb – javítását JavaScript.
Előnyök:
- Magasan kényelmes működés elemekkel alapján CSS-választók.
- Kiváló böngészők közötti kompatibilitás. Sok programozó nem gondol a böngészők közötti kompatibilitásra, de ez szükséges, mert ugyanaz a kód különböző böngészők másként kezelhető. figyelembe veszi ezeket az árnyalatokat, és többé nem kell ezen gondolkodnia.
- Kiváló animációs lehetőségek. Az animáció díszíti az oldalt, és élvezetesebbé teszi a használatát. Egyszerűen lehetetlen egyszerűbbé tenni az animációt, mint ahogyan azt megvalósítják: hatalmas lehetőségek a könnyű használat mellett.
- Nagyszámú kész pluginok. Ugyanaz a kép csúszka bekapcsolása JavaScript több napig is eltarthat. És néhány perc alatt telepíthet és konfigurálhat egy kész bővítményt.
Ez alapján mindenki, aki forgatókönyvet fejleszt JavaScript. Ennek a kategóriának pedig az a célja, hogy megtanítsam a használatot, valamint használati példákat mutassak például a saját gyakorlatomból.
A jQuery-ről szóló cikkek elolvasása után megtudhatja:
1) Hogyan kell telepíteni.
2) Mi az a függvény $() ban ben .
3) Hogyan válasszunk ki elemeket a .
4) Hogyan kell dolgozni a kijelöléssel a .
5) Hogyan adhatunk hozzá és távolíthatunk el elemeket a .
6) Hogyan kell kezelni az eseményeket a .
7) Hogyan készül az animáció a .
8) A képek nagyítása .
9) Hogyan készítsünk egy sima "fel" gombot a .
10) Hogyan lehet dinamikusan feltölteni fájlokat a szerverre.
11) Hogyan történik? Adaptív elrendezés a .
12) Hogyan lehet aszinkron kéréseket küldeni a címre
13) Hogyan kell küldeni Ajax metódusok segítségével kéri $.post()és $.get()
14) Hogyan kell csinálni csúszka rádiógomb a .
15) A csúszka felszerelése sima.
16) Hogyan kell csinálni archívum a beépülő modul használatával.
17) Hogyan készítsünk bejárást a webhelyen.
18) Hogyan kell csinálni gyönyörű jQuery lapok.
19) Hogyan készítsünk feliratokat az oldalon a beépülő modul használatával.
20) Hogyan készítsünk gyönyörű folyamatjelző sáv a beépülő modul használatával.
21) Hogyan kell csinálni mintás zár a .
22) Hogyan adjunk hozzá hangszórókat egy könyvtárral rendelkező webhelyhez dynamo.js.
23) Hogyan kell csinálni háttér videó használva .
24) Hogyan email megerősítés a .
25) Hogyan készítsünk szépet és látványosat jQuery csúszka.
26) Hogyan szép legördülő lista a .
27) Hogyan kell csinálni gyönyörű jQuery felugró ablak segítségével WebUI-Popover.
28) Hogyan gyönyörű jQuery értesítések plugin segítségével nem köszi.
29) Hogyan gyönyörű legördülő menü érdekes hatással a cssés .
30) Hogyan kell csinálni a háttér részecskék formájában a .
31) Hogyan kell csinálni két fénykép interaktív összehasonlítása jQuery segítségével.
32) Hogyan kell csinálni jQuery kör alakú csúszka.
33) Hogyan kell csinálni jQuery felhők.
34) A bejegyzés megjelenése óta eltelt idő megjelenítése, a .
35) Hogyan kell visszavonni Különleges szimbólumok a jQuery-ben.
36) Hogyan jQuery visszaszámláló.
37) Hogyan kell csinálni jQuery egyéni menü.
38) Hogyan oldalbetöltési animáció a .
40) Hogyan kirepülő menü a jQuery-ben.
41) jQuery LightGallery- bővítmény galériák létrehozásához.
42) Egy elem becsomagolása a böngészőben vagy az eszközelrendezésben a .
43) Hogyan gyönyörű galéria rendezés jQuery segítségével.
44) Hogyan jQuery interaktív 3D objektum.
45) Hogyan jQuery felugró ablak.
46) Hogyan készítsünk görgetést parallaxis hatás.
47) Hogyan hamburger menü CSS-ben és JS-ben. 1. rész.
48) Hogyan hamburger menü CSS-ben és JS-ben. 2. rész.
49) Hogyan felugró keresés kattintásra.
50) Hogyan jQuery űrlap érvényesítése.
51) Hogyan jQuery telefon beviteli maszk.
52) Hogyan kell dolgozni jQuery könyvtárral.
53) Hogyan kell dolgozni jQuery UI könyvtár.
54) Hogyan kell használni jQuery UI csúszka.
55) Hogyan kell alkalmazni a widgetet jQuery UI Datapicker.
56) A lap beépülő modulról EasyTabs.
57) A csúszka testreszabása BxSlider.
58) Hogyan kell elhelyezni weboldal visszaszámláló.
59) Hogyan AJAX űrlap oldal újratöltés nélkül.
60) Hogyan készítsünk a nyomtatott szöveg hatása az oldalon.
61) Valós példán az animációs SVG vektorról.
62) Szűrők a jQuery-ben.
63) Hogyan juthat el választó a jQueryben.
64) Hogyan kell manipulálni attribútumok a jQuery-ben.
65) Hogyan működnek jQuery egéresemények.
66) Hogyan működnek jQuery effektusok.
67) Hogyan kell csinálni (1. rész).
68) Hogyan Felugrik felugró ablak jQuery segítségével(2. rész).
69) Hogyan szűrés az első betűk alapján a jQuery-ben.
70) Hogyan hamburger menü gomb animáció.
71) Hogyan érzékeny hamburger menü.
72) Hogyan kell csinálni Mobil első elrendezés.
73) Hogyan kell csinálni sima horgony jQuery-vel.
74) Hogyan oldal görgetése felfelé.
75) Hogyan készítsünk harmonikakönyvtár widgetet.
Humane.js
Egy szép jquery szkript, amely lehetővé teszi a figyelmeztetések megjelenítését az oldalon előugró ablakok formájában. Támogatja a mobileszközöket, könnyű, jól dokumentált, és ami a legfontosabb - észrevétlenül értesít, anélkül, hogy zavarná a megtekintést.
Impress.js
A szkript lehetővé teszi, hogy kiváló prezentációkat készítsen az oldalon. Lehetőségek beállítások, támogatja a billentyűzetvezérlést. Azt javaslom, hogy nézze meg a demót, hogy világosabb legyen, mi a tét.
PDF.js
Nagyon érdekes forgatókönyv. Lehetővé teszi a HTML5 használatával a generálást PDF dokumentum oldal tartalmából. Most már nem kell harmadik féltől származó szolgáltatásokat igénybe vennie egy cikk PDF formátumban történő letöltéséhez, mindent meg lehet tenni, ahogy mondják, "a helyszínen"
jQuery Transit
Egy nagyon divatos JQuery szkript, amely szinte bármire képes az objektumokkal. Bármilyen módon tömörít, mozgat, nyújt, csavar – rengeteg felhasználási lehetőség. A CSS3 transzformációs mechanizmust használja, nagyon kicsi a súlya - tömörített formában mindössze 2 kilobájt.
ResponsiveSlides.js
Jó hír azoknak, akik a @media használatával mobilra optimalizálják webhelyüket. Ez a kis méretű csúszka minden böngészővel működik az IE6-tól kezdve, mobil eszközök minden modern operációs rendszeren, és lehetővé teszi a képek méretezését az eszköz képernyőfelbontásához. Minden mobilfejlesztőnek – kötelező
Response.js
Szkripteszköz mobilbarát webhelyek létrehozásához. Támogatja a HTML5-öt, számos beállítással rendelkezik kényelmes munkavégzés fejlesztő.
Slabtext
Egy szokatlan forgatókönyv, amely lehetővé teszi, hogy nagy címeket hozzon létre, amelyek most divatosak. A működés elve a következő - a szkript vesz egy sort, megszámolja a karaktereket, oszt a sor hosszával, ügyesen kiszámolja, hogy hány karakter kell az egyes sorokra, figyelembe véve a szavakra bontást. Aztán hozzátesz egy kis varázslatot és... jobb megnézni egy demót, mert nincs elég szavam, hogy elmagyarázzam, hogyan működik
Scrollrama.js
Érdekes szkript, amely lehetővé teszi különböző effektusok megvalósítását az oldalon görgetés közben. Ezek a görgetőeffektusok egyébként egyre népszerűbbek, sok oldalon észreveszem.
Textualizer.js
Lehetővé teszi, hogy különböző animációkat alkalmazzon az oldalon lévő összes betűhöz. Nagymértékben testreszabható, jó böngészők közötti kompatibilitás, könnyű és elég szép bővítmény ahhoz, hogy egy kis "kreatív" rendetlenséget adjon az oldalához
Ragadós
Egy jó szkript, amely lehetővé teszi, hogy az oldal bármely elemét mindig láthatóvá tegye, például lefelé görgetéskor, Főmenü mindig a helyén marad. Ugyanezt megteheti az oldalsávval vagy bármely más elemmel.
Azoknak, akik kételkednek abban, hogy használják-e vagy sem jQuery szkriptek, hogy nagyon lelassítják-e a letöltést – ne aggódj. A lényeg az, hogy ne vigyük túlzásba a szépséggel és a funkcionalitással, és akkor minden rendben lesz!
Biztosan hallottál már a jQuery nevű csodálatos Javascript-könyvtárról. Mi is pontosan az a jQuery?
Hogyan könnyíthetnénk meg egy webfejlesztő életét? Hol kezdjem? A jQuery szórakoztatóvá és egyszerűbbé teszi a Javascript írását. Ezzel a könyvtárral a Javascript számos meglehetősen összetett aspektusa könnyen implementálható bármilyen alkalmazásba.
A mai oktatóanyag megmutatja, hogyan kezdje meg a jQuery használatát, és hogyan írja meg az első szkriptet.
Mi az a jQuery?
A jQuery egy nagyon könnyű Javascript-könyvtár (egyesek keretrendszernek nevezik), amely enyhíti a Javascript-kód írása okozta fejfájást. Számos nagyon hatékony funkcióval rendelkezik, mint például a DOM követés, gyönyörű effektusok és animációk hozzáadása az elemekhez, szuper egyszerű Ajax technikák és módszerek. A jQuery oldal főoldalán véleményem szerint a legpontosabb leírás a következő:
A jQuery egy gyors és tömör könyvtár, amely leegyszerűsíti az eseménykezelést, az animációt és az Ajax interakciót a gyorsabb webfejlesztés érdekében. A jQuery célja a JavaScript írásmódjának megváltoztatása.
Mik a jQuery előnyei?
Nézzük meg röviden ennek a keretrendszernek az előnyeit és jellemzőit:
A kód (a szkript működéséhez szükséges) mennyisége jelentősen csökken a JavaScripthez képest, ami viszont kevesebb időt és olvashatóbb kódot jelent. Néhány példát a cikk későbbi részében tárgyalunk.
Sokkal könnyebben érthető a kód (ellentétben a JavaScripttel). Világunkban minél hamarabb fejezi be a programozási folyamatot, annál több időt tud más célokra fordítani.
Nagyon kényelmes dokumentáció és aktív közösség, mindig készen áll a segítségére, ha szükséges.
Az Ajax használata sokkal könnyebbé válik. Csak 5 sornyi kódra van szüksége (néha kevesebbre) egy egyszerű Ajax kérés létrehozásához.
Hatalmas számú plugin, amellyel szinte bármit megtehet.
A jQuery jó móka :)
Hogyan kezdjük?
Először is meg kell látogatnia kezdőlap jQuery hivatalos webhelyéről, és töltse le a keretrendszer legújabb verzióját. A letöltés után fel kell töltenie ezt a fájlt a tárhelyére, és a dokumentum fejlécébe be kell írnia a fájl linkjét.
Alternatív megoldásként használhatod a nagyszerű Google segítségét, és elhelyezhetsz egy linket a szerverükre, ahol mindig minden keretrendszer friss verziója található. A szükséges linket megtalálod.
Kész a dokumentum?
Az első jQuery szkriptünk végrehajtásához a teljes szkriptünket egy függvénybe kell helyeznünk. Ez a funkció akkor kerül végrehajtásra, amikor a DOM teljesen készen áll (amikor "a dokumentum készen áll" - szó szerinti fordítás angolból). Vegye figyelembe, hogy ez nagyon hasonlít a népszerű „onload” eseményre, de nem ugyanaz. Nézzünk egy példát:
$(dokumentum).ready(function()( //Kód itt ));
Fentebb azt mondjuk a jQuery-nek, hogy a DOM teljes készenléte után futtasson le bármilyen kódot egy függvényen belül, ennek megvannak az előnyei, bár ez sokak számára nem egyértelmű. Először is ezzel a technikával teljesen elválasztjuk a Javascriptet a HTML-től. Másodszor, nem kell megvárnunk az oldal teljes betöltését, elég a DOM betöltése.
Lusta kódolók, vagy azok számára, akiknek minden karaktere van, tovább rövidítheti a fenti kódot:
$(function()( //Kód itt ));
Az első jQuery szkript
Már tudjuk, hogyan kell hivatkozni a könyvtárra. A document.ready funkcióhoz is értünk egy kicsit. Itt az ideje megírni a legegyszerűbb forgatókönyvet.
Tegyük a lehető legegyszerűbbé. Mert ezt a példát, csináljunk egy oldalt némi szöveggel és egy idézettel a végén. Az árajánlatot csak akkor szeretnénk megjeleníteni, ha a felhasználó rákattint a gombra. Tekintse meg alább a szükséges kódot:
$(dokumentum).ready(function()(
var myQuote = $("#saját_idézet");
myQuote.hide();
$(.button").click(function()(
myIdézet.show(500);
});
});
Nézzük meg közelebbről a teljes kódot.
Ahogy fentebb említettük, az összes végrehajtandó kódot a $document.ready() függvénybe helyezzük.
Az idézetünk azonosítóját (my_quote) hozzárendeljük a myQuote változóhoz. Mostantól hozzáférünk az idézethez a my_quote azonosítóval.
Ez minden. Ha 0,5 másodpercig lenyomja a gombot, egy árajánlat jelenik meg. Nagyon könnyű, nem?
Folytatjuk....
Köszönöm a figyelmet! Minden jót!