jQuery пайдаланушы интерфейсі дегеніміз не. jqueryui-ге кіріспе

jQuery UI (User Interface) кітапханасы пайдаланушы интерфейсін жасауға арналған үлгі элементтерінің жинағы және jQuery кітапханасының бөлігі болып табылады. Пайдаланушы интерфейсі пайдаланушы мен веб-бет арасындағы өзара әрекетті білдіреді.

jQuery UI кітапханасының негізгі мақсаты - веб-әзірлеушілер бір типті тапсырмаларды орындауға уақыт жоғалтпау үшін олардың өмірін жеңілдету. Веб-сайттардағы ең жиі кездесетін JavaScript сценарийлері бір кітапханаға жинақталған және әзірлеушілерге қажетті параметрлер мен әдістерді алып, қолдану жеткілікті. Пайдаланушы интерфейстерін дамыту әлдеқайда жылдам болды.

Веб-сайттарда қолданылатын күнтізбелер, жүгірткілер және қалқымалы терезелер міндетті атрибутқа айналды. Неліктен әзірлеуші ​​​​әр уақытта кодты нөлден жазуы керек? Ол дайын шаблонды реттеп, оны өз веб-сайтында қолдана алатын кезде.

Ресми веб-сайт: https://jqueryui.com/

jQuery UI кітапханасын компьютерге жүктеп алуға немесе CDN сілтемесі арқылы қосуға болады.

Кітапхананы жүктеп алудың екі нұсқасы бар.

Кейбір жеке құрамдастарды ғана пайдаланатын болсаңыз, толық кітапхананы жүктеп алудың қажеті жоқ. Жүктеу құрастырушы бетінде қажетті құрамдастардан басқа барлық ұяшықтардың құсбелгісін алып тастаңыз. Мысалы, сізге тек аккордеон виджеті қажет болса, оның жанындағы құсбелгіні қойыңыз, сонда сайт жұмыс үшін қандай элементтер қажет болатынын айтады. Қажет болған жағдайда құсбелгілер автоматты түрде қойылады және қажетсіз файлдарды жүктеп алмайсыз, бұл сайттың жүктелу жылдамдығына оң әсер етеді.

Жүктеп алу түймесін баспас бұрын, компоненттердің әдемі дизайны үшін қолайлы тақырыпты таңдаңыз. Дайын тақырыптардың визуалды дизайнын Тақырып/Галерея бөлімінде қарауға болады.

Құрамдастарды стильдендірілген веб-сайтқа ендіру үшін тақырып дизайнері сізге қолайлырақ - ThemeRoller, Тақырып бөліміне өтіңіз. Сыртқы көріністі басқару тақтасын өзгерткен кезде барлық виджеттердің қалай көрінетінін бірден көресіз. Элементтің сыртқы түрін жасауды аяқтағаннан кейін жүктеу түймесін басып, тек таңдалған элементтер мен тақырыпты жүктеп алыңыз, бұл өте ыңғайлы.

Бастапқы кодты қарастырмайынша, сізге бүкіл кітапхана қажет болатын жағдай екіталай. Толық соңғы нұсқасын жүктеп алу үшін түймені басыңыз: Тұрақты.

Жүктелген кітапхана CDN арқылы қосылған, жалғыз айырмашылығы, сілтемелердің URL мекенжайлары осы файлдарды хостингке орналастыратын қалтаға апарады.

Көрсетілімдер бөлімінде сайттағы қандай тапсырмаларды (демонстрациялық мысалдар) кітапхана арқылы шешуге болатынын анық көруге болады.

Виджет мысалын қарастырайық - Құрал кеңесі. Бұл виджеттің мақсаты тақырып атрибутында көрсетілген құралдар кеңесін әдемі ашу болып табылады.

Біз әдеттегідей HTML құрылымын жасаймыз. p тармағында біз сіздің жасыңыз үшін енгізу өрісін орналастырамыз. Мәтін өрісінде мәтінмен тақырып атрибутын көрсетеміз «Жасыңызды көрсетіңіз». Біз бұл элементке құралдар кеңесінің виджетін қолданамыз.

Сіздің жасыңыз:

DOM ағашын жүктегеннен кейін құжат нысанында біз құралдар кеңесі әдісін шақырамыз. Бұл әдісті басқа бет элементтеріне қолдануға болатындай етіп біз бүкіл бетке (құжатқа) бірден қол жеткіземіз. Құрал кеңесі әдісін шақырғаннан кейін тақырып атрибутының мәндері құралдар кеңесінде көрсетіледі.

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 кітапханаларына қарағанда біршама қиынырақ. Бұл процесс көп еңбекті қажет етпейді, бірақ түсіндіруді қажет етеді, бұл мақала осыған арналған. Мысалдар арқылы жұмыс істеу үшін сізге тек кітапхананың әзірлеу нұсқасын орнату қажет, бірақ төменде өндірісті орналастыруға бағытталған кішірейтілген файлдарды орнату жолы және мазмұнды тарату желілері (CDNs) арқылы jQuery UI пайдалану жолы сипатталған.

JQuery UI кітапханасын жүктеу процесі басқа JavaScript кітапханаларына қарағанда біршама күрделірек, бірақ нәтижелер күш салуға тұрарлық. jQuery UI кітапханасы функционалдықтың бес саласын қамтиды және сізге тек қажетті құрамдастарды қоса, жүктеу мұрағатын өзіңіз конфигурациялау мүмкіндігі беріледі. Бұл бөлім сізді jQuery UI кітапханасының барлық мүмкіндіктерімен таныстырады, бірақ нақты веб-қосымшалармен жұмыс істегенде, браузерлер жүктеген кітапхананың өлшемін азайту үшін қажет емес құрамдастарды жоюға болады.

Жеке jQuery UI кітапханасын жасауды бастамас бұрын, тақырыпты таңдауыңыз керек. jQuery UI кітапханасы сіз пайдаланатын кез келген құралдың көрінісін өзгертуді жеңілдететін көптеген опциялар мен конфигурация опцияларын ұсынады. Шындығында, қол жетімді таңдаулардың саны соншалықты үлкен, ол кейде шынымен таң қалдырады.

JQuery UI веб-сайтында сіз арнайы қолданбаның қызметтерін пайдалана аласыз - тақырыпты теңшеушісі (Themeroller), бірақ сонымен қатар пайдалануға толығымен дайын алдын ала анықталған тақырыптар галереясы бар, олардың ішінен өзіңізге сәйкес келетінін таңдауға болады. көп, және осылайша сіздің өміріңізді жеңілдетеді.

jqueryui.com сайтына кіріп, Тақырыптар түймесін басыңыз. Бұл jQuery UI виджеттерін және олардың сол жағындағы параметрлер тақтасын көрсететін ThemeRoller бетін ашады, оның көмегімен суретте көрсетілгендей тақырып опцияларын орнатуға болады:

Егер сізде бұрыннан ұстануға тиісті визуалды стиль болса және JQuery UI құралдарының көрнекі интерфейсі сайттың немесе қолданбаның қалған бөлігімен сәйкес келуін қаласаңыз, «Өзіңізді айналдыру» қойындысы (әдепкі бойынша таңдалған) ) керек. JQuery UI кітапханасы пайдаланатын CSS мәнерлер жинағын пайдаланып дизайнның кез келген аспектісін өзгертуге болады.

Дайын тақырыптардың бірін алу үшін Галерея қойындысына өтіңіз. Жазу кезінде галерея түс опцияларының кең ауқымын қамтитын 24 тақырыпты қамтиды - дыбыссыз және нәзік реңктерден ашық және қиынға дейін. Галерея тақырыптарын басқан сайын, беттің қалған бөлігінде көрсетілетін виджеттердің көрінісі сәйкесінше жаңартылып, қолданбаның қандай болуы мүмкін екенін көруге мүмкіндік береді:

jQuery UI үшін пайдаланылатын әдепкі тақырып UI жеңілдігі деп аталады, бірақ бұл тақырыптың контрасты жеткіліксіз, сондықтан мен сәл жақсырақ көрінетін Sunny тақырыбын қолданамын. Енді сізден талап етілетін жалғыз нәрсе - сізге сәйкес тақырыптың атын есте сақтау.

Тақырыпты таңдағаннан кейін сіз өзіңіздің jQuery UI кітапханасын жүктеп алуды бастауға болады. Жүктеу құрастырушы бетіне өту үшін беттің жоғарғы жағындағы Жүктеп алу түймесін басыңыз. Төрт функционалды топқа бөлінген jQuery UI құрамдастарының тізімін көресіз: UI негізгі, өзара әрекеттесулер, виджеттер және әсерлер.

Жобаңызға шын мәнінде қажет мүмкіндіктерді ғана таңдай отырып, сіз браузерлер жүктеп алатын файлдар жиынтығының өлшемін азайтасыз. Бұл өз алдына жаман идея емес, бірақ мен басқа көзқарасты ұстанамын. Менің көзқарасым бойынша, коммуникациялық өткізу қабілеттілігінің бір бөлігін үнемдеп, jQuery UI интерфейсін браузерлерге мазмұнды тарату желілерінің біріне жеткізу тапсырмасын кейінірек талқылайтынын жүктеген дұрыс.

Мысалдарды іске қосу үшін сізге барлық құрамдас бөліктер қажет болады, сондықтан барлық ұяшықтардың белгіленгенін тексеріңіз.

Тізімдегі кейбір құрамдастардың арасында тәуелділіктер бар, бірақ кітапхананың жеке нұсқасын жасаған кезде бұл туралы ойламауыңыз мүмкін. Компонентті таңдасаңыз, оған тәуелді барлық құрамдас бөліктер бір уақытта жүктеледі.

Келесі қадам - ​​тақырыпты таңдау. Бұл суретте көрсетілгендей беттің төменгі жағында орналасқан ашылмалы тізім арқылы жасалады:

Сондай-ақ жүктеу мұрағатына қосылатын jQuery UI кітапханасының нақты нұсқасын таңдау мүмкіндігі бар. Сізге jQuery кітапханасының 1.3.2 нұсқасынан бастап барлық нұсқаларымен жұмыс істейтін Тұрақты нұсқаны жүктеп алу қажет.

Барлық құрамдастарды таңдап, тақырыпты және тұрақты нұсқаны таңдағаннан кейін, Жүктеу түймесін басу арқылы өзіңіз жасаған jQuery UI кітапханасының жүктеп алу мұрағатын жүктеп алыңыз.

jQuery UI жүктеп алуында кітапхананы әзірлеуде де, өндірісте де пайдалану үшін қажетті барлық файлдар бар. Мысалдармен жұмыс істеу үшін сізге қысылмаған бастапқы коды бар және әзірлеу кезінде пайдалануға арналған файлдар қажет. Қандай да бір мәселеге тап болсаңыз, jQuery UI кітапханасының ішкі бөліктерімен танысу үшін кодты оңай тексере аласыз, бұл сценарийлеріңізді жөндеуде баға жетпес болады.

Келесі файлдар мен қалталарды мысал файлдар қалтасына көшіру керек:

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

develop-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 файлына әсер етуі мүмкін. Таза орнатуды орындау үшін бұл файлдарды сервер каталогына көшіріңіз.

jQuery кітапханасын жүктеу үшін CDN пайдалану мәселесі бұрын қозғалған болатын. Егер сіз осы тәсілдің жанкүйері болсаңыз, 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 кітапханасының мүмкіндіктерімен көрнекі түрде танысу үшін мына бетке кіріңіз: Көрсетілімдер және құжаттама - веб-сайтта jqueryui.com.

Енді jQuery UI не екенін түсінгеннен кейін, жүктеуге қажетті құрамдастарды таңдауды бастауға болады: UI Core (UI негізгі функциялары), Өзара әрекеттесулер (өзара әрекеттесулер), Виджеттер (виджеттер), Эффекттер (эффектілер) және Тақырып (дизайн тақырыптары) - осылайша jQuery UI кітапханасының жеке көшірмесін жасаңыз. Ол үшін мына бетке кіріңіз: Жүктеп алуды жасаңыз. Онда jQuery UI кітапханасының соңғы тұрақты немесе бұрынғы нұсқасын жылдам жүктеп алуға болады.

Сіз жүктеп алған jQuery UI кітапханасының ZIP мұрағаты мыналарды қамтиды:

JQuery UI кітапханасын қосу үшін әдетте үш сілтеме жеткілікті: UI тақырыбы CSS, jQuery кітапханасы және jQuery UI. Бұл келесідей болуы мүмкін:

Қажетті файлдарды қосқаннан кейін бетіңізге қажетті виджеттерді қосуға болады. Мысалы, DatePicker жасау үшін (ағылшын тілінен. күнді таңдау, мәтін ұясын қосыңыз:

Сондай-ақ JavaScript коды:

$(функция())( $("#date").datepicker(); ));

Жоғарыдағы мысалды түсіндіретін шолғыштың нәтижесі келесідей болады:

jQuery UI бірнеше жолмен теңшеуге болады. Сіз jQuery UI кітапханасының көшірмесін қажетті құрамдастармен қалай жүктеуге болатынын білесіз, бірақ оны іске асыру үшін осы кодты теңшеудің басқа нұсқалары бар.

Опцияларды пайдалану. jQuery UI ішіндегі әрбір компонентте бірнеше әдепкі параметрлер бар. Сонымен қатар, сіз оларды әрқашан «опция» арқылы өзгерте аласыз (ағылшын тілінен. опция), қажетті мәнді компонентке беру.

Мысалы, DatePicker виджеті үшін күн пішімін орнату үшін опцияны пайдалана аласыз: dateFormat.

$("#date").datepicker(( dateFormat: "yy-aa-dd" ));

Виджет келесідей іске қосылғаннан кейін опция мәнін алуға болады:

var dateFormat = $("#date").datepicker("опция", "dateFormat");

Виджетті іске қосқаннан кейін опция мәнін келесідей көрсетуге болады:

$("#date").datepicker("опция", "күн пішімі", "жж-мм-кг");

Көрнекі теңшеу. Жеке тақырыпты теңшеу үшін jQuery UI интерфейсінің құрамдастарын көрнекі түрде теңшеуге мүмкіндік беретін ThemeRoller бағдарламасын қамтиды. Бетке кіру арқылы сіз осы құралды пайдалана аласыз және туралы көбірек біле аласыз:

Мен блогта ұзақ уақыт бойы ештеңе жазбадым, және мен jQuery JavaScript кітапханасына арналған қосымшасы jQuery UI жүйесіне енгізілген Автотолтыру виджеті туралы айту үшін біраз уақыт алдым.

Автотолтыру виджеті пайдаланушы енгізу өрісін толтырған кезде сәйкес мәндер тізімін ұйымдастыруға көмектеседі.

Алдымен, бізге қажет файлдарды алу үшін jQuery UI веб-сайтындағы бетке кірейік. Біз қажет емес нәрселерді жүктеп алмау үшін «Барлық құрамдас бөлікті таңдауды алып тастау» сілтемесін басамыз, содан кейін бізге қажет нәрсені ғана таңдаймыз - Автотолтыру құсбелгісін қойыңыз және онымен бірге «Негізгі», «Виджет» және «Позиция» құсбелгілері қойылғанын көріңіз. Автотолтыру виджеті осы файлдардың жұмыс істеуіне байланысты.

Сонымен қатар, оң жақта таңдаулы дизайн тақырыбын таңдауға болатын ашылмалы тізім бар. Егер бәрі дайын болса, «Жүктеу» түймесін басып, мұрағатты алыңыз. Виджеттің мүмкіндіктерін әзірлеушінің веб-сайтында бағалауға болады. Мен жай ғана орыс тілінде және мүмкіндігінше қарапайым тілде мұны қалай жасауға болатынын түсіндіруге тырысамын.

Сонымен, алдымен HEAD бөлімінде мұрағаттағы бірнеше файлдарды қосу керек.

Алдымен виджетті сәндеу файлын, содан кейін jQuery кітапхана файлын қостық. Үшінші қосылған файл Автотолтыруды жүзеге асыру үшін қажет.

Автотолтыру виджеті күрделі HTML белгілеуді қажет етпейді. Тек мәтін енгізу өрісі жеткілікті, яғни. 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"]; ("#тегтер").автотолтыру(( көзі: қолжетімдіТагтар ));

availableTags айнымалысында кеңестері бар массив дайындалды. Содан кейін біз оның идентификаторы бойынша енгізу элементін таңдадық және автоматты толтыру әдісін қолдандық, ол бірден параметрлері бар нысанды жіберді. Әзірге бұл дерек көзін көрсететін жалғыз қасиеті бар нысан, source . Біздің жағдайда availableTags массиві көрсетілген.

Шын мәнінде, біз параметрлер нысанының басқа сипаттарын пайдаланып виджетті аздап теңшей аламыз. Міне, осы қасиеттердің тізімі:

көз – опцияның әдепкі мәні жоқ және оны анықтау керек. Опция мәні жол, массив немесе функция болуы мүмкін. Кез келген жағдайда, деректер көзі осы опцияда көрсетілуі керек.
minLength - әдепкі мән 1. Бұл опция кеңестер белсендірілмес бұрын енгізу өрісіне енгізілуі керек таңбалар санын көрсетеді. 0 мәні бірнеше позициялары бар тізімдер үшін жергілікті деректерді пайдалану кезінде пайдалы. Бұл мән деректерді алу үшін серверге сұрауларды пайдаланған кезде және бір енгізілген таңба бірнеше мың элементтерге сәйкес келетін үлкен тізімдерді пайдаланған кезде көбейтілуі керек.
кідіріс – әдепкі мән 300. Бұл опция деректерді қабылдау сұрауының іске қосылуы үшін келесі пернені басқаннан кейін өтуі керек миллисекундтар санын көрсетеді. Жергілікті деректерді пайдалану кезінде нөл мәні мағыналы болады. Сервер сұрауларын пайдаланған кезде, бұл опциядағы нөлдік мән елеулі жүктемені тудыруы мүмкін.
appendTo – әдепкі мән «дене». Бұл опцияның мәні jQuery селекторы болуы мүмкін. Құрал кеңесінің ашылмалы тізімі қай элементке қосылуы керектігін анықтайды.
өшірілген – әдепкі мән жалған. True мәніне орнатылса, Автотолтыру виджетінің функциясы баптандыру кезінде қол жетімді болмайды, бірақ кейінірек, мысалы, кейбір шарт орындалғанда қосылуы мүмкін.

$(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"]; ("#тегтер").autocomplete(( көзі: қолжетімдіТагтар, таңдаңыз: функция(оқиға, ui) ( alert("Оқиға: " + event.type + ",\nмән: " + ui.item.value); ) ) );

Мұнда біз таңдау сипатын қостық, мұнда пайдаланушы кеңестер тізімінен мән таңдаған кезде шақырылатын функцияны анықтадық. функция екі аргументті қабылдайды: біріншісі - оқиға нысаны, екіншісі - арнайы ui нысаны. Осы объектілердің қасиеттеріне қол жеткізуді ұйымдастыру арқылы сіз пайдалы ақпаратты ала аласыз (біз оны ескерту терезесінде көрсетеміз).

Бұл виджет жауап бере алатын жалғыз оқиға емес - мұнда параметрлері бар нысандағы сипаттың атын, event.type ішіндегі оқиғаның атауын және оқиғаның сипаттамасын көрсететін олардың толық тізімі берілген:

жасау – Оқиға автотолтыруинициализациялау сәтінде орын алады.
іздеу – оқиға автотолтырусұрау орындалғанға дейін орын алады. Осы опцияда анықталған функция жалған мәнін қайтарса, сұрау жіберілмейді.
ашық – оқиға автотолтырукеңестердің ашылмалы тізімі ашылған сәтте орын алады.
фокус – оқиға автотолтыру фокускеңестер тізімінің элементтерінің бірі фокус алған сайын орын алады.
таңдау - оқиға автотолтыру таңдаукеңестер тізімінің элементтерінің бірі таңдалғанда орын алады.
жабу – оқиға автотолтырукеңестер тізімі жабылған кезде пайда болады. Оқиға элементтердің біреуі таңдалған-таңдалмағанына қарамастан орын алады.
өзгеріс – оқиға автотолтырутізім элементтерінің бірі таңдалғаннан кейін орын алады. Оқиға әрқашан жабылғаннан кейін орын алады.

Виджетте оның функционалдығын одан әрі кеңейтуге болатын кейбір әдістер де бар.

Мысалы, HTML белгілеуіне бірнеше түймені қосыңыз:

«қалай» іздеу Тегтерді жабу:

Міне, 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"]; ("#тегтер").autocomplete(( көзі: қолжетімдіТаглар, minLength: 0 )); "); )); $("#жабу").басыңыз(функция())( $("#тегтер").автотолтыру("жабу"); )); ));

Енді «қалай» іздеу түймесін басу арқылы біз енгізу элементіне «қалай» таңбаларын енгізгендей қолданушының әрекеттерін имитациялай аламыз. Жабу түймесін басу арқылы біз кеңестер тізімін жабамыз, егер ол бұрын ашылған болса.

Төменде барлық қолжетімді әдістердің сипаттамасы берілген:

жою – .autocomplete('жою') Автотолтыру виджетінің барлық функцияларын толығымен жояды. Элементтерді инициализация алдындағы күйіне қайтарады.
өшіру – .autocomplete («өшіру») барлық виджет функцияларын уақытша өшіреді. Қосу әдісі арқылы оны қайта қосуға болады.
қосу – .autocomplete('қосу') барлық виджет функцияларын пайдалануға мүмкіндік береді, егер ол бұрын өшіру әдісі арқылы өшірілген болса.
опция – .autocomplete('option', optionName, ) осы әдісті пайдаланып, инициализациядан кейін кез келген виджет опциясының мәнін орнатуға болады.
опция – .autocomplete('option', optionName) осы әдісті пайдаланып, инициализациядан кейін кез келген виджет опциясының мәнін алуға болады.
виджет – .autocomplete('виджет') Бұл әдісті Автотолтыру функциясы бар элементті көрсететін нысанға қатынасу үшін пайдалануға болады.
іздеу – .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") оң жақ орталық қайталанбайды; ) #city ( ені: 25em; ) #log ( биіктігі: 200px; ені: 600px; толып кету: авто; ) $(функция() ( $("#city").автотолтыру(( көзі: функция(сұрау, жауап) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", деректер: ( featureClass: "P", стиль: "толық", maxRows: 12, name_startsWith: request.term ) , табысты: функция(деректер) (жауап($.карта(деректер.geonames, функция(элемент)) ( қайтару ( белгі: элемент.аты + ", " + элемент.ел аты, мән: элемент.аты + " (" + элемент .countryName + ")" + " [" + item.lat + ", " + item.lng + "]" ) ) )), minLength: 3, таңдаңыз: функция(оқиға,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 құжаттамасын қараңыз). Біз жазған функция әрбір элемент үшін алынған деректерді пайдаланып өзіміз анықтаған екі қасиеті бар нысанды қайтарады. Осындай объектілердің алынған массивінен кеңестер тізімі құрастырылады.

Жалпы, осындай бірдеңе... Қорытындылай келе, үлкен адамдық өтініш - түсініктемелерде, өтінемін, сіз мақтауға немесе ұрыса аласыз. Техникалық сұрақ қойғыңыз келсе, оны мына мекенжайдан сұраңыз