A jQuery felhasználói felület a jQuery fejlesztőitől származó widgetek és beépülő modulok készlete. Véleményem szerint ezt az eszközt a szükséges mértékben tanulmányozni kell, hogy ne írjon saját „kerékpárokat”. Letöltheti és elolvashatja ezt a jQuery-kiegészítőt a projekt kezdőlapjáról - http://jqueryui.com/.

Mit kell tudnunk a widgetekről és a bővítményekről? Az első az, hogy mik ezek, a második pedig a működésük. Megpróbálok ezen a két ponton elidőzni.

Interaktivitás

Hasznos bővítményekkel kezdem, amelyek megkönnyítik az életet az interaktív felületek létrehozásakor:

• Húzható – ez a komponens lehetővé teszi, hogy bármely DOM elemet húzhatóvá tegye az egérrel
• A Droppable a Draggable komponens logikai kiterjesztése; szükséges a konténerekkel való munkavégzéshez, amelyekbe elemeket húzhat át
• Átméretezhető – ahogy a neve is sugallja, lehetővé teszi bármely DOM-elem átméretezését
• Választható – lehetővé teszi az elemek „kiválasztásának” megszervezését; kényelmesen használható képkezelés szervezéséhez
• Rendezés – DOM elemek rendezése

Widgetek

A widgetek már egy átfogó megoldás, amely nem csak JavaScript kódot tartalmaz, hanem a HTML és CSS néhány implementációját is:

Minden widget és beépülő modul a jQuery UI maghoz van kötve, de maguk a beépülő modulok között is vannak függőségek, és ezeket érdemes szem előtt tartani. De ne aggódj – a jQuery UI csomag összeállításakor minden függőséget automatikusan ellenőrzünk, pl. ha egy korábban nem csatlakoztatott widgetre van szüksége, jobb, ha újra letölti az összeállítást.

segédprogramok

Nem sok segédprogramunk van – itt van egy hasznos Position plugin, amivel szabályozhatod a DOM elemek pozícióját – http://jqueryui.com/position/, és van egy gyár a widgetek készítésére is, de majd beszélj róla egy kicsit később.

Hatások

A jQuery UI által nyújtott hatások közül négy pontot emelek ki:

• Színes animáció
• Osztályváltás animáció
• Hatások beállítva
• A könnyítési lehetőségek bővítése

Az „Effects Core” komponens felelős a színanimációért, amely lehetővé teszi a színváltozások animálását az „.animate()” függvény használatával:

$("#saját" ).animate(( backgroundColor: "black" ), 1000 );

Igen, igen, az alap jQuery nem tudja ezt megtenni, de a jQuery UI lehetővé teszi a következő paraméterek animálását:

• háttérszín
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• szín
• outlineColor

Az „Effects Core” egy másik funkciója a DOM-elem osztályában bekövetkezett változások animációja, pl. Amikor új osztályt rendel egy elemhez, az új CSS tulajdonságok szokásos azonnali alkalmazása helyett ezeknek a tulajdonságoknak az animációja jelenik meg a jelenlegitől a hozzárendelt osztályban megadottakig. A funkció használatához régi barátokra lesz szükségünk - az „.addClass()”, „.toggleClass()” és „.removeClass()” metódusokra, egyetlen különbséggel - a metódus hívásakor meg kell adni az animáció sebességét második paraméterként:

$("#saját" ).addClass("aktív" , 1000 ); $("#saját" ).toggleClass("aktív" , 1000 ); $("#saját" ).removeClass("aktív" , 1000 );

Ha az előző bekezdésből nem érti, mi történik, akkor ez a kód az Ön számára:

#my ( font-size :14px ; ) #my .active ( font-size :20px ; ) $(function () ( $("#my" ).addClass("active" , 1000 ); // itt fordul ugyanígy ki a következő hívásból $("#my" ).animate(("font-size" :"20px" ), 1000 ); ));

Létezik egy „.switchClass()” metódus is, amely az egyik osztályt egy másikra cseréli, de soha nem találtam hasznosnak.

Nem fogok sokáig beszélni az effektusokról; jobb, ha működés közben látod őket a http://jqueryui.com/effect/ oldalon. Az effektusokkal való munkához megjelenik a „.effect()” metódus, de jobb, ha nem használja önmagában, mert a felhasználói felület kibővítette a „.show()”, „.hide(” beépített metódusok funkcionalitását. )” és „.toggle()”. Most, ha átadja az effektus nevét az animációs sebesség paraméterként, megkapja a kívánt eredményt:

$("#saját" ).hide("puff" ); $("#saját" ).show("transfer" ); $("#saját" ).toggle("robban" );

Adok egy listát az effektekről, hátha valakinek eszébe jut: vak, ugrál, klip, leejtés, felrobban, hajt, kiemel, puff, lüktet, skáláz, shake, size, slide, transfer.

Ha bármikor módosítania kell a témát, nyissa meg a „jquery-ui-#.#.##-custom.css” fájlt, és keresse meg a következő sort: „A téma megtekintéséhez és módosításához, látogassa meg a http:... " Kövesse a kapott hivatkozást, és a ThemeRoller használatával hajtsa végre a szükséges módosításokat.

Saját widgetet írunk

A jQuery UI widget írásakor a kiindulópont a hivatalos dokumentáció lesz, de mivel nem mindenki rendelkezik jó angol nyelvtudással, megpróbálom lefordítani és adaptálni az abban közölt információkat.

Az első dolog, amiről érdemes beszélni, az az, hogy a jQuery beépülő moduljainak írási szabályai túlságosan impozánsak, ami nem járul hozzá a minőségükhöz. A jQuery UI létrehozásakor úgy döntöttünk, hogy szabványosítjuk a bővítmények és widgetek írási folyamatát. Nem tudom megmondani, mennyire volt sikeres az ötlet, de egyértelműen jobb volt, mint volt. Azzal kezdem, hogy leírom a widget keretrendszerét:

$.widget("book.expose" , ( // alapértelmezett beállítások: ( szín: "piros" ), // widget inicializálása // módosítsa a DOM-ot és csatolja a kezelőket _create: function () ( ez a .elem; / / a keresett objektum a jQuery burkolójában ez .name; // név - felteszi ezt a .névteret; // szóköz - .elem.on("click." +this .eventNamespace, function () ( konzol kattintson a " ); )); ), // a metódus felelős a beállítások alkalmazásáért _setOption: function ( kulcs, érték ) ( // változtatások alkalmazása a beállításokra this ._super("_setOption" , kulcs, érték); ), // a _destroy metódus a _create ellentéte // el kell távolítania a DOM-on végrehajtott összes módosítást, és el kell távolítania az összes kezelőt, ha van ilyen, _destroy: function () ( this .element.off("." +this .eventNamespace) ;) ));

Hadd magyarázzam el azoknak, akik nem olvasták a kommenteket:

opciók – egy adott elem widget-beállításainak tárolása

Create() – a widget inicializálásáért felelős – itt változások történnek a DOM-ban, és az eseménykezelőket „le kell függeszteni”

A Destroy() a „_create()” antipódja – mindent meg kell tisztítania, amit szemeteltünk

SetOption(kulcs, érték) – ez a metódus kerül meghívásra, amikor megpróbálja megváltoztatni a beállításokat:

$("#saját" ).expose((kulcs:érték))

A figyelmes szem észreveszi, hogy a felsorolt ​​módszerek mindegyike aláhúzással kezdődik – ez egy módja annak, hogy kiemelje azokat a „privát” módszereket, amelyek végrehajtása nem elérhető. Ha megpróbáljuk futtatni a "$("#my").expose("_destroy") parancsot, hibaüzenetet kapunk. De ne feledje – ez csak egy megállapodás, tartsa be!

Az adatvédelmi megállapodás megkerüléséhez használhatja a „data()” metódust:

$("#my" ).data("expose" )._destroy() // a smiley "(gonosz)" helye

Ebben a példában megpróbáltam jó hangot adni a widgetek írásának – eseménykezelőket „akasztottam” a névtérbe. Ez lehetőséget ad arra, hogy szabályozza, mi történik a jövőben anélkül, hogy bele kellene mennie a widget kódjába. "Igaz sztori".

A „_destroy()” metódusban leírt kód redundáns, mert már kivégezték a nyilvános „destroy()”-ban. Az egyértelműség kedvéért itt mutatjuk be.

A lusták számára pedig, hogy ne írják minden alkalommal az eseménykezelőbe az „eventNamespace” kifejezést, a fejlesztők két metódussal egészítették ki az 1.9.0-s verziót: „_on()” és „_off()”. Az első két paramétert vesz igénybe:

• DOM elem vagy szelektor vagy jQuery objektum
• eseménykezelők halmaza objektumként

Az összes felsorolt ​​esemény az „eventNamespace” mezőben „lóg”, azaz. az eredmény valószínűleg ugyanaz lesz:

this ._on(this .element, ( mouseover:function (event ) ( console .log("Hello mouse" ); ), mouseout:function (event ) ( console .log("Bye mouse" ); ) ));

A második módszer, az "_off()", lehetővé teszi a kezelők szelektív letiltását:

this ._off(this .element, "mouseout click" );

Nos, a keret egy longboat, ideje továbblépni a funkcionalitás felé. Adjunk hozzá egy tetszőleges függvényt tetszőleges funkcionalitással:

CallMe:function () ( console .log("Hello?" ); )

Ezt a funkciót könnyen elérhetjük más widget metódusokból és kívülről is:

// a .callMe() belsejéből // kívülről $("#my" ).expose("callMe" )

Ha a függvény paramétereket vesz fel, akkor azok a következő módon kerülnek átadásra:

$("#my" ).expose("callMe" , "Hello!")

Ha egy widget metódust szeretne elérni az eseménykezelőben, akkor ne feledkezzen meg a változó hatóköréről, és tegye a következő manővert:

( _create: function () ( var self = this ; // itt van! this .element.on("click." +this .eventNamespace, function () () ( // használd itt a self-t, mert ez már a // elem, amelyre rákattintunk self.callMe(); )) ) )

Oké, menjünk, most beszéljünk az eseményekről. A widgetek rugalmasabb fejlesztéséhez és megvalósításához funkcionalitás biztosított tetszőleges események létrehozásához és azok „meghallgatásához”:

// az esemény kiváltása ez ._trigger("incomingCall" ); // feliratkozás az eseményre a widget inicializálásakor $("#my" ).expose(( incommingCall: function (ev ) ( console .log("din-don" ); ) )) // vagy utána, a esemény neve // ​​widget neve + esemény neve $("#my" ).on("exposeincomingCall" , function () ( console .log("tru-lya-lya" ) ));

Nagyon sok anyag van, értem, de adok hozzá több olyan módszer leírását is, amelyek magából a widgetből hívhatók:

Delay() – ez a függvény úgy működik, mint a „setTimeout()”, csak az átadott függvény kontextusa mutat magára a widgetre (ez azért van, hogy ne zavarjuk a hatókört)

Hoverable() és _focusable() – ezeket a metódusokat olyan elemekkel kell táplálni, amelyeknél figyelni kell a „hover” és „focus” eseményeket, hogy automatikusan hozzáadjuk az „ui-state-hover” és „ui-state” -fókusz” osztályok, amikor ezek előfordulnak

Hide() és _show() – ez a két metódus az 1.9.0-s verzióban jelent meg, azért jöttek létre, hogy szabványosítsák a widgetek viselkedését animációs módszerek használatakor; A beállítások általában el vannak rejtve az „elrejtés” és a „megjelenítés” gombok alatti opciókban. A módszereket a következőképpen kell alkalmazni:

( opciók: ( elrejtése: ( hatás: "slideDown" , // a beállítások megegyeznek a hívás időtartamával: 500 // .slideDown(500) ) ) ) // a _hide() és _show() hívásait a widgeten belül kell használni this ._hide(this .element, this .options.hide, function () ( // ez a visszahívási függvény konzolunk .log("hidden" ); ));

Van még néhány módszer, amelyet előttünk alkalmaztak:

( enable: function () ( return this ._setOption("disabled" , false ); ), disable: function () ( return this ._setOption("disabled" , true ); ) )

Valójában ezek a függvények szinonimát hoznak létre a híváshoz:

$("#my" ).expose(( "letiltva" : igaz )) // vagy false

A feladatunk egyszerűen az, hogy követjük ezt a jelzőt a „_setOption()” metódusban.

A jQuery UI könyvtár bemutatása felhasználói felületek létrehozásához. Rövid útmutató kezdőknek.

Mi az a jQuery UI?

jQuery UI (angol nyelvről) jQuery felhasználói felület) egy widget és interakciós könyvtár, amely a jQuery JavaScript könyvtár tetejére épült, és amely rendkívül interaktív webalkalmazások létrehozására használható.

A jQuery UI könyvtár képességeinek vizuális megismeréséhez látogasson el a következő oldalra: Demos & Documentation - a webhelyen jqueryui.com.

Most, hogy megértette, mi a jQuery felhasználói felület, elkezdheti kiválasztani a betöltéshez szükséges összetevőket: UI Core (a felhasználói felület fő funkciói), interakciók (interakciók), widgetek (widgetek), effektusok (effektusok) és téma (tervezési témák). - ezzel létrehozva saját másolatot a jQuery UI könyvtárból. Ehhez látogasson el a következő oldalra: Build Your Download. Innen gyorsan letöltheti a jQuery UI könyvtár legújabb stabil vagy örökölt verzióját.

A letöltött jQuery UI könyvtár ZIP archívuma a következőket tartalmazza:

A jQuery UI könyvtár csatlakoztatásához általában elegendő három hivatkozás: UI téma CSS, jQuery könyvtár és jQuery UI. Így nézhet ki:

Miután hozzáadta a szükséges fájlokat, elkezdheti hozzáadni a szükséges widgeteket az oldalához. Például egy DatePicker létrehozásához (angol nyelvből. dátum kiválasztása, adjon hozzá egy szövegdobozt:

És JavaScript kód is:

$(függvény())( $("#dátum").datepicker(; ));

A fenti példát értelmező böngésző eredménye így fog kinézni:

A jQuery felhasználói felület beállítása

A jQuery felhasználói felület többféleképpen testreszabható. Már tudja, hogyan töltheti be a jQuery UI könyvtár másolatát a szükséges összetevőkkel, de vannak más lehetőségek is a kód testreszabására a megvalósításhoz.

Opciók használata. A jQuery felhasználói felület minden összetevője számos alapértelmezett beállítással rendelkezik. Ugyanakkor bármikor módosíthatja őket az „opció” használatával (angol nyelvről. választási lehetőség), átadja a szükséges értéket a komponensnek.

Például a DatePicker widget dátumformátumának beállításához használhatja a következő lehetőséget: dateFormat.

$("#dátum").datepicker(( dátumFormátum: "éé-hh-nn" ));

Az opció értékét a widget elindítása után az alábbiak szerint kaphatja meg:

var dateFormat = $("#dátum").datepicker("opció", "dateFormat");

Az opció értékét a widget elindítása után az alábbiak szerint adhatja meg:

$("#dátum").datepicker("opció", "dátumformátum", "éé-hh-nn");

Vizuális testreszabás. A saját téma testreszabásához a jQuery UI tartalmazza a ThemeRollert, amely lehetővé teszi a felület összetevőinek vizuális testreszabását. Használhatja és többet megtudhat erről az eszközről, ha ellátogat a következő oldalra:

A jQuery UI könyvtár telepítése

A jQuery UI könyvtár letöltése és telepítése bizonyos szempontból nehezebb, mint a többi JavaScript-könyvtár. Ez a folyamat nem éppen munkaigényes, de magyarázatot igényel, ennek a cikknek szenteljük. A példákon való átdolgozáshoz csak a könyvtár fejlesztői verzióját kell telepítenie, de a következőkben azt is leírjuk, hogyan kell telepíteni az éles üzembe helyezést célzó minimált fájlokat, és hogyan kell használni a jQuery felhasználói felületet tartalomelosztó hálózatokon (CDN) keresztül.

A jQuery UI könyvtár beszerzése

A jQuery UI könyvtár betöltési folyamata kicsit bonyolultabb, mint a többi JavaScript-könyvtár, de az eredmény megéri az erőfeszítést. A jQuery felhasználói felület könyvtára öt funkcionalitási területet fed le, és Önnek lehetősége van saját maga konfigurálni a rendszerindító archívumot, amely csak a szükséges összetevőket tartalmazza. Ez a rész bemutatja a jQuery UI könyvtár összes funkcióját, de valódi webalkalmazásokkal való munka során kiküszöbölheti a felesleges összetevőket, hogy csökkentse a böngészők által betöltött könyvtár méretét.

Téma kiválasztása

Mielőtt elkezdené saját jQuery UI-könyvtárát létrehozni, ki kell választania egy témát. A jQuery felhasználói felület könyvtára opciók és konfigurációs lehetőségek tárházát kínálja, így könnyen módosítható bármely használt eszköz megjelenése. Valójában a rendelkezésre álló választási lehetőségek száma olyan nagy, hogy néha valóban elsöprő.

A jQuery UI weboldalon egy speciális alkalmazás - egy téma-testreszabó (Themeroller) - szolgáltatásait veheti igénybe, de ezen kívül van egy teljes galéria előre definiált, teljesen használatra kész témákból, amelyek közül kiválaszthatja a megfelelőt. a legtöbbet, és ezáltal megkönnyíti az életét.

Először keresse fel a jqueryui.com webhelyet, és kattintson a Témák gombra. Ezzel megnyílik a ThemeRoller oldal, ahol megjelennek a jQuery UI widgetek, és balra egy beállítási panel, amivel az ábrán látható módon beállíthatja a téma opcióit:

Ha már rendelkezik egy adott vizuális stílussal, amelyet be kell tartania, és azt szeretné, hogy a JQuery felhasználói felület eszközeinek vizuális felülete konzisztens legyen a webhely vagy alkalmazás többi részével, akkor a Roll Your Own lapot (amely alapértelmezés szerint ki van választva ) csak az. kell. A jQuery felhasználói felület könyvtára által használt CSS-stíluskészlet segítségével a tervezés bármely aspektusát módosíthatja.

Az egyik kész téma eléréséhez lépjen a Galéria lapra. A cikk írásakor a galéria 24 témát tartalmaz, amelyek széles színválasztékot fednek le – a tompa és finom tónusoktól a világos és provokatív tónusokig. Ahogy a galéria témáira kattint, az oldal többi részén megjelenő widgetek megjelenése ennek megfelelően frissül, így ízelítőt kaphat az alkalmazás kinézetéből:

A jQuery felhasználói felülethez használt alapértelmezett témát UI világosságnak hívják, de ennek a témának nincs elég kontrasztja, ezért a Sunny témát használom, ami kicsit jobban néz ki. Az egyetlen dolog, amit most megkövetelnek Öntől, az az, hogy emlékezzen az Ön számára megfelelő téma nevére.

Egyéni jQuery UI könyvtár letöltési archívum létrehozása

Miután kiválasztotta a témát, elkezdheti létrehozni saját jQuery UI könyvtárának letöltését. Kattintson a Letöltés gombra az oldal tetején a Download Builder oldal eléréséhez. Megjelenik a jQuery felhasználói felület összetevőinek listája négy funkcionális csoportra osztva: UI Core, Interactions, Widgets és Effects.

Ha csak azokat a szolgáltatásokat választja ki, amelyekre a projektnek ténylegesen szüksége van, csökkenti a böngészőknek letöltendő fájlok méretét. Ez önmagában nem rossz ötlet, de én más megközelítést alkalmazok. Az én nézőpontom szerint sokkal jobb, ha megtakarít egy kis kommunikációs sávszélességet, és átterheli a jQuery UI böngészőkhöz való eljuttatását az egyik tartalomelosztó hálózatra, amelyről később lesz szó.

A példák futtatásához minden összetevőre szüksége lesz, ezért győződjön meg arról, hogy az összes négyzet be van jelölve.

A listában szereplő egyes összetevők között vannak függőségek, de előfordulhat, hogy nem gondol erre, amikor létrehozza a saját könyvtár verzióját. Ha kiválaszt egy összetevőt, akkor az összes összetevő, amelytől függ, egyszerre töltődik be.

A következő lépés a téma kiválasztása. Ez az oldal alján található legördülő lista segítségével történik, az ábrán látható módon:

Lehetősége van arra is, hogy a jQuery UI-könyvtár egy adott verzióját bevegye a letöltési archívumba. Le kell töltenie a stabil verziót, amely a jQuery könyvtár összes verziójával működik az 1.3.2-es verziótól kezdve.

Az összes összetevő kiválasztása, valamint a téma és a stabil verzió kiválasztása után töltse le az egyéni jQuery UI könyvtár letöltési archívumot, amelyet a Letöltés gombra kattintva hozott létre.

A jQuery UI könyvtár fejlesztői verziójának telepítése

A jQuery felhasználói felület letöltése tartalmazza az összes fájlt, amely a könyvtár fejlesztési és éles használatához szükséges. A példákkal való munkához olyan fájlokra lesz szükség, amelyek tömörítetlen forráskódot tartalmaznak, és a fejlesztés során használhatók. Ha bármilyen problémába ütközik, könnyen megvizsgálhatja a kódot, hogy megismerkedjen a jQuery UI könyvtár belső elemeivel, amelyek felbecsülhetetlen értékűek lesznek a szkriptek hibakeresésében.

Másolja át a következő fájlokat és mappákat a példafájlok mappájába:

development-bundle\ui\jquery-ui.custom.js;

development-bundle\themes\sunny\jquery-ui.css;

mappa development-bundle\themes\sunny\images.

A JavaScript- és CSS-fájlok neve tartalmazza a letöltött könyvtári kiadás verziószámát. Az én esetemben ez az 1.10.3 verzió. A jQuery UI könyvtár aktív fejlesztés alatt áll, és előfordulhat, hogy letölthet egy újabb, mint 1.10.3-at.

A jQuery UI könyvtár csatlakoztatása HTML dokumentumhoz

Mindössze annyit kell tennie, hogy belefoglalja a jQuery UI könyvtárat a HTML-dokumentumba. Ezt úgy teheti meg, hogy szkriptet és linkelemeket ad hozzá a dokumentumhoz, amelyek az Ön által feltöltött JavaScript- és CSS-fájlokra mutató hivatkozásokat tartalmaznak, az alábbi példában látható módon:

jQuery könyvtár

Nem szükséges közvetlenül a képek mappához kapcsolódni. Amíg a képek mappa és a CSS fájl a helyén van, a jQuery UI képes lesz önállóan megtalálni az összes szükséges erőforrást.

A jQuery felhasználói felület könyvtára a jQuery könyvtártól függ. A jQuery UI dokumentumban való használatához először csatlakoznia kell ahhoz. A jQuery felhasználói felület könyvtára nem önálló könyvtár.

A fenti példában látható dokumentum egy egyszerű tesztet tartalmaz annak ellenőrzésére, hogy a jQuery UI könyvtár megfelelően van-e benne. Ha az oldal normálisan nyílik meg, akkor az ábrán láthatóhoz hasonló gombot kell látnia. Egyelőre figyelmen kívül hagyja a script elem button() metódusának hívását. A következő cikkből megtudhatja, mire való és hogyan működik.

Ha elgépeli a két könyvtár valamelyikének elérési útját, egy egyszerű hivatkozást fog látni helyette.

A jQuery UI könyvtár telepítése éles környezethez

Miután befejezte a webalkalmazás fejlesztését, és készen áll a telepítésre, használhatja a letöltési archívumban található fájlok kicsinyített verzióit. Ezek a fájlok kisebb méretűek, de tartalmuk nem lesz könnyen olvasható, ha hibakeresési célból szükséges. A fájlok központi telepítési verzióinak használatához másolja a következő fájlokat és mappákat a webkiszolgáló könyvtárába:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

mappa css\sunny\images

A képek mappa és a CSS fájl itt ugyanaz, mint a fejlesztői verzióban; a változtatások csak a JavaScript fájlt érinthetik. A tiszta telepítés végrehajtásához egyszerűen másolja ezeket a fájlokat a kiszolgáló könyvtárába.

A jQuery UI könyvtár használata tartalomelosztó hálózaton keresztül

A CDN használatával a jQuery könyvtár betöltéséhez már korábban is foglalkoztunk. Ha rajongója ennek a megközelítésnek, akkor örömmel fogja tudni, hogy ugyanezt megteheti a jQuery UI könyvtárral. Mind a Google, mind a Microsoft biztosítja a jQuery UI-fájlok tárolását CDN-jén. Alappéldánkban a Microsoft szolgáltatását használom, mert az egyaránt biztosít jQuery UI JavaScript fájlokat és szabványos felszíneket.

A CDN használatához rendelkeznie kell a szükséges fájlok URL-címével. Ha ez egy Microsoft szolgáltatás, lépjen a Microsoft Ajax Content Delivery Network oldalára. Ahogy lefelé görget az oldalon, megjelenik a jQuery UI különböző verzióihoz tartozó hivatkozások listája. Kattintson az Ön által használt verzió hivatkozására (esetemben ez az 1.10.3 verzió). Látni fogja a jQuery UI könyvtárfájl normál és kicsinyített verzióinak URL-címeit.

Az oldal többi része előre elkészített témákat jelenít meg, az egyes témák alatt egy CSS-fájl URL-lel.

Ha ezeket a fájlokat CDN-n keresztül szeretné csatlakoztatni a dokumentumhoz, egyszerűen helyezze el a szkriptet és a hivatkozási elemeket a megfelelő URL-ekbe, ahelyett, hogy a helyi jQuery UI-fájlokra mutató hivatkozásokat mutatna, amint az az alábbi példában látható:

jQuery könyvtár $(function() ( $("a").button(); )); Látogassa meg a www.professorweb.ru webhelyet

Az URL-címek helyes megadásának jele ismét egy gomb megjelenítése a megnyíló oldalon, hasonlóan a fenti ábrán láthatóhoz.

A jquery csatlakoztatásakor minden egyszerű. 2 lehetőség van:
• Offline munkavégzéshez töltse le magát a fájlt a jQuery könyvtárral, és csatlakoztassa
• Az online munkavégzéshez gyorsan csatlakoztassa a jQueryt a Google vagy a Microsoft adattárából egyetlen kódsor segítségével

Mindegyik lehetőségnek megvannak a maga előnyei és hátrányai. Nézzük meg őket közelebbről.

A jquery csatlakoztatása a Google-on vagy a Microsofton keresztül

A jquery legújabb verziójának a Google-on keresztüli csatlakoztatásához hozzá kell adnia egy kódsort

– minden rendkívül gyors és kényelmes:

A pontos verzió (jelen esetben 1.11.0) csatlakoztatásához:

Mindig láthatja a legújabb verzió pontos számát, majd csak módosítsa ezeket a számokat a kódban, és minden működni fog.

A jquery Microsofton keresztüli csatlakoztatásához adja hozzá a kódot:

A Google-lal való kapcsolat azért jó, mert sok webhely ugyanúgy csatlakozik a jQuery-hez – a Google API-n keresztül történik, és mindig nagy a valószínűsége annak, hogy ez a könyvtár már be van töltve a felhasználó böngészőjének gyorsítótárába, és nem töltődik be másodszor.

A jquery csatlakoztatása egy fájl letöltésével a könyvtárral

A jQuery-t a weboldalunk oldaláról kapcsoljuk be - hosszabb ideig tart, de megbízhatóbb. Ehhez szüksége van:
töltse le a jquery könyvtárat a hivatalos webhelyről, mentse el egy fájlba, nevezzük jquery-1.11.0.min.js-nek, helyezze el a webhelyünk js mappájába, és adja hozzá a következő kódot

:

Az src azt az elérési utat adja meg, ahol a jquery fájlunk található, amelyet a webhely oldalához kell kapcsolni.

Végül pedig a legmegbízhatóbb és páncéltörő lehetőség a Google-lal való kapcsolatfelvétel; ha a Google nem elérhető, csatlakozzon a webhelyéről:

if (a jQuery típusa == "meghatározatlan") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script% 3E"));)

Vagy a legmodernebb lehetőség - regisztrálunk

A következő kód: google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); függvény jQueryIsLoaded() ( alert("jQuery a Google-tól betöltve"); ) if (jQuery típusa == "undefined") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min. js" type="text/javascript"%3E%3C/script%3E")); )

A szerzőtől: Üdvözlet, barátok. Ebben a cikkben elkezdjük megismerkedni a jQuery UI könyvtárral, amely lehetővé teszi számos érdekes kész megoldás megvalósítását webhelyén: naptár, harmonika, élő keresés, gyönyörű animációs effektusok és még sok más. Ebben a cikkben megtudjuk, hogyan töltheti le és csatlakoztathatja a jQuery UI könyvtárat.

Tehát miért van szükségünk a jQuery UI könyvtárra? Valójában akkor miért fordulunk harmadik féltől származó beépülő modulokhoz - hogy kész megoldásokat telepítsünk és használjunk a webhelyen. De a jQuery UI könyvtár egy átfogó megoldás, pl. itt nem csak egy dolgot talál, hanem egy egész csomag widgetet, effektust és bővítményt a különféle eseményekkel való munkához.

Letöltheti a teljes csomagot, vagy kiválaszthat egy vagy több widgetet. A jQuery UI könyvtárában két tucat téma található szinte minden ízléshez. Ez is jelentős plusz.

Térjünk át a szavakról a tettekre: töltsük le és telepítsük a jQuery UI könyvtárat. Menjünk a hivatalos webhelyre, és lapozzunk a Letöltés részhez. Itt tudjuk kiválasztani a letöltendő összetevőket és a témát.

JavaScript. Gyors kezdés

Tanulja meg a JavaScript alapjait a webalkalmazások létrehozásának gyakorlati példáján keresztül.

Az oldal alján található legördülő listából választhat egy témát.

Ha szeretné, saját témáját is megtervezheti saját tervezésével, ehhez kattintson az egyedi téma tervezése hivatkozásra, amely közvetlenül a legördülő lista felett található. A megnyíló oldalon módosíthatjuk a betűtípusokat, színeket és az elemek egyéb kialakítását, online figyelve a változásokat, általában saját témát tervezhetünk.

De térjünk vissza az előző oldalra, és töltsük le a jQuery UI könyvtár összes összetevőjét Base témával.

Az így kapott archívumban szükségünk lesz egy stílusfájlra (jquery-ui.css) és egy szkriptfájlra (jquery-ui.js). Mindkét fájl normál és tömörített változatban is elérhető, így bármelyiket választhatja. Nos, természetesen szükség lesz a jQuery könyvtárra, a Google szolgáltatásból az 1.11.3-as verziót csatlakoztatom.

Ennek eredményeként az összes kapcsolatot tartalmazó oldal így fog kinézni:

< link rel = "stylesheet" href = "ui/jquery-ui.css" >