JQuery багцад ороогүй болно. jQuery UI номын санг суулгаж байна jQuery-г Google эсвэл Microsoft-оор холбож байна

Офлайн ажиллахын тулд файлаа өөрөө jQuery номын сангаар татаж аваад холбоно уу
Онлайнаар ажиллахын тулд Google эсвэл Microsoft репозитороос jQuery-г нэг мөр кодоор хурдан холбоно уу

Сонголт бүр өөрийн давуу болон сул талуудтай. Тэднийг илүү нарийвчлан авч үзье.

Google эсвэл Microsoft-оор дамжуулан jQuery-г холбож байна

Google-ээр дамжуулан jQuery-ийн хамгийн сүүлийн хувилбарыг холбохын тулд дотор нь нэг мөр код нэмэх шаардлагатай

- бүх зүйл маш хурдан бөгөөд тохиромжтой:

Яг хувилбарыг холбохын тулд (энэ тохиолдолд 1.11.0):

Та хамгийн сүүлийн үеийн хувилбарын яг дугаарыг үргэлж харж болно, дараа нь код дээрх эдгээр дугаарыг өөрчлөхөд л бүх зүйл ажиллах болно.

Microsoft-оор jQuery-г холбохын тулд дараах кодыг нэмнэ үү.

Google-тэй холбогдох нь сайн хэрэг, учир нь олон сайтууд jQuery-г ижил аргаар холбодог - энэ нь Google API-ээр дамждаг бөгөөд энэ номын сан нь хэрэглэгчийн хөтчийн кэшэд аль хэдийн ачаалагдсан бөгөөд хоёр дахь удаагаа ачаалагдахгүй байх магадлал үргэлж өндөр байдаг.

Номын сантай файл татаж авах замаар jQuery-г холбож байна

Бид jQuery-г вэбсайтынхаа хуудаснаас холбодог - энэ нь удаан хугацаа шаардагдах боловч илүү найдвартай. Үүнийг хийхийн тулд танд хэрэгтэй:
jquery номын санг албан ёсны вэб сайтаас татаж аваад файлд хадгалаад jquery-1.11.0.min.js гэж нэрлээд манай вэб сайтын js хавтсанд хийгээд дараах кодыг нэмнэ үү.

src нь манай jQuery файл хаана байрлаж байгаа замыг зааж өгдөг бөгөөд энэ нь сайтын хуудсанд холбогдох шаардлагатай.

Эцэст нь хэлэхэд, хамгийн найдвартай бөгөөд хуяг цоолох сонголт бол Google-тэй холбогдох явдал юм; хэрвээ Google байхгүй бол вэбсайтаасаа холбогдоно уу:

хэрэв (jQuery-ийн төрөл == "тодорхойгүй") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script% 3E"); )

Эсвэл хамгийн орчин үеийн сонголт - бид бүртгүүлнэ үү

Дараах код: google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); функц jQueryIsLoaded() ( alert("Google-ээс jQuery ачаалагдсан"); ) if (jQuery-ийн төрөл == "тодорхойгүй") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min. js" type="text/javascript"%3E%3C/script%3E"); )

Сүүлийн шинэчлэлт: 2015/11/1

jQuery хүрээ нь DOM элементүүдийг удирдах, AJAX хүсэлт илгээх боломжийг олгодог төдийгүй виджет ашиглан хэрэглэгчийн интерфэйсийг бий болгох сайн хэрэгслээр хангадаг. Тусгай jQuery UI номын сан нь интерфэйстэй ажиллахад зориулагдсан.

jQuery UI номын санг үндсэн jQuery номын сангаас тусад нь татаж авдаг: үүнийг https://jqueryui.com/download/ хаягаас олж болно. Хуудасны доод талд байгаа энэ хаяг дээр та номын сангийн сэдвүүдийн жагсаалтыг харж болно. Сэдвүүд нь ашигласан бүрэлдэхүүн хэсгүүдийн дизайнд нөлөөлдөг. Гэхдээ ажлын эхэнд сэдвийг сонгох нь тийм ч чухал биш тул та стандарт UI хөнгөн сэдвийг орхиж болно. Мөн татан авалтын хуудсан дээр та татаж авах талаар дэлгэрэнгүй бичиж болно - татаж авсан багцад юу багтах вэ, гэхдээ та бүх үндсэн тохиргоог орхиж, хуудасны доод талд байгаа "Татаж авах" товчийг дарж татаж авах боломжтой.

Та CDN сүлжээг ашиглаж болно, учир нь номын сан нэлээд алдартай тул олон CDN-д байдаг.

Багцыг задалцгаая. Энэ нь jQueryUI татаж авах хуудсан дээр бидний сонгосон бүх сонголтуудыг багтаасан хэд хэдэн хавтас, файлуудыг агуулна.

Мөн файл индекс.html, jQueryUI номын сангаас виджет болон логик ашиглах жишээг агуулсан. Хэрэв бид энэ файлыг текст засварлагчаар нээх юм бол энэ нь бидний сонгосон сэдэв, jQuery номын сан болон jQuery UI номын сантай холбогдож байгааг харах болно. jQuery-ui загварын файлыг файлын эхэнд оруулах болно:

Файлын төгсгөлд jQuery номын сан болон jQuery UI номын сан багтах болно:

Ер нь jQuery-ийн боломжуудыг ашиглахын тулд бид эдгээр гурван файлыг html хуудсандаа оруулах хэрэгтэй болно. Тэдгээрийг албан ёсны вэбсайтаас татаж авсан багц эсвэл CDN сүлжээнээс холбож болно

Татаж авсан багцаас эхлээд номын сангаа холбоно. Үүнийг хийхийн тулд задалсан багц дотор дараах html хуудсыг үүсгэ.

Сайн уу

$(функц())( $("a").товчлуур().товчлоорой(функц())(анхаарал("Сайн уу jQuery UI");)); ));

Мөн Microsft-ийн CDN-ээс татаж авцгаая:

jQuery номын сантай ажиллаж эхлэхэд хамгийн түрүүнд гарч ирдэг асуулт бол түүнийг хэрхэн холбох вэ? Би энэ талаар урьд өмнө бичээгүй байсан нь хачирхалтай бөгөөд одоо энэ орон зайг нөхөхөөр шийдсэн юм.

Энэ нийтлэлд би ердийн html вэбсайт болон алдартай хөдөлгүүр дээр jQuery-г хэрхэн зөв нэмэх талаар танд хэлэх болно.

Таны вэбсайтын хуудаснаас jQuery-г холбож байна

Номын санг холбох хамгийн түгээмэл арга. Эхлээд та хөгжүүлэгчийн вэбсайтаас хамгийн сүүлийн хувилбарыг татаж авах хэрэгтэй. Татаж авах хуудас нь номын сангийн хэд хэдэн сонголтыг танилцуулж байна, жишээлбэл, одоо "Шахсан, үйлдвэрлэлийн jQuery 3.1.1" болон "Шахжаагүй, хөгжүүлэлтийн jQuery 3.1.1" татаж авахыг санал болгож байна. Эхний сонголт бол номын сангийн шахсан хувилбар бөгөөд үүнээс бүх тайлбарыг устгасан бөгөөд энэ тохиолдолд номын сан бага зай эзэлдэг тул холбогдох хуудас илүү хурдан ачаалах болно. Хоёрдахь сонголт бол номын сангийн эх код бөгөөд тайлбар бүхий уншихад хялбар хэлбэрээр хийгдсэн бөгөөд үндсэндээ хөгжүүлэгчдэд зориулагдсан болно. Тиймээс би номын сангийн шахсан хувилбарыг ашиглахыг зөвлөж байна.

Номын санг татаж авсны дараа та үүнийг сайтын файлууд байрладаг сервер дээр байрлуулах хэрэгтэй. Би ихэвчлэн сайтын үндсэн хэсэгт "js" хавтас үүсгэж, шаардлагатай сангуудыг хуулж, тэнд өөрийн функцтэй файлыг байрлуулдаг.

Одоо та jQuery холболт руу шууд очиж болно. Таны jQuery-г холбосон вэб хуудасны бүтэц өөр байж болно. Гэхдээ энэ нь HTML, HEAD, BODY хаягуудыг агуулсан байх ёстой. Тиймээс jQuery-г холбохын тулд та HEAD таг доторх номын сан руу холбоос бүхий SCRIPT тагийг нэмэх хэрэгтэй.

Сайтын гарчиг

Зарим тохиолдолд номын сан нь хөтчийн HTML хуудсыг боловсруулах дараалалтай холбоотой хаалтын үндсэн тагны өмнө багтдаг. Хөтөч нь мөрүүдийг дараалан уншдаг тул файлын төгсгөлд jQuery-г холбох үед хөтөч эхлээд сайтыг харуулах бөгөөд дараа нь динамикийг холбох болно. Удаан холболттой бол энэ арга нь сайтыг ачаалах хурдыг нэмэгдүүлэх боломжийг олгодог бөгөөд зөвхөн дараа нь гулсагч болон бусад хүмүүсийн ажлыг гүйцэтгэдэг. Энэ холболтын код дараах байдалтай байна.

Сайтын гарчиг

Анхаар! jQuery номын сангийн файлын нэрийг (ихэвчлэн jquery.js болгон өөрчилдөг) өөрчлөхгүй байхыг зөвлөж байна, учир нь ирээдүйд албан ёсны файлын нэрийг хадгалах нь номын сангийн аль хувилбарыг ашиглаж байгааг харахад тусална (миний жишээнд, хувилбар 3.1). .1 ашиглаж байна).

jQuery-г гадаад эх сурвалжаас вэбсайтын хуудсуудтай холбож байна

Номын сан нь вэб сайтаас холбогдсон бөгөөд таны хатуу диск дээр хэвтээгүй тул энэ арга нь сайн хэрэг юм. Энэ нь ялангуяа олон тооны жижиг төслүүд болон сургалтын хувьд үнэн юм.

Энэ холболтын аргыг "CDN-тэй холбогдох" гэж нэрлэдэг. Агуулга хүргэх сүлжээ буюу үүнийг CDN (Content Delivery Network) гэж нэрлэдэг нь дэлхий даяарх серверүүдийн сүлжээ юм. Эдгээр нь таны вэб серверийн гүйцэтгэлийг сайжруулж, таны траффикийн ачааллыг бууруулахад тусалдаг.

jQuery-г холбох хамгийн алдартай CDN:

Би ихэвчлэн Google хөгжүүлэгчдийн холболтыг ашигладаг. Төслийн хуудсан дээр хэд хэдэн хэсгүүдийг аль хэдийн бэлтгэсэн бөгөөд бидэнд хэрэгтэй байгаа мөрийг хуулж аваад файлд оруулахад хангалттай. Энэ холболтын аргын тусламжтайгаар код дараах байдлаар харагдах болно.

Сайтын гарчиг

< ! DOCTYPE html >

< html >

< head >

< meta charset = "utf-8" >

< title >Сайтын гарчиг< / title >

< / head >

< body >

< / body >

< / html >

Энэ аргын давуу тал нь олон сайтууд jQuery-ийг Google API-ээр дамжуулан холбодог бөгөөд энэ нь өндөр магадлалтайгаар энэ номын сан нь хэрэглэгчийн хөтчийн кэшэд байгаа бөгөөд хоёр дахь удаагаа ачаалагдахгүй гэсэн үг юм.

jQuery-г WordPress-тэй холбож байна

jQuery нь WordPress-д автоматаар ордог тул бусад хувилбаруудын сангуудыг гараар оруулах шаардлагагүй. Энэ нь php кодыг ашиглан загварт тохиолддог:

Үүний үр дүнд HEAD таг дотор jQuery холболтын мөр гарч ирнэ.

Бичиж байх үед WordPress нь jQuery v1.12.4 хувилбартай.Гэхдээ таны харж байгаачлан номын сангийн хувилбар нь дээрх жишээнүүдэд багтсан хувилбараас тэс өөр байна. Номын сангийн хамгийн сүүлийн хувилбарыг холбох боломжтой боловч зөрчилдөөн гарах магадлалтай.

Зөрчилдөөнөөс зайлсхийхийн тулд номын сангийн шаардлагатай хувилбарыг ашиглахын тулд та functions.php файлд jQuery-г оруулах зөв аргыг ашиглах хэрэгтэй.

jQuery UI нь jQuery хөгжүүлэгчид өөрсдөө гаргасан виджет болон залгаасуудын багц юм. Миний бодлоор энэ хэрэгслийг өөрийн "унадаг дугуй" бичихгүйн тулд шаардлагатай хэмжээгээр судлах шаардлагатай байна. Та jQuery-д зориулсан энэхүү нэмэлтийг http://jqueryui.com/ төслийн нүүр хуудаснаас татаж авч уншиж болно.

Виджет болон залгаасуудын талаар бид юу мэдэх хэрэгтэй вэ? Эхнийх нь тэд юу вэ, хоёрдугаарт тэд хэрхэн ажилладаг вэ. Би энэ хоёр зүйлд анхаарлаа хандуулахыг хичээх болно.

Интерактив байдал

Би интерактив интерфэйс үүсгэх үед амьдралыг хөнгөвчлөх ашигтай залгаасуудаас эхлэх болно:

Чирэх боломжтой – энэ бүрэлдэхүүн хэсэг нь ямар ч DOM элементийг хулганаар чирэх боломжтой болгодог
Droppable нь Draggable бүрэлдэхүүн хэсгийн логик өргөтгөл юм; Элементүүдийг чирэх, буулгах боломжтой савтай ажиллахад шаардлагатай
Хэмжээг өөрчлөх боломжтой – нэрнээс нь харахад ямар ч DOM элементийн хэмжээг өөрчлөх боломжтой
Сонгох боломжтой - элементүүдийн "сонголтыг" зохион байгуулах боломжийг танд олгоно; зургийн менежментийг зохион байгуулахад ашиглахад тохиромжтой
Эрэмбэлэх боломжтой - DOM элементүүдийг эрэмбэлэх

Виджетүүд

Виджетүүд нь JavaScript код төдийгүй HTML болон CSS-ийн зарим хэрэгжилтийг агуулсан цогц шийдэл юм.

Бүх виджетүүд болон залгаасууд нь jQuery UI цөмтэй холбоотой боловч залгаасууд хоорондоо хамааралтай байдаг тул тэдгээрийг санах нь зүйтэй. Гэхдээ санаа зовох хэрэггүй - jQuery UI багцыг бүтээх үед бүх хамаарлыг автоматаар шалгадаг, i.e. Хэрэв танд өмнө нь холбогдоогүй виджет хэрэгтэй бол уг чуулганыг дахин татаж авах нь дээр.

Хэрэглээ

Бидэнд тийм ч олон хэрэгсэл байхгүй - энд DOM элементүүдийн байрлалыг хянах боломжийг олгодог ашигтай Position залгаас байна - http://jqueryui.com/position/, мөн виджет үүсгэх үйлдвэр бас байдаг, гэхдээ би энэ тухай жаахан дараа ярь.

Үр нөлөө

jQuery UI-ийн өгдөг эффектүүдээс би дөрвөн зүйлийг онцлон тэмдэглэв.

Өнгөт хөдөлгөөнт дүрс
Анги солих хөдөлгөөнт дүрс
Эффектүүдийг тохируулсан
Хөнгөвчлөх чадварыг өргөжүүлэх

"Effects Core" бүрэлдэхүүн хэсэг нь өнгөт хөдөлгөөнт дүрсийг хариуцдаг бөгөөд энэ нь ".animate()" функцийг ашиглан өнгөний өөрчлөлтийг хөдөлгөөнд оруулах боломжийг олгодог.

$("#my" ).animate(( backgroundColor: "хар" ), 1000 );

Тийм ээ, тийм, үндсэн jQuery үүнийг хийх боломжгүй, гэхдээ jQuery UI нь танд дараах параметрүүдийг хөдөлгөөнтэй болгох боломжийг олгодог:

дэвсгэр өнгө
borderBottomColor
borderLeftColor
хилийн баруун өнгө
borderTopColor
өнгө
тойм Өнгө

"Эффектийн үндсэн" хэсэгт агуулагдах өөр нэг онцлог нь DOM элементийн ангиллын өөрчлөлтийн хөдөлгөөнт дүрс юм. Хэрэв та элементэд шинэ анги оноох үед шинэ CSS шинж чанаруудын ердийн агшин зуурын хэрэглээний оронд эдгээр шинж чанаруудын одоогийнхоос томилогдсон ангид заасан анимацыг харах болно. Энэ функцийг ашиглахын тулд бидэнд хуучин найзууд хэрэгтэй болно - ".addClass()", ".toggleClass()" болон ".removeClass()" аргууд, зөвхөн нэг ялгаа нь - аргыг дуудахдаа хөдөлгөөнт дүрсний хурдыг зааж өгөх ёстой. Хоёрдахь параметрийн хувьд:

$("#my" ).addClass("идэвхтэй" , 1000 ); $("#my" ).toggleClass("идэвхтэй" , 1000 ); $("#my" ).removeClass("идэвхтэй" , 1000 );

Хэрэв та өмнөх догол мөрөөс юу болж байгааг ойлгохгүй байгаа бол энэ код танд зориулагдсан болно.

#my ( font-size :14px ; ) #my .active ( font-size :20px ; ) $(function () ( $("#my" ).addClass("active" , 1000 ); // энд эргэдэг. ижил аргаар дараа нь $("#my" ).animate(("фонтын хэмжээ":"20px" ), 1000 ); ));

Мөн нэг ангийг нөгөө ангиар орлуулдаг “.switchClass()” арга байдаг ч надад хэзээ ч хэрэг болж байгаагүй.

Би эффектүүдийн талаар удаан ярихгүй, тэдгээрийг http://jqueryui.com/effect/ хуудаснаас хэрхэн ажиллаж байгааг нь харах нь дээр. Эффекттэй ажиллахын тулд ".effect()" арга гарч ирэх боловч UI нь суурилуулсан ".show()", ".hide() аргуудын функцийг өргөжүүлсэн тул үүнийг өөрөө ашиглахгүй байх нь дээр. )” болон “.toggle()”. Одоо эффектийн нэрийг хөдөлгөөнт дүрсийн хурдны параметр болгон оруулснаар та хүссэн үр дүнг авах болно.

$("#миний" ).нуух("хийсвэр" ); $("#my" ).show("шилжүүлэх" ); $("#my" ).toggle("дэлбэрэх" );

Би эффектүүдийн жагсаалтыг өгөх болно, магадгүй хэн нэгэн санаж байх болно: сохор, үсрэх, хавчуулах, унагах, дэлбэлэх, нугалах, тодруулах, хийсэх, цохилт өгөх, масштаблах, сэгсрэх, хэмжээ, гулсуулах, шилжүүлэх.

Хэрэв та хэзээ нэгэн цагт загварт өөрчлөлт оруулах шаардлагатай бол "jquery-ui-#.#.#.##-custom.css" файлыг нээж, "Энэ загварыг үзэх, өөрчлөхийн тулд, зочилно уу http:..." Өгөгдсөн холбоосыг дагаж ThemeRoller ашиглан шаардлагатай өөрчлөлтүүдийг хийнэ үү.

Бид өөрсдийн виджетийг бичдэг

Таны хувьд jQuery UI-д зориулсан виджет бичих эхлэл нь албан ёсны баримт бичиг байх болно, гэхдээ хүн бүр англи хэлний сайн мэдлэгтэй байдаггүй тул би түүнд байгаа мэдээллийг орчуулж, өөрчлөхийг хичээх болно.

Хамгийн түрүүнд ярих ёстой зүйл бол jQuery-д зориулсан залгаас бичих дүрмүүд нь хэтэрхий хатуу бөгөөд энэ нь тэдний чанарт нөлөөлөхгүй. jQuery UI үүсгэх үед бид залгаасууд болон виджетүүдийг бичих үйл явцыг стандартчилах замаар явахаар шийдсэн. Энэ санаа хэр амжилттай болсныг би хэлж чадахгүй ч өмнөхөөсөө илүү байсан нь тодорхой. Би таны виджетийн хүрээг тайлбарлаж эхэлье:

$.widget("book.expose" , ( // өгөгдмөл тохиргооны сонголтууд: ( өнгө: "улаан" ), // виджетийг эхлүүлэх // DOM-д өөрчлөлт хийж, _create: function () (энэ .element; /) / jQuery боодол дээрх хайсан объект энэ .name; // name - энэ .namespace-г ил гаргах; // зай - үүнийг захиалах .element.on("click." +this .eventNamespace, function () ( console .log(" " ); )); дарна уу), // арга нь тохиргоог ашиглах үүрэгтэй _setOption: функц ( түлхүүр, утга ) ( // тохиргоонд өөрчлөлт оруулах энэ ._super("_setOption" , түлхүүр, утга); ), // _destroy арга нь _create-ын эсрэг байх ёстой // энэ нь DOM-д хийсэн бүх өөрчлөлтийг устгаж, хэрэв байгаа бол бүх зохицуулагчийг устгах ёстой, _destroy: function () ( this .element.off("." + this .eventNamespace) ;)))

Сэтгэгдэл уншаагүй хүмүүст тайлбарлая:

сонголтууд - тодорхой элементийн виджетийн тохиргоог хадгалах

Create() – виджетийг эхлүүлэх үүрэгтэй – энд DOM-д өөрчлөлт гарч, үйл явдал зохицуулагчийг “өлгөх” ёстой.

Destroy() нь "_create()"-ын эсрэг үйлдэл бөгөөд энэ нь бидний хог хаягдлыг цэвэрлэх ёстой.

SetOption(түлхүүр, утга) – ямар нэгэн тохиргоог өөрчлөхийг оролдох үед энэ аргыг дуудах болно:

$("#my" ).expose((түлхүүр:утга))

Ажиглагч нүд нь жагсаасан бүх аргууд нь доогуур зураасаар эхэлдэг гэдгийг анзаарах болно - энэ нь гүйцэтгэх боломжгүй "хувийн" аргуудыг тодруулах арга юм. Хэрэв бид "$("#my").expose("_destroy")"-г ажиллуулахыг оролдвол алдаа гарах болно. Гэхдээ санаж байгаарай - энэ бол зүгээр л гэрээ, үүнийг дагаж мөрдөөрэй!

Нууцлалын гэрээг тойрч гарахын тулд та "data()" аргыг ашиглаж болно:

$("#my" ).data("expose" )._destroy() // "(evil)" инээмсэглэлийн газар

Энэ жишээн дээр би виджет бичихдээ сайн өнгө аясыг тохируулахыг оролдсон - би үйл явдлын зохицуулагчийг нэрийн талбарт "өлгөв". Энэ нь танд виджетийн код руу орохгүйгээр ирээдүйд юу болж байгааг хянах боломжийг олгоно. "Үнэн түүх".

“_destroy()” аргад тайлбарласан код нь шаардлагагүй, учир нь Энэ нь аль хэдийн олон нийтэд "устгах ()" дээр гүйцэтгэсэн байна. Тодорхой болгох үүднээс энд толилуулж байна.

Залхуу хүмүүст зориулж "eventNamespace" гэж үйл явдал зохицуулагчид бүрт бичихгүйн тулд хөгжүүлэгчид 1.9.0 хувилбарт "_on()" ба "_off()" гэсэн хоёр аргыг нэмсэн. Эхнийх нь хоёр параметрийг авдаг:

DOM элемент эсвэл сонгогч эсвэл jQuery объект
объект болгон үйл явдал зохицуулагчийн багц

Жагсаалтад орсон бүх үйл явдлууд "eventNamespace" зайд "өлгөгдөнө", жишээлбэл. үр дүн нь ижил байх болно:

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

Хоёрдахь арга болох "_off()" нь зохицуулагчийг сонгон идэвхгүй болгох боломжийг олгоно.

энэ ._off(энэ .элемент, "хулганаар дарах" );

За, хүрээ бол урт завь, функциональ руу шилжих цаг болжээ. Дурын функцтэй дурын функцийг нэмье:

CallMe:функц () ( консол .log("Сайн уу?" ); )

Бид энэ функцэд бусад виджетийн аргууд болон гаднаас хялбархан хандах боломжтой:

// энэ .callMe() дотроос // гаднаас $("#my" ).expose("callMe" )

Хэрэв таны функц параметрүүдийг авдаг бол тэдгээрийг дараах байдлаар дамжуулна:

$("#my" ).expose("Намайг дуудах", "Сайн уу!" )

Хэрэв та үйл явдал зохицуулагчийн виджетийн аргад хүрэхийг хүсвэл хувьсагчийн хамрах хүрээг мартаж, дараах маневрыг хийгээрэй.

( _create: function () ( var self = this ; // энд байна! this .element.on("click." +this .eventNamespace, function () ( // энд өөрийгөө ашиглана уу, учир нь энэ нь аль хэдийн //-г зааж байна. self.callMe(); )) ) дээр дардаг элемент.

За, явцгаая, одоо үйл явдлын талаар ярилцъя. Виджетүүдийг илүү уян хатан боловсруулж, хэрэгжүүлэхийн тулд дур зоргоороо үйл явдал үүсгэх, тэдгээрийг "сонсох" функцээр хангагдсан болно.

// энэ үйл явдлыг өдөөх ._trigger("incomingCall" ); // виджетийг эхлүүлэх үед үйл явдалд бүртгүүлнэ үү $("#my" ).expose(( incommingCall: function (ev ) ( console .log("din-don" ); ) )) // эсвэл дараа нь үйл явдлын нэр // виджетийн нэр + үйл явдлын нэр $("#my" ).on("exposeincomingCall" , функц () ( консол .log("tru-lya-lya" ) ));

Маш олон материал байгаа, би ойлгож байна, гэхдээ би виджетээс өөрөө дуудаж болох хэд хэдэн аргын тайлбарыг нэмж оруулах болно.

Delay() – энэ функц нь “setTimeout()” шиг ажилладаг бөгөөд зөвхөн дамжуулсан функцийн контекст нь виджетийг өөрөө зааж өгөх болно (энэ нь хамрах хүрээг зовоохгүйн тулд юм)

Hoverable() болон _focusable() – эдгээр аргууд нь “ui-state-hover” болон “ui-state”-ийг автоматаар нэмэхийн тулд “hover” болон “focus” үйл явдлуудыг сонсох шаардлагатай элементүүдээр тэжээгдэх шаардлагатай. Эдгээр нь тохиолдоход тэдэнд анхаарлаа хандуулаарай

Hide() ба _show() – эдгээр хоёр арга нь 1.9.0 хувилбар дээр гарч ирсэн бөгөөд хөдөлгөөнт аргуудыг ашиглах үед виджетүүдийн үйл ажиллагааг стандартчилах зорилгоор бүтээгдсэн; Тохиргоонууд нь ихэвчлэн "нуух" болон "харуулах" товчлуурын доорх сонголтуудад нуугддаг. Дараахь аргуудыг ашиглах ёстой.

( сонголтууд: ( нуух: ( нөлөө: "slideDown" , // тохиргоо нь дуудлагын үргэлжлэх хугацаатай тэнцүү байна: 500 // .slideDown(500) ) ) ) // _hide() болон _show() дуудлагыг виджет дотор ашиглах ёстой. this ._hide(энэ .элемент, энэ .options.hide, функц () ( // энэ бол бидний буцааж дуудах функцийн консол .log("нуугдсан" ); ));

Бидний өмнө хэрэгжиж байсан хэд хэдэн арга бий:

( идэвхжүүлэх: функц () ( үүнийг буцаана ._setOption("идэвхгүй" , худал ); ), идэвхгүй болгох: функц () (үүнийг буцаана ._setOption("идэвхгүй" , үнэн ); ) )

Үнэн хэрэгтээ эдгээр функцууд нь дуудах ижил утгатай үг үүсгэдэг:

$("#my" ).expose(( "идэвхгүй" : үнэн )) // эсвэл худал

Бидний даалгавар бол "_setOption()" аргаар энэ тугийг хянах явдал юм.

jQuery UIнь jQuery-д суурилсан номын сан бөгөөд 20 гаруй залгаасуудыг хэрэгжүүлдэг бөгөөд үүнд төрөл бүрийн үйлдлийг зохион байгуулдаг залгаасууд (жишээлбэл, элементүүдийг чирэх эсвэл сунгах), найман төрлийн виджет (хуанли, харилцах цонх, таб систем гэх мэт) болон хөдөлгөөнт эффектүүд. Нэмж дурдахад, UI нь виджетүүдийг зохион бүтээсэн, хэрэгцээтэй дүрс (173 ширхэг) агуулсан хэд хэдэн дизайны сэдэвтэй. Дизайны сэдвүүдийн аль нэгийг ачаалахын өмнө шууд jQuery UI вэбсайт дээр тохируулах боломжтой.

Эхэлцгээе

jQuery UI нь таван зан үйлийн залгаастай бөгөөд тэдгээрийн зарим боломжуудыг доор харуулав.

Дээр дурдсан функц бүрийг хэд хэдэн кодын мөр болгон зохион байгуулдаг.

UI нь мөн виджетүүдийг зохион байгуулах найман залгаасуудыг өгдөг:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ их бие(фонт:9pt Arial,sans-serif;) p.titl(тодорхой:хоёулаа; захын зай:0; дэвсгэр:5px 0 5px 7px; үсгийн маяг: налуу) .itLf(хөвөгч:зүүн; өргөн :280px; өндөр:200px;) .itRg(хөвөгч:зүүн;зүүн зах:70px; өндөр:200px; өргөн:200px;) #баян хуур(фонтын хэмжээ:8pt; захын доод:25px) #tabs(фонт- хэмжээ:8pt; margin-bottom:25px) #opnDialog(фонтын хэмжээ:8pt; margin-bottom:25px) #progressbar(фонтын хэмжээ:8pt;) товчлуур(фонтын хэмжээ:8pt;) #radio(фонтын хэмжээ) :8pt; захын-доод:25px) #автоматаар гүйцээх(доод талын захын:25px) #гулсагч(доод талын захын:25px) #огноо сонгогч(фонтын хэмжээ:8pt;) ~lt~/style~gt~ ~lt~/head ~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Аккордеон~lt~/p~gt~ ~lt~div id=" баян хуур"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~1-р хэсэг~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~ нь Шотландын хамгийн том хот бөгөөд Их Британид 3 дахь хүн амтай хот юм. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~2-р хэсэг~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Глазгоу дахь зайрмагны дайн~lt~/i~gt~ - Шотландын Глазго хотод өрсөлдөгчдийн хооронд болсон цуврал мөргөлдөөн. хар тамхины наймаачид зайрмагны тэргээр бараагаа хүргэж байна. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~3-р хэсэг~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - өнхрүүлсэн сониноор хийсэн, хавчуулсан хөл бөмбөгийн хулигануудын гар хийцийн зэвсэг. тугалга шиг нударга.. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~4-р хэсэг~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~img src="http://tinyurl.com/3sn6e3t"~gt~ ~lt~/p~gt~ ~lt~/div ~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Tabs~lt~/p~gt~ ~lt~div id="tabs"~gt~ ~lt~ul~gt ~ ~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~ ~lt~li~gt~~lt ~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~ ~lt~/ul~gt~ ~lt~div id="tabs-1" ~gt~ ~lt~p~gt~ Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~div id="tabs-2"~gt~ ~lt~p~gt~ Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante , ut pharetra massa metus id nunc. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Харилцах цонх~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("нээлттэй");"~gt~Цонхыг нээх~lt~/a~gt~ ~lt~div id="dialog" гарчиг= " Энгийн цонх"~gt~ ~lt~p~gt~ This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Прогрессбар~lt~/p~gt~ ~lt~div id="progressbar"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p class="titl"~gt~Кнопки~lt~/p~gt~ ~lt~button~gt~Обычная кнопка~lt~/button~gt~ ~lt~div id="radio" style="margin-top:15px"~gt~ ~lt~input type="radio" id="radio1" name="radio" /~gt~~lt~label for="radio1"~gt~1~lt~/label~gt~ ~lt~input type="radio" id="radio2" name="radio" checked="checked" /~gt~~lt~label for="radio2"~gt~2~lt~/label~gt~ ~lt~input type="radio" id="radio3" name="radio" /~gt~~lt~label for="radio3"~gt~3~lt~/label~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Автозаполнение~lt~/p~gt~ ~lt~input id="autocomplete" title="Англи хэл оруулна уу"a"" /~gt~ ~lt~p class="titl"~gt~Ползунок~lt~/p~gt~ ~lt~div id="slider"~gt~~lt~/div~gt~ ~lt~p class="titl"~gt~Календарь~lt~/p~gt~ ~lt~div id="datepicker"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#accordion").accordion(); $("#tabs").tabs(); $("#dialog").dialog({ autoOpen:false }); $("#progressbar").progressbar({value: 37}); $("#opnDialog").button(); $("button").button(); $("#radio").buttonset(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocomplete").autocomplete({source: availableTags}); $("#slider").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] }); $("#datepicker").datepicker({source: availableTags}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~ !}

Нэмж дурдахад, jQuery UI-ийн дэвшилтэт загварчлалын системийг дугуйрсан булан эсвэл загварчилсан хэсгүүдээр хангахад ашиглаж болно, жишээлбэл, системийн анхааруулга эсвэл алдааны мэдэгдэл:

Хэрэглээ

Тусдаа залгаасуудыг хэрхэн ашиглах талаар суралцаж эхлэхээсээ өмнө jQuery UI номын сан бүхэлдээ хэрхэн ажилладагийг мэдэх нь чухал юм.

Хэрэв та өөрийн хүссэн загвараа ашиглахыг хүсвэл эхлээд энэ хуудсан дээрх бүх шаардлагатай загварын тохиргоог хийж, дараа нь "Сэдвийг татаж авах" товчийг дарснаар номын сангийн татаж авах хуудсан дээр таны засварласан сэдэв харагдах болно. Сэдвийн талбарт заасан.

Сэдэв болон шаардлагатай бүрэлдэхүүн хэсгүүдийг шийдсэний дараа та татаж авах хуудсан дээр "Татаж авах" дээр дарах хэрэгтэй бөгөөд үүний дараа архивыг таны компьютерт татаж авах болно. Энэ нь гурван хавтас агуулна:

css— дизайны файлуудыг агуулсан (CSS файл ба зураг).
js— jQuery болон jQuery UI бүхий файлуудыг агуулсан.
хөгжлийн багц- энэ фолдерыг сайтад байршуулах шаардлагагүй, түүний бүх агуулга нь туслах шинж чанартай байдаг. Plugin болон бусад туслах файлуудыг харуулсан олон янзын файлууд байдаг.

Эдгээр гурван хавтаснаас гадна архивын үндсэн хэсэгт татаж авсан залгаасуудыг харуулсан index.html файл байдаг (мэдээжийн хэрэг, энэ файлыг сайт руу оруулах шаардлагагүй).

UI-г таны сайтад холбож байна

jQuery UI таны сайтын хуудсан дээр ажиллахын тулд jQuery номын сангийн js файл, jQuery UI-ийн js файл (татаж авсан архивын js хавтсанд байрладаг) болон css хавтасны агуулгыг агуулсан байх шаардлагатай. хуудастай холбогдсон байна (энэ нь бүгд (css контент) нэг директор дотор байрлах нь чухал):

< link type= "text/css" href= "css/themename/jquery-ui-1.8.12.custom.css" rel= "Stylesheet" /> < script type= "text/javascript" src= "js/jquery-1.4.4.min.js" > < script type= "text/javascript" src= "js/jquery-ui-1.8.12.custom.min.js" >

Тэгээд л болоо! Дараа нь та өөрийн хуудсан дээрх jQuery UI функцуудыг ашиглаж болно. Жишээ нь, энгийн элементийг чирэх боломжтой болгохын тулд JavaScript кодын нэг мөрийг ашиглан:

Плагинуудтай ажиллах

Бүх зан төлөв болон виджетийн залгаасууд ижил төстэй байдлаар ажилладаг. jQuery UI залгаас бүрийг сонгосон элементүүд дээр дуудагддаг нэг үндсэн аргаар төлөөлдөг. Түүний нэр үргэлж залгаасын нэртэй таарч байдаг. Энэ аргыг ашигласнаар та элементүүд дээр залгаасыг үүсгэх (суулгах), залгаасын шинж чанарыг олж мэдэх, өөрчлөх, үйл явдал зохицуулагчийг суулгах, мөн ихэвчлэн аргууд гэж нэрлэгддэг залгаасын функцуудыг ажиллуулах боломжтой (хэдийгээр эдгээр нь энэ ойлголтын ердийн утгаараа арга биш боловч). ).

Суулгах (суулгах)

Хуудасны элементүүд дээр ямар нэгэн залгаас суулгахын тулд jQuery ашиглан шаардлагатай элементүүдийг сонгоод дараа нь залгаасын аргыг дуудна уу (нэр нь залгаасын нэртэй үргэлж таарч байдаг):

Арга зүй

Ерөнхийдөө javascript дахь объектын арга нь энэ объект дээр дараах байдлаар дуудагдсан функцийг хэлнэ.

obj.A(); // obj obj.B объект дээр А аргыг дуудах () ; // obj объект дээр В аргыг дууд

Гэсэн хэдий ч тодорхой jQuery UI залгаасуудтай ажиллах хүрээнд эдгээр бичлэгийн хэлбэрийг аргууд гэж нэрлэдэг.

$("#someId" ) .plaginName ( "аргын нэр" , аргын параметрүүд);

Жишээлбэл:

Үл хөдлөх хөрөнгө

Plugin бүр хэд хэдэн шинж чанартай байдаг (тэдгээрийн тайлбарыг холбогдох залгаасуудын баримт бичгээс олж болно). Проперти бүрийг залгаасыг үүсгэсэн үед тохируулж болно. Үүнийг хийхийн тулд залгаасыг элемент дээр суулгахдаа шинж чанар бүхий объектыг форматаар дамжуулах шаардлагатай (проперти_нэр_1: үнэ цэнэ_1, өмчийн_нэр_2: үнэ цэнэ_2, ...):

// харилцах цонхны залгаасыг // ашиглан id=someId бүхий элементээс харилцах цонх хийж, цонхны гарчгийг зааж өгнө $("#someId" ) .dialog (( гарчиг: "Message" ) ); // огноо сонгогч залгаасыг ашиглан хуудасны эхний div-г хуанли болгож, хамгийн бага ба дээд огноог зааж өгнө $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1)) , maxDate: шинэ Огноо(2013, 1 - 1, 1) );

Нэмж дурдахад, залгаасыг үүсгэсний дараа аливаа өмчийн үнэ цэнийг олж мэдэх эсвэл өөрчлөх боломжтой. Үүнийг хийхийн тулд та "сонголт" аргыг ашиглах хэрэгтэй:

// харилцах цонхны гарчгийг олоорой var dialogTitle = $("#someId" ) .dialog ("сонголт" , "гарчиг" ) ; // "#1 " $("#someId" ) угтварыг нэмж гарчгийг өөрчлөх .dialog ("option" , "title" , "#1 " + dialogTitle) // хуанли дахь хамгийн бага огноог өөрчлөх // аль нь $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog (( хаах : функц (үйл явдал, ui)) хуудасны эхний div дээр суулгасан. (... ) );

Өөрийнхөө залгаасуудыг үүсгэх

jQuery UI нь олон тохиромжтой, ойлгомжтой залгаасуудыг зохион байгуулахаас гадна ижил төстэй нэмэлт өргөтгөлүүдийг өөрөө хийх боломжийг олгодог - UI Widget Factory. Үүний нэг том давуу тал нь одоо байгаа виджетүүдийг өөрчлөх, өөрийн виджетийн шатлалыг үүсгэх боломжийг олгодог зарим OOP боломжуудыг агуулсан байдаг.