jQuery хэрэглэгчийн интерфэйс гэж юу вэ. jqueryui програмын танилцуулга

jQuery UI (Хэрэглэгчийн интерфэйс) номын сан нь хэрэглэгчийн интерфэйс үүсгэх загвар элементүүдийн багц бөгөөд jQuery номын сангийн нэг хэсэг юм. Хэрэглэгчийн интерфэйс нь хэрэглэгч болон вэб хуудас хоорондын харилцан үйлчлэлийг хэлнэ.

jQuery UI номын сангийн гол зорилго нь вэб хөгжүүлэгчдийн амьдралыг хөнгөвчлөх, ингэснээр тэд ижил төрлийн ажлыг гүйцэтгэхэд цаг үрэхгүй байх явдал юм. Вэбсайтаас хамгийн түгээмэл олддог JavaScript скриптүүдийг нэг номын санд цуглуулсан бөгөөд хөгжүүлэгчид шаардлагатай параметр, аргыг авч хэрэглэхэд л хангалттай. Хэрэглэгчийн интерфейсийг хөгжүүлэх нь илүү хурдан болсон.

Вэбсайтад ашигладаг хуанли, гулсагч, попапууд нь аль хэдийн заавал байх ёстой шинж чанар болсон. Тэгвэл яагаад хөгжүүлэгч бүр эхнээс нь код бичих шаардлагатай болдог вэ? Хэзээ тэр бэлэн загвараа тохируулж, вэбсайт дээрээ ашиглах боломжтой.

Албан ёсны вэбсайт: https://jqueryui.com/

jQuery UI номын санг компьютер дээрээ татаж авах эсвэл CDN холбоосоор холбогдож болно.

Номын санг татаж авах хоёр сонголт байна.

Хэрэв та зөвхөн зарим бүрэлдэхүүн хэсгүүдийг ашиглах гэж байгаа бол номын санг бүхэлд нь татаж авах шаардлагагүй. Татаж авах Builder хуудсан дээр шаардлагатай бүрэлдэхүүн хэсгүүдээс бусад бүх нүднүүдийн сонголтыг арилгана уу. Жишээлбэл, хэрэв танд зөвхөн баян хуурын виджет хэрэгтэй бол түүний хажууд байгаа чагтыг тэмдэглээд сайт нь ажилд ямар элементүүд хэрэгтэй болохыг танд хэлэх болно. Шаардлагатай бол шалгах нүдийг автоматаар байрлуулах бөгөөд шаардлагагүй файлуудыг татаж авахгүй бөгөөд энэ нь сайтыг ачаалах хурдад эерэгээр нөлөөлнө.

Татаж авах товчийг дарахаас өмнө бүрэлдэхүүн хэсгүүдийн үзэсгэлэнтэй дизайнд тохирох сэдвийг сонго. Та Сэдэв/Галерей хэсгээс бэлэн сэдвүүдийн визуал дизайныг харж болно.

Бүрэлдэхүүн хэсгүүдийг загварчлагдсан вэбсайтад оруулахын тулд загвар зохион бүтээгч танд илүү тохиромжтой - ThemeRoller, Theme хэсэг рүү очно уу. Та гадаад төрх байдлын хяналтын самбарыг өөрчлөхөд бүх виджетүүд хэрхэн харагдахыг шууд харах болно. Элементийн дүр төрхийг үүсгэж дууссаны дараа татаж авах товчийг дарж зөвхөн сонгосон элементүүд болон сэдвийг татаж авах нь маш тохиромжтой.

Хэрэв та эх кодыг харахгүй бол бүхэл бүтэн номын сан хэрэгтэй болох магадлал багатай. Хамгийн сүүлийн үеийн бүрэн хувилбарыг татаж авахын тулд товчийг дарна уу: Тогтвортой.

Татаж авсан номын сан нь CDN-ээр холбогддог бөгөөд цорын ганц ялгаа нь холбоосуудын URL нь эдгээр файлуудыг байршуулах хавтас руу хөтлөх болно.

Демо хэсэгт та сайт дээрх ямар ажлуудыг (демо жишээ) номын санг ашиглан шийдэж болохыг тодорхой харж болно.

Виджетийн жишээг харцгаая - Tooltip. Энэхүү виджетийн зорилго нь гарчгийн шинж чанарт заасан хэрэгслийн зөвлөмжийг сайхан нээх явдал юм.

Бид ердийнхөөрөө HTML бүтцийг бий болгодог. p догол мөрөнд бид таны насны оролтын талбарыг байрлуулна - оролт . Текстийн талбарт бид гарчгийн шинж чанарыг тексттэй зааж өгдөг "Насаа заана уу". Бид энэ элементэд хэрэгслийн зөвлөмжийг ашиглах болно.

Таны нас:

DOM модыг ачаалсны дараа бид баримт бичгийн объект дээр tooltip аргыг дуудах болно. Энэ аргыг хуудасны бусад элементүүдэд ашиглахын тулд бид бүх хуудсанд (баримт бичиг) нэг дор нэвтэрдэг. Хэрэгслийн зөвлөмжийн аргыг дуудсаны дараа гарчгийн атрибутын утгууд нь зөвлөмж дээр харагдах болно.

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

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

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

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

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

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

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

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

Анхаар!

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

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

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

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

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

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

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

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

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

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

jQuery UI номын санг суулгаж байна

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

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

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

JQuery UI вэбсайт дээр та тусгай програмын үйлчилгээг ашиглаж болно - сэдэв тохируулагч (Themeroller), гэхдээ үүнээс гадна ашиглахад бүрэн бэлэн урьдчилан тодорхойлсон сэдвүүдийн бүхэл бүтэн галерей байдаг бөгөөд үүнээс та өөрт тохирохыг нь сонгох боломжтой. ихэнх нь, улмаар таны амьдралыг хөнгөвчлөх болно.

Эхлэхийн тулд jqueryui.com руу зочилж, Themes товчийг дарна уу. Энэ нь jQuery UI виджетүүд болон тэдгээрийн зүүн талд байрлах тохиргооны самбарыг харуулах ThemeRoller хуудсыг нээх бөгөөд зурагт үзүүлсэн шиг сэдвийн сонголтуудыг тохируулах боломжтой.

Хэрэв танд дагах ёстой тодорхой харааны хэв маяг байгаа бөгөөд JQuery UI хэрэгслүүдийн визуал интерфэйс нь сайт эсвэл програмын бусад хэсэгтэй нийцэхийг хүсч байвал Roll Your Own табыг (өгөгдмөлөөр сонгосон) сонгоно уу. ) зүгээр л хэрэгтэй. Та jQuery UI номын санд ашигладаг CSS загварын багцыг ашиглан дизайны аль ч талыг өөрчлөх боломжтой.

Бэлэн сэдвүүдийн аль нэгийг авахын тулд "Галерей" таб руу очно уу. Бичиж байх үед галерей нь 24 сэдвийг багтаасан бөгөөд өнгөний өргөн сонголтуудыг хамарсан - дуугүй, нарийн өнгөнөөс тод, өдөөн хатгасан өнгө хүртэл. Та галерейн сэдвүүд дээр дарахад хуудасны бусад хэсэгт харагдах виджетүүдийн харагдах байдал зохих ёсоор шинэчлэгдэж, програм ямар харагдахыг танд мэдрүүлнэ.

jQuery UI-д ашигладаг өгөгдмөл загварыг UI lightness гэж нэрлэдэг боловч энэ загварт хангалттай тодосгогч байхгүй тул би Sunny theme-г ашиглах болно, энэ нь арай дээр юм. Одоо танаас шаардагдах цорын ганц зүйл бол өөрт тохирох сэдвийн нэрийг санах явдал юм.

Загвараа сонгосны дараа та өөрийн jQuery UI номын сан татаж авч эхлэх боломжтой. Хуудасны дээд талд байрлах Татаж авах товчийг дарж Татаж авах бүтээгч хуудас руу очно уу. Та jQuery UI бүрэлдэхүүн хэсгүүдийн жагсаалтыг дөрвөн функциональ бүлэгт хуваасан: UI Core, Interactions, Widgets, Effects гэж харах болно.

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

Жишээнүүдийг ажиллуулахын тулд танд бүх бүрэлдэхүүн хэсгүүд хэрэгтэй тул бүх нүдийг чагтална уу.

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

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

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

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

JQuery UI татаж авах нь номын санг хөгжүүлэлт болон үйлдвэрлэлд ашиглахад шаардлагатай бүх файлуудыг агуулдаг. Жишээнүүдтэй ажиллахын тулд танд шахагдаагүй эх код агуулсан файлууд хэрэгтэй бөгөөд хөгжүүлэлтийн явцад ашиглахад зориулагдсан болно. Хэрэв танд ямар нэгэн асуудал тулгарвал jQuery UI номын сангийн дотоод ажиллагаатай танилцахын тулд кодыг хялбархан шалгаж үзэх боломжтой бөгөөд энэ нь таны скриптийг дибаг хийхэд үнэлж баршгүй ач холбогдолтой болно.

Та дараах файл, хавтсыг жишээ файлын хавтсанд хуулах хэрэгтэй.

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

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

хавтас хөгжүүлэх-багц\сэдвүүд\нарлаг\зураг.

JavaScript болон CSS файлын нэр нь татаж авсан номын сангийн хувилбарын дугаарыг агуулдаг. Миний хувьд энэ нь 1.10.3 хувилбар юм. jQuery UI номын сан идэвхтэй хөгжиж байгаа бөгөөд та 1.10.3-аас илүү сүүлийн хувилбарыг татаж авах боломжтой.

Одоо таны хийх ёстой зүйл бол HTML баримт бичигт jQuery UI номын санг оруулах явдал юм. Та доорх жишээнд үзүүлсэн шиг өөрийн байршуулсан JavaScript болон CSS файлуудын холбоосыг агуулсан скрипт болон холбоосын элементүүдийг баримт бичигтээ нэмж үүнийг хийж болно.

jQuery номын сан

Зургийн хавтас руу шууд холбох шаардлагагүй. Зургийн хавтас болон CSS файл байгаа тохиолдолд jQuery UI нь шаардлагатай бүх нөөцийг бие даан олох боломжтой болно.

jQuery UI номын сан нь jQuery номын сангаас хамаарна. Баримт бичигт jQuery UI ашиглахын тулд эхлээд түүнд холбогдсон байх ёстой. jQuery UI номын сан нь бие даасан номын сан биш юм.

Дээрх жишээнд үзүүлсэн баримт бичиг нь jQuery UI номын санг зөв оруулсан эсэхийг шалгах энгийн тестийг агуулна. Хэрэв хуудас хэвийн нээгдэх юм бол та зурагт үзүүлсэнтэй төстэй товчлуурыг харах ёстой. Скрипт элемент дээрх button() арга руу залгахыг одоогоор үл тоомсорло. Энэ нь юунд зориулагдсан, хэрхэн ажилладаг талаар дараагийн нийтлэлээс олж мэдэх болно.

Хэрэв та хоёр номын сангийн аль нэг рүү орох замыг буруу бичсэн бол оронд нь энгийн холбоос харагдах болно.

Та вэб програмаа боловсруулж дуусаад түүнийгээ ашиглахад бэлэн болмогц та татаж авах архивт багтсан файлуудын жижигрүүлсэн хувилбаруудыг ашиглаж болно. Эдгээр файлууд нь жижиг хэмжээтэй боловч дибаг хийх зорилгоор агуулгыг нь уншихад амаргүй. Файлуудыг байршуулах хувилбаруудыг ашиглахын тулд вэб серверийн лавлах руу дараах файлууд болон фолдеруудыг хуулна уу:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

css\sunny\images хавтас

Энд байгаа зургийн хавтас болон CSS файл нь хөгжүүлэлтийн хувилбартай ижил байна; өөрчлөлт нь зөвхөн JavaScript файлд нөлөөлж болно. Цэвэр суулгацыг хийхийн тулд эдгээр файлуудыг серверийн лавлах руу хуулна уу.

CDN ашиглан jQuery номын санг ачаалах асуудлыг өмнө нь хөндөж байсан. Хэрэв та энэ аргын шүтэн бишрэгч бол jQuery UI номын сантай ижил зүйлийг хийж чадна гэдгээ мэдэхэд таатай байх болно. Google болон Microsoft хоёулаа CDN дээр jQuery UI файлуудыг байршуулах боломжийг олгодог. Бидний үндсэн жишээн дээр би Microsoft-ын үйлчилгээг ашиглаж байна, учир нь энэ нь jQuery UI JavaScript файлууд болон стандарт арьсны аль алиныг нь хангадаг.

CDN ашиглахын тулд танд хэрэгтэй файлуудын URL-ууд байх ёстой. Хэрэв энэ нь Microsoft-ын үйлчилгээ бол Microsoft Ajax Content Delivery Network хуудас руу очно уу. Хуудсыг доош гүйлгэх үед та jQuery UI-ийн өөр хувилбаруудад тохирох холбоосуудын жагсаалтыг харах болно. Өөрийн ашиглаж буй хувилбарын холбоос дээр дарна уу (миний хувьд энэ нь 1.10.3 хувилбар юм). Та jQuery UI номын сангийн файлын ердийн болон жижигрүүлсэн хувилбаруудын URL-уудыг харах болно.

Хуудасны үлдсэн хэсэг нь сэдэв бүрийн доор CSS файлын URL-тай урьдчилан бэлтгэсэн сэдвүүдийг харуулдаг.

Эдгээр файлыг CDN-ээр дамжуулан өөрийн баримт бичигт холбохын тулд доорх жишээнд үзүүлсэн шиг скрипт болон элементүүдийг локал jQuery UI файлуудын холбоосоос илүү тохирох URL-д байрлуулна уу.

jQuery номын сан $(функц() ( $("a").button(); )); www.professorweb.ru вэб сайтад зочилно уу

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

Хэрэглэгчийн интерфейсийг бий болгох jQuery UI номын сангийн танилцуулга. Эхлэгчдэд зориулсан товч заавар.

jQuery UI (Англи хэлнээс) jQuery хэрэглэгчийн интерфэйс) нь jQuery JavaScript номын сан дээр бүтээгдсэн виджет ба харилцан үйлчлэлийн номын сан бөгөөд өндөр интерактив вэб програмуудыг үүсгэхэд ашиглаж болно.

jQuery UI номын сангийн боломжуудтай нүдээр танилцахын тулд вэб сайт дээрх "Demos & Documentation" хуудсанд зочилно уу. jqueryui.com.

Одоо та jQuery UI гэж юу болохыг ойлгосны дараа та ачаалахад шаардлагатай бүрэлдэхүүн хэсгүүдийг сонгож эхлэх боломжтой: UI Core (UI-ийн үндсэн функцууд), Харилцан үйлдлүүд (харилцангууд), Виджетүүд (виджетүүд), Эффектүүд (эффектүүд) болон Сэдэв (дизайн сэдэв) - ингэснээр jQuery UI номын сангийн өөрийн хуулбарыг үүсгэнэ. Үүнийг хийхийн тулд дараах хуудсанд зочилно уу: Татаж авах. Тэнд та jQuery UI номын сангийн хамгийн сүүлийн үеийн тогтвортой эсвэл хуучин хувилбарыг хурдан татаж авах боломжтой.

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

JQuery UI номын санг холбохын тулд ихэвчлэн гурван холбоос хангалттай байдаг: UI theme CSS, jQuery library болон jQuery UI. Энэ нь иймэрхүү харагдаж магадгүй:

Шаардлагатай файлуудыг оруулсны дараа та хуудсандаа шаардлагатай виджетүүдийг нэмж эхлэх боломжтой. Жишээлбэл, DatePicker хийх (англи хэлнээс. огнооны сонголт, текстийн хэсэг нэмнэ үү:

Мөн JavaScript код:

$(функц())( $("#огноо").datepicker(); ));

Дээрх жишээг тайлбарласан хөтөчийн үр дүн дараах байдалтай байна.

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

Сонголтуудыг ашиглах. jQuery UI дахь бүрэлдэхүүн хэсэг бүр хэд хэдэн үндсэн тохиргоотой. Үүний зэрэгцээ та "сонголт" (англи хэлнээс) ашиглан тэдгээрийг үргэлж өөрчилж болно. сонголт), шаардлагатай утгыг бүрэлдэхүүн хэсэг рүү дамжуулах.

Жишээлбэл, DatePicker виджетийн огнооны форматыг тохируулахын тулд та dateFormat гэсэн сонголтыг ашиглаж болно.

$("#огноо").datepicker(( dateFormat: "yy-mm-dd" ));

Виджетийг эхлүүлсний дараа та сонголтын утгыг дараах байдлаар авах боломжтой.

var dateFormat = $("#огноо").datepicker("сонголт", "огнооФормат");

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

$("#огноо").datepicker("сонголт", "огнооФормат", "yy-mm-dd");

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

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

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

Эхлээд jQuery UI вэб хуудас руу орж хэрэгтэй файлуудаа авцгаая. Шаардлагагүй зүйлсийг татаж авахгүйн тулд бид "Бүх бүрэлдэхүүн хэсгийн сонголтыг цуцлах" холбоос дээр дарж, зөвхөн хэрэгтэй зүйлээ сонгоод - "Автоматаар бөглөх" нүдийг чагталсны дараа "Үндсэн", "Виджет" болон "Байршил" гэсэн нүднүүдийг шалгана уу. Автоматаар гүйцээх виджет нь эдгээр файлуудаас шалтгаална.

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

Тиймээс эхлээд HEAD хэсэгт архивт байгаа хэд хэдэн файлыг холбох шаардлагатай болно.

Эхлээд бид виджетийн загварчлалын файлыг, дараа нь jQuery номын сангийн файлыг оруулсан. Гурав дахь хавсаргасан файл нь Autocomplete-ийг хэрэгжүүлэхэд шаардлагатай.

Автоматаар гүйцээх виджет нь HTML нарийн төвөгтэй тэмдэглэгээг шаарддаггүй. Зөвхөн текст оруулах талбар хангалттай, i.e. type шинж чанартаа текстийн утгатай ердийн оролтын элемент. Сонгосон сэдвийн дагуу загварчлахын тулд нэмэлт тэмдэглэгээг нэмж болно.

Шошго:

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

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; ("#tags").autocomplete(( эх сурвалж: availableTags ));

Зөвлөмж бүхий массивыг availableTags хувьсагч дээр бэлтгэсэн. Дараа нь бид оролтын элементийг танигчаар нь сонгож, автоматаар гүйцээх аргыг ашигласан бөгөөд энэ нь тохиргоотой объект руу шууд дамжуулагдсан. Одоогоор энэ нь өгөгдлийн эх сурвалжийг зааж өгдөг source гэсэн ганц өмчтэй объект юм. Манай тохиолдолд availableTags массивыг зааж өгсөн болно.

Үнэн хэрэгтээ бид тохиргооны объектын бусад шинж чанаруудыг ашиглан виджетийг бага зэрэг өөрчлөх боломжтой. Эдгээр шинж чанаруудын жагсаалт энд байна:

эх сурвалж – сонголт нь анхдагч утгагүй бөгөөд тодорхойлогдсон байх ёстой. Опционы утга нь мөр, массив эсвэл функц байж болно. Ямар ч тохиолдолд өгөгдлийн эх сурвалжийг энэ сонголтод зааж өгөх ёстой.
minLength - өгөгдмөл утга нь 1. Энэ сонголт нь зөвлөмжийг идэвхжүүлэхийн өмнө оролтын талбарт оруулах шаардлагатай тэмдэгтүүдийн тоог заана. Олон байрлалтай жагсаалтад локал өгөгдлийг ашиглахад 0 утга хэрэгтэй. Мэдээлэл авахын тулд серверээс хүсэлт гаргах, нэг оруулсан тэмдэгт нь хэдэн мянган зүйлтэй тохирч болох том жагсаалтыг ашиглах үед энэ утгыг нэмэгдүүлэх шаардлагатай.
саатал – өгөгдмөл утга нь 300. Энэ сонголт нь өгөгдөл хүлээн авах хүсэлтийг идэвхжүүлэхийн тулд дараагийн товчлуурыг дарсны дараа хэдэн миллисекунд өнгөрөхийг зааж өгнө. Орон нутгийн өгөгдлийг ашиглах үед тэг утга нь утга учиртай болно. Серверийн асуулга ашиглах үед энэ сонголт дахь тэг утга нь ноцтой ачаалал үүсгэж болзошгүй.
appendTo – өгөгдмөл утга "бие". Энэ сонголтын утга нь jQuery сонгогч байж болно. Хэрэгслийн унадаг цэсийг аль элементэд нэмэхийг тодорхойлно.
идэвхгүй - өгөгдмөл утга нь худал байна. Хэрэв үнэн гэж тохируулсан бол автоматаар гүйцээх виджетийн функцийг эхлүүлэх үед ашиглах боломжгүй боловч дараа нь, жишээлбэл, зарим нөхцөл хангагдсан үед идэвхжүүлж болно.

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; ("#tags").autocomplete(( эх сурвалж: availableTags, сонгох: функц(үйл явдал, ui) ( alert("Үйл явдал: " + event.type + ",\nутга: " + ui.item.value); ) ) );

Энд бид сонгох шинж чанарыг нэмсэн бөгөөд хэрэглэгч зөвлөмжийн жагсаалтаас утгыг сонгох үед дуудагдах функцийг тодорхойлсон. функц нь хоёр аргумент авдаг: эхнийх нь үйл явдлын объект, хоёр дахь нь тусгай ui объект юм. Эдгээр объектын шинж чанарт хандах хандалтыг зохион байгуулснаар та хэрэгтэй мэдээлэл авах боломжтой (бид үүнийг анхааруулах цонхонд харуулдаг).

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

үүсгэх - Үйл явдал автоматаар бөглөхэхлүүлэх үед тохиолддог.
хайх - үйл явдал автоматаар гүйцээх хайлтхүсэлтийг биелүүлэхээс өмнө тохиолддог. Хэрэв энэ сонголтод тодорхойлсон функц худал буцаавал хүсэлтийг илгээхгүй.
нээлттэй - үйл явдал автоматаар бөглөх нээлттэйунадаг зөвлөмжүүдийн жагсаалт нээгдэх мөчид тохиолддог.
анхаарал хандуулах - үйл явдал автоматаар гүйцээх фокусСанамж жагсаалтын аль нэг зүйлд анхаарлаа төвлөрүүлэх бүрт тохиолддог.
сонгох - үйл явдал автоматаар дуусгах сонголтСанамж жагсаалтын аль нэгийг сонгосон үед тохиолддог.
хаах - үйл явдал автоматаар бөглөхзөвлөмжийн жагсаалт хаагдсан үед тохиолддог. Тухайн зүйлсийн аль нэгийг сонгосон эсэхээс үл хамааран үйл явдал тохиолддог.
өөрчлөлт - үйл явдал автоматаар гүйцээх өөрчлөлтжагсаалтын аль нэгийг сонгосны дараа үүснэ. Үйл явдал үргэлж хаагдсаны дараа тохиолддог.

Энэхүү виджет нь функцийг цаашид өргөжүүлэх зарим аргуудтай.

Жишээлбэл, HTML тэмдэглэгээнд хэд хэдэн товчлуур нэмнэ үү:

Хайлтын "as" Хаах шошго:

Энд JS код байна:

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; ("#tags").autocomplete(( эх сурвалж: availableTags, minLength: 0 )); "); )); $("#close"). дарна уу(функц())( $("#tags").autocomplete("хаах"); )); ));

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

Бүх боломжит аргуудын тайлбарыг доор харуулав.

устгах – .autocomplete('устгах') нь Автоматаар гүйцээх виджетийн бүх функцийг бүрэн устгадаг. Элементүүдийг эхлүүлэхийн өмнөх төлөв рүү буцаана.
идэвхгүй болгох – .autocomplete(‘идэвхгүй болгох’) нь виджетийн бүх функцийг түр хугацаанд идэвхгүй болгодог. Та идэвхжүүлэх аргыг ашиглан дахин идэвхжүүлж болно.
идэвхжүүлэх – .autocomplete('идэвхжүүлэх') нь хэрэв өмнө нь идэвхгүй болгох аргыг ашиглан идэвхгүй болгосон бол бүх виджетийн функцийг ашиглахыг зөвшөөрдөг.
option – .autocomplete('option', optionName, ) энэ аргыг ашиглан эхлүүлсний дараа ямар ч виджетийн сонголтын утгыг тохируулах боломжтой.
option – .autocomplete('option', optionName) энэ аргыг ашиглан эхлүүлсний дараа ямар ч виджетийн сонголтын утгыг авах боломжтой.
widget – .autocomplete('widget') Энэ аргыг автоматаар гүйцээх функц бүхий элементийг төлөөлөх объектод хандахад ашиглаж болно.
хайлт – .autocomplete(’search, ‘) Энэ аргыг ашигласнаар та хоёр дахь параметрийг дамжуулахгүйгээр жагсаалтыг бүхэлд нь нээж болно. Хэрэв та хоёр дахь параметрт тэмдэгтийн мөрийг дамжуулвал тохирох зөвлөмж бүхий жагсаалт нээгдэх болно.
хаах – .autocomplete(‘хаах’) нь өмнө нь нээсэн бол зөвлөмжийн жагсаалтыг хаадаг.

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

Заавал байх ёстой бөгөөд өгөгдлийн эх сурвалжийг тодорхойлсон эх сурвалжийн сонголт нь хүсэлтийг илгээх url-г агуулсан мөрийг хүлээн авах боломжтой. Мөн эх сурвалж дээр та хэрэгтэй зүйлээ хийх өөрийн функцийг тодорхойлж болно. Энэ нь магадгүй хамгийн уян хатан арга бол бидний дүн шинжилгээ хийх зүйл юм. Genames.org серверээс зарим мэдээллийг зөвлөмжийн жагсаалт хэлбэрээр авахыг хичээцгээе

Би бүрэн ажиллаж байгаа кодыг өгч, яаж, юу болохыг тайлбарлахыг хичээх болно.

example-17-8-4 .ui-autocomplete-loading ( дэвсгэр: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") баруун төвд давтагдахгүй; ) #хот ( өргөн: 25em; ) #log ( өндөр: 200px; өргөн: 600px; халих: автомат; ) $(функц() ( $("#хот").автоматаар гүйцээх(( эх сурвалж: функц(хүсэлт, хариу) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", өгөгдөл: ( featureClass: "P", загвар: "full", maxRows: 12, name_startsWith: request.term ) , амжилт: функц(өгөгдөл) ( хариу($.газрын зураг(дата.geonames, функц(зүй)) ( буцах ( шошго: зүйл.нэр + ", " + зүйл. улсынНэр, утга: зүйл.нэр + " (" + зүйл .countryName + ")" + " [" + item.lat + ", " + item.lng + "]" ) ) )), minLength: 3, сонгох: function(event,ui) ( $("

").text(ui.item ? ui.item.value: "Юу ч сонгоогүй!").prependTo("#log"); $("#log").attr("scrollTop", 0); ) ) ) ));
geonames.org сайтаар дэмжигдсэн

Эхлээд бид HTML тэмдэглэгээг харна. Эхний div элементэд бид зөвхөн id city бүхий оролтын элементийг сонирхож байна. Энд бид мэдээлэл авахыг хүсч буй газрынхаа эхний үсгийг (Латинаар) оруулна. Бид хүлээн авсан мэдээллийг оруулахын тулд танигчийн бүртгэлтэй div элементийг ашигладаг.

Хэрэв бид JavaScript кодыг харвал тохиргооны объект нь шаардлагатай эх шинж чанар, мөн minLength болон сонгох шинж чанарууд гэсэн гурван шинж чанарыг агуулж байгааг харах болно.
Бид зөвхөн өөрийн функцийг бичиж болох эх сурвалжийг авч үзэх болно. Энэ функц нь хоёр аргумент авдаг. Эхний аргумент нь оролтын талбарт хэрэглэгчийн оруулсан мөрийг хадгалдаг ганц шинж чанар, нэр томъёог агуулсан объект хүсэлт юм. Хоёрдахь аргумент бол хариу үйлдэл юм - хүлээн авсан хариултыг боловсруулах функц юм.

Эх сурвалжийн шинж чанарт тодорхойлсон функц дотор бид үйл ажиллагааны бараг хязгааргүй эрх чөлөөтэй байдаг. Тиймээс бид цаашид олон зүйл нуршилгүйгээр http://ws.geonames.org/searchJSON url хаяг руу ajax хүсэлтийг бичих бөгөөд dataType сонголтод бид хариуд JSON форматаар өгөгдөл хүлээн авахыг хүлээж байгааг харуулж байна. Өгөгдлийн сонголтод бид заасан url руу илгээгдэх хүсэлтийн параметр бүхий объектыг тодорхойлно ( Параметрүүд яагаад яг ийм байна вэ - та geonames.org сервер дээрх API баримт бичгийг үзэх хэрэгтэй). Сүүлчийн параметрт бид хэрэглэгчийн оруулсан хүсэлтийг дамжуулдаг.term.

Ajax хүсэлтийн дараагийн сонголт - амжилтын сонголтоор бид хариу боловсруулах функцийг хариу гэж нэрлэдэг. Аргументийн хувьд бид энэ функц руу шилжихдээ серверийн хариуд хүлээн авсан өгөгдлийг хүссэнээрээ боловсруулж болно. Бид $.map аргыг ашиглан эхний аргумент дээр дамжуулсан объектын элемент бүрт зарим функцийг ашигладаг. Функцийн дотор бид объектын шинж чанаруудад хандах боломжтой - item.countryName, item.lng, item.lat ( шинж чанарууд яагаад ийм байдаг вэ - вэб үйлчилгээнээс өгсөн API баримт бичгийг үзнэ үү). Элемент бүрийн хувьд бидний бичсэн функц нь хүлээн авсан өгөгдлийг ашиглан бидний тодорхойлсон хоёр шинж чанарыг агуулсан объектыг буцаана. Ийм объектуудын массиваас зөвлөмжийн жагсаалтыг гаргадаг.

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