Ինչ է jquery օգտագործողի միջերեսը: Ներածություն jqueryui

jQuery UI (User Interface) գրադարանը օգտատիրոջ միջերես ստեղծելու համար նախատեսված կաղապարային տարրերի հավաքածու է և jQuery գրադարանի մի մասն է։ Օգտվողի միջերեսը վերաբերում է օգտագործողի և վեբ էջի միջև փոխգործակցությանը:

jQuery UI գրադարանի հիմնական նպատակն է հեշտացնել վեբ մշակողների կյանքը, որպեսզի նրանք ժամանակ չկորցնեն նույն տեսակի առաջադրանքները կատարելու վրա: Կայքերում ամենատարածված JavaScript սկրիպտները հավաքվել են մեկ գրադարանում, և մշակողները պարզապես պետք է վերցնեն և կիրառեն անհրաժեշտ պարամետրերն ու մեթոդները: Օգտվողի միջերեսների մշակումը դարձել է շատ ավելի արագ:

Կայքերում օգտագործվող օրացույցները, սլայդերները և թռուցիկները արդեն դարձել են պարտադիր հատկանիշ: Այսպիսով, ինչո՞ւ է ծրագրավորողը պետք ամեն անգամ զրոյից կոդ գրի: Երբ նա կարող է հարմարեցնել պատրաստի ձևանմուշը և օգտագործել այն իր կայքում։

Պաշտոնական կայք՝ https://jqueryui.com/

jQuery UI գրադարանը կարելի է ներբեռնել ձեր համակարգչին կամ միացնել CDN հղման միջոցով:

Գրադարանը ներբեռնելու երկու տարբերակ ունեք։

Դուք հաստատ կարիք չունեք ներբեռնելու ամբողջ գրադարանը, եթե պատրաստվում եք օգտագործել միայն որոշ առանձին բաղադրիչներ: Download Builder էջում դուք հանում եք բոլոր վանդակները, բացառությամբ ձեզ անհրաժեշտ բաղադրիչների: Օրինակ, եթե Ձեզ անհրաժեշտ է միայն ակորդեոնի վիջեթը, ապա դրա կողքի վանդակում նշեք, և կայքը ձեզ կասի, թե ինչ տարրեր են անհրաժեշտ աշխատանքի համար։ Նշման վանդակները կտեղադրվեն ավտոմատ կերպով, որտեղ անհրաժեշտ է, և դուք չեք ներբեռնի ավելորդ ֆայլեր, ինչը դրականորեն կազդի կայքի բեռնման արագության վրա:

Նախքան ներբեռնման կոճակը սեղմելը, ընտրեք հարմար թեմա բաղադրիչների գեղեցիկ ձևավորման համար: Պատրաստի թեմաների վիզուալ դիզայնը կարող եք դիտել Թեմա/Պատկերասրահ բաժնում։

Բաղադրիչները արդեն ոճավորված վեբկայքում ներդնելու համար ձեզ ավելի հարմար է թեմայի դիզայները՝ ThemeRoller, գնացեք Թեմա բաժին: Երբ փոխեք արտաքին կառավարման վահանակը, անմիջապես կտեսնեք, թե ինչպիսի տեսք ունեն բոլոր վիդջեթները: Տարրի արտաքին տեսքի ստեղծումից հետո սեղմեք ներբեռնման կոճակը և ներբեռնեք միայն ընտրված տարրերն ու թեման, ինչը շատ հարմար է։

Իրավիճակը, երբ ձեզ անհրաժեշտ է ամբողջ գրադարանը, քիչ հավանական է, եթե չնայեք աղբյուրի կոդը: Ամբողջական վերջին տարբերակը ներբեռնելու համար սեղմեք կոճակի վրա՝ Կայուն:

Ներբեռնված գրադարանը միացված է նույն կերպ, ինչ CDN-ի միջոցով, միայն այն տարբերությամբ, որ հղումների URL-ները կհանգեցնեն այն թղթապանակին, որտեղ դուք տեղադրում եք այս ֆայլերը ձեր հոսթինգում։

Դեմո բաժնում դուք կարող եք հստակ տեսնել, թե կայքի որ առաջադրանքները (դեմո օրինակները) կարելի է լուծել գրադարանի միջոցով:

Դիտարկենք վիդջեթի օրինակ՝ Tooltip: Այս վիջեթի նպատակն է գեղեցիկ բացել վերնագրի հատկանիշում նշված գործիքի հուշումը:

Մենք ստեղծում ենք HTML կառուցվածքը, ինչպես միշտ: p պարբերությունում մենք տեղադրում ենք մուտքագրման դաշտ ձեր տարիքային մուտքագրման համար: Տեքստի դաշտում տեքստով նշում ենք վերնագրի հատկանիշը «Խնդրում եմ նշել ձեր տարիքը». Մենք այս տարրի վրա կկիրառենք գործիքի հուշման վիդջեթը:

Քո տարիքը:

DOM ծառը բեռնելուց հետո փաստաթղթի օբյեկտի վրա մենք կանվանենք Tooltip մեթոդը։ Մենք միանգամից մուտք ենք գործում ամբողջ էջը (փաստաթուղթը), որպեսզի այս մեթոդը կիրառվի էջի այլ տարրերի վրա: Tooltip մեթոդը կանչելուց հետո վերնագրի հատկանիշի արժեքները կցուցադրվեն գործիքի հուշում:

Առաջին հարցը, որ առաջանում է jQuery գրադարանի հետ աշխատելու ժամանակ, այն է, թե ինչպես միացնել այն: Տարօրինակ է, որ ես ավելի վաղ չէի գրել այս մասին և հիմա որոշեցի լրացնել այս բացը:

Այս հոդվածում ես ձեզ կասեմ, թե ինչպես ճիշտ ավելացնել jQuery սովորական html կայքէջում և հայտնի շարժիչների վրա:

Գրադարանը միացնելու ամենատարածված միջոցը: Նախ, դուք պետք է ներբեռնեք վերջին տարբերակը մշակողի կայքից: Ներբեռնման էջը ներկայացնում է գրադարանի մի քանի տարբերակներ, օրինակ՝ այժմ առաջարկում է ներբեռնել «Սեղմված, արտադրական jQuery 3.1.1» և «Չսեղմված, զարգացող jQuery 3.1.1»: Առաջին տարբերակը գրադարանի սեղմված տարբերակն է, դրանից բոլոր մեկնաբանությունները հեռացվել են, այս դեպքում գրադարանը շատ ավելի քիչ տեղ է զբաղեցնում, հետևաբար այն էջը, որի վրա այն կապվելու է, ավելի արագ կբեռնվի։ Երկրորդ տարբերակը, կոպիտ ասած, գրադարանի սկզբնական կոդը է, այն կառուցված է հեշտ ընթեռնելի ձևով՝ մեկնաբանություններով և նախատեսված է հիմնականում մշակողների համար։ Ուստի խորհուրդ եմ տալիս օգտագործել գրադարանի սեղմված տարբերակը:

Գրադարանը ներբեռնելուց հետո դուք պետք է այն տեղադրեք սերվերի վրա, որտեղ գտնվում են կայքի ֆայլերը: Ես սովորաբար կայքի արմատում ստեղծում եմ «js» թղթապանակ, որտեղ պատճենում եմ անհրաժեշտ գրադարանները և այնտեղ տեղադրում իմ գործառույթներով ֆայլը:

Այժմ դուք կարող եք անմիջապես անցնել jQuery կապին: jQuery-ին միացած վեբ էջի կառուցվածքը կարող է տարբեր լինել: Բայց այն պետք է պարունակի HTML, HEAD և BODY թեգեր: Այսպիսով, jQuery-ին միացնելու համար անհրաժեշտ է ավելացնել SCRIPT պիտակ՝ HEAD թեգի ներսում գտնվող գրադարանին հղումով:

Կայքի անվանումը

Որոշ դեպքերում գրադարանը ներառվում է փակվող մարմնի պիտակից առաջ, որը կապված է դիտարկիչի կողմից HTML էջը մշակելու հերթականության հետ։ Քանի որ բրաուզերը հաջորդաբար կարդում է տողերը, ֆայլի վերջում jQuery-ն միացնելիս բրաուզերը նախ կցուցադրի կայքը, այնուհետև միացնում է դինամիկան: Դանդաղ միացմամբ այս մոտեցումը ապահովում է կայքի բեռնման արագության բարձրացում, և միայն դրանից հետո սլայդերի աշխատանքը և մնացածը։ Այս կապի կոդը այսպիսի տեսք ունի.

Կայքի անվանումը

Ուշադրություն. Ցանկալի է չփոխել jQuery գրադարանի ֆայլի անունը (հաճախ փոխվում է jquery.js), քանի որ ապագայում ֆայլի պաշտոնական անունը պահպանելը կօգնի ձեզ տեսնել, թե գրադարանի որ տարբերակն եք օգտագործում (իմ օրինակում՝ 3.1 տարբերակ։ .1 օգտագործվում է):

Այս մեթոդը լավ է, քանի որ գրադարանը միացված է կայքից և չի գտնվում ձեր կոշտ սկավառակի վրա: Սա հատկապես ճիշտ է մեծ թվով փոքր նախագծերի և վերապատրաստման համար:

Միացման այս մեթոդը կոչվում է «Միացում CDN-ի հետ»: Բովանդակության առաքման ցանցը կամ ինչպես այն ավելի հաճախ կոչվում է CDN (Content Delivery Network) սերվերների ցանց է ամբողջ աշխարհում: Նրանք օգնում են բարելավել ձեր վեբ սերվերի աշխատանքը և նվազեցնել ձեր տրաֆիկի բեռը:

Ամենատարածված CDN-ները jQuery-ին միացնելու համար.

Ես սովորաբար օգտագործում եմ Google Developers-ի կապը: Նախագծի էջում մեզ համար արդեն պատրաստվել են մի քանի հատվածներ, պարզապես պատճենեք մեզ անհրաժեշտի տողը և ներառեք այն ֆայլում: Այս միացման եղանակով կոդը կունենա հետևյալ տեսքը.

Կայքի անվանումը

Այս մեթոդի առավելությունն այն է, որ շատ կայքեր jQuery-ին միացնում են Google API-ի միջոցով, ինչը նշանակում է, որ մեծ հավանականությամբ այս գրադարանն արդեն առկա է օգտատիրոջ բրաուզերի քեշում, և այն ընդհանրապես չի բեռնվի երկրորդ անգամ:

jQuery-ն ավտոմատ կերպով ներառված է WordPress-ում, ուստի կարիք չկա ձեռքով ներառել գրադարաններ այլ տարբերակներից։ Սա տեղի է ունենում կաղապարում, օգտագործելով php կոդը.

Սա կհանգեցնի jQuery կապի տողի HEAD թեգի ներսում:

Գրելու պահին WordPress-ը առաքվում է jQuery v1.12.4-ով, սակայն, ինչպես տեսնում եք, գրադարանի տարբերակը շատ է տարբերվում վերը նշված օրինակներից: Հնարավոր է միացնել գրադարանի վերջին տարբերակը, սակայն կոնֆլիկտի հավանականություն կա։

Կոնֆլիկտից խուսափելու համար, բայց դեռ օգտագործեք գրադարանի անհրաժեշտ տարբերակը, դուք պետք է օգտագործեք jQuery-ն functions.php ֆայլում ներառելու ճիշտ եղանակը՝

jQuery UI գրադարանի տեղադրում

jQuery UI գրադարանի ներբեռնումն ու տեղադրումը որոշ առումներով ավելի դժվար է, քան մյուս JavaScript գրադարանները: Այս գործընթացը այնքան էլ աշխատատար չէ, սակայն այն բացատրություն է պահանջում, ինչին էլ նվիրված է այս հոդվածը: Օրինակների միջոցով աշխատելու համար ձեզ հարկավոր է միայն տեղադրել գրադարանի մշակման տարբերակը, բայց ստորև նկարագրված է նաև, թե ինչպես կարելի է տեղադրել մինիֆիկ ֆայլեր, որոնք ուղղված են արտադրության տեղակայմանը և ինչպես օգտագործել jQuery UI-ն բովանդակության բաշխման ցանցերում (CDN):

jQuery UI գրադարանի բեռնման գործընթացը մի փոքր ավելի բարդ է, քան JavaScript-ի մյուս գրադարանները, բայց արդյունքներն արժե ջանքեր գործադրել: jQuery UI գրադարանն ընդգրկում է ֆունկցիոնալության հինգ ոլորտներ, և ձեզ հնարավորություն է տրվում ինքնուրույն կարգավորել բեռնման արխիվը՝ ներառելով միայն անհրաժեշտ բաղադրիչները: Այս հատվածը ձեզ կներկայացնի jQuery UI գրադարանի բոլոր հնարավորությունները, սակայն իրական վեբ հավելվածների հետ աշխատելիս կարող եք վերացնել ավելորդ բաղադրիչները՝ բրաուզերների կողմից բեռնված գրադարանի չափը նվազեցնելու համար:

Նախքան սկսեք ստեղծել ձեր սեփական jQuery UI գրադարանը, դուք պետք է ընտրեք թեմա: jQuery UI գրադարանն առաջարկում է բազմաթիվ տարբերակներ և կազմաձևման տարբերակներ, ինչը հեշտացնում է ձեր օգտագործած ցանկացած գործիքի տեսքը փոխելը: Իրականում, առկա ընտրության քանակն այնքան մեծ է, որ երբեմն իսկապես ճնշող է լինում:

jQuery UI կայքում կարող եք օգտվել հատուկ հավելվածի ծառայություններից՝ թեմաների հարմարեցնող (Themeroller), բայց բացի այդ կա նախապես սահմանված թեմաների մի ամբողջ պատկերասրահ՝ լիովին պատրաստ օգտագործման համար, որից կարող եք ընտրել ձեզ հարմարը: լավագույնը և դրանով իսկ հեշտացնել ձեր կյանքը:

Սկսեք այցելելով jqueryui.com և սեղմեք Թեմաներ կոճակը: Սա կբացի ThemeRoller էջը՝ ցուցադրելով jQuery UI վիջեթները և դրանցից ձախ կարգավորումների վահանակը, որով կարող եք սահմանել թեմայի տարբերակները, ինչպես ցույց է տրված նկարում.

Եթե ​​դուք արդեն ունեք հատուկ տեսողական ոճ, որին պետք է հավատարիմ մնաք, և ցանկանում եք, որ JQuery UI գործիքների տեսողական ինտերֆեյսը համապատասխանի կայքի կամ հավելվածի մնացած մասերին, ապա «Գլորեք ձեր սեփական» ներդիրը (որը ընտրված է լռելյայն ) հենց դա է պետք: Դուք կարող եք փոխել դիզայնի ցանկացած ասպեկտ՝ օգտագործելով jQuery UI գրադարանի կողմից օգտագործվող CSS ոճի հավաքածուն:

Պատրաստի թեմաներից մեկը ստանալու համար անցեք Պատկերասրահ ներդիր: Գրելու պահին պատկերասրահը ներառում է 24 թեմա՝ ընդգրկելով գունային տարբերակների լայն շրջանակ՝ խլացված և նուրբ երանգներից մինչև վառ և սադրիչ: Երբ դուք սեղմում եք պատկերասրահի թեմաները, էջի մնացած մասում ցուցադրվող վիջեթների տեսքը համապատասխանաբար կթարմացվի՝ տալով ձեզ համտես, թե ինչպիսին կարող է լինել հավելվածը.

jQuery UI-ի համար օգտագործվող լռելյայն թեման կոչվում է UI lightness, բայց այս թեման բավարար կոնտրաստ չունի, ուստի ես կօգտագործեմ Sunny թեման, որը մի փոքր ավելի լավ տեսք ունի: Միակ բանը, որ հիմա ձեզանից պահանջվում է, դա ձեզ հարմար թեմայի անունը հիշելն է։

Թեման ընտրելուց հետո կարող եք սկսել ստեղծել ձեր սեփական jQuery UI գրադարանի ներբեռնումը: Կտտացրեք «Ներբեռնում» կոճակը էջի վերևում՝ «Ներբեռնման ստեղծող» էջ գնալու համար: Դուք կտեսնեք jQuery UI բաղադրիչների ցանկը, որը բաժանված է չորս ֆունկցիոնալ խմբերի՝ UI Core, Interactions, Widgets և Effects:

Ընտրելով միայն այն հնարավորությունները, որոնք իրականում կարիք ունեն ձեր նախագծին, դուք կնվազեցնեք այն ֆայլերի հավաքածուի չափը, որոնք բրաուզերները պետք է ներբեռնեն: Սա ինքնին վատ գաղափար չէ, բայց ես այլ մոտեցում եմ ցուցաբերում։ Իմ տեսանկյունից, շատ ավելի լավ է խնայել ձեր հաղորդակցության թողունակության մի մասը և բրաուզերներին jQuery UI-ի առաքման խնդիրը բեռնել բովանդակության բաշխման ցանցերից մեկում, որը կքննարկվի ավելի ուշ:

Օրինակները գործարկելու համար ձեզ անհրաժեշտ կլինեն բոլոր բաղադրիչները, այնպես որ համոզվեք, որ բոլոր վանդակները ստուգված են:

Ցանկի որոշ բաղադրիչների միջև կախվածություն կա, բայց դուք կարող եք չմտածել այս մասին, երբ ստեղծում եք գրադարանի ձեր սեփական տարբերակը: Եթե ​​ընտրեք բաղադրիչ, ապա բոլոր բաղադրիչները, որոնցից այն կախված է, միաժամանակ կբեռնվեն:

Հաջորդ քայլը թեմա ընտրելն է: Դա արվում է էջի ներքևում գտնվող բացվող ցանկի միջոցով, ինչպես ցույց է տրված նկարում.

Դուք նաև հնարավորություն ունեք ընտրել jQuery UI գրադարանի հատուկ տարբերակը, որը կներառվի ներբեռնման արխիվում: Ձեզ հարկավոր է ներբեռնել Stable տարբերակը, որն աշխատում է jQuery գրադարանի բոլոր տարբերակների հետ՝ սկսած 1.3.2 տարբերակից։

Բոլոր բաղադրիչներն ընտրելուց և թեման և կայուն տարբերակը ընտրելուց հետո ներբեռնեք ձեր ստեղծած jQuery UI գրադարանի ներբեռնման արխիվը՝ սեղմելով Ներբեռնում կոճակը:

jQuery UI-ի ներբեռնումը պարունակում է բոլոր ֆայլերը, որոնք անհրաժեշտ են գրադարանը ինչպես մշակման, այնպես էլ արտադրության մեջ օգտագործելու համար: Օրինակների հետ աշխատելու համար ձեզ հարկավոր են ֆայլեր, որոնք պարունակում են չսեղմված կոդ և նախատեսված են մշակման ընթացքում օգտագործելու համար: Եթե ​​որևէ խնդրի հանդիպեք, կարող եք հեշտությամբ ուսումնասիրել կոդը՝ ծանոթանալու jQuery UI գրադարանի ներքին աշխատանքին, որն անգնահատելի կլինի ձեր սկրիպտները վրիպազերծելու համար:

Դուք պետք է պատճենեք հետևյալ ֆայլերը և թղթապանակները օրինակի ֆայլերի պանակում.

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

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

թղթապանակի մշակում-փաթեթ\themes\sunny\images.

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 գրադարանը ճիշտ է ներառված: Եթե ​​էջը բացվում է նորմալ, դուք պետք է տեսնեք նկարում ցուցադրված կոճակը: Առայժմ անտեսեք սկրիպտի տարրի վրա կոճակի () մեթոդը: Թե ինչի համար է այն նախատեսված և ինչպես է այն աշխատում, կիմանաք հաջորդ հոդվածում։

Եթե ​​սխալ եք գրել դեպի երկու գրադարաններից որևէ մեկի ուղին, փոխարենը կտեսնեք պարզ հղում:

Երբ ավարտեք ձեր վեբ հավելվածի մշակումը և պատրաստ լինեք այն տեղադրել, կարող եք օգտագործել ներբեռնման արխիվում ներառված ֆայլերի նվազագույն տարբերակները: Այս ֆայլերը չափերով ավելի փոքր են, բայց դրանց բովանդակությունը հեշտ չի լինի կարդալ, եթե անհրաժեշտ լինի վրիպազերծման նպատակով: Ֆայլերի տեղակայման տարբերակներն օգտագործելու համար պատճենեք հետևյալ ֆայլերը և պանակները ձեր վեբ սերվերի գրացուցակում.

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-ը տրամադրում են jQuery UI ֆայլերի հոստինգ իրենց CDN-ներում: Մեր հիմնական օրինակի համար ես օգտագործում եմ Microsoft-ի ծառայությունը, քանի որ այն տրամադրում է ինչպես jQuery UI JavaScript ֆայլեր, այնպես էլ ստանդարտ երեսպատումներ:

CDN-ն օգտագործելու համար դուք պետք է ունենաք ձեզ անհրաժեշտ ֆայլերի URL-ները: Եթե ​​սա Microsoft-ի ծառայություն է, անցեք Microsoft Ajax Content Delivery Network էջ: Էջը ներքև ոլորելիս կտեսնեք jQuery UI-ի տարբեր տարբերակներին համապատասխան հղումների ցանկ: Սեղմեք ձեր օգտագործած տարբերակի հղումը (իմ դեպքում դա 1.10.3 տարբերակն է): Դուք կտեսնեք URL-ներ jQuery UI գրադարանի ֆայլի սովորական և փոքրացված տարբերակների համար:

Էջի մնացած մասը ցուցադրում է նախապես պատրաստված թեմաներ՝ յուրաքանչյուր թեմայի տակ ունենալով CSS ֆայլի URL:

Այս ֆայլերը ձեր փաստաթղթին CDN-ի միջոցով միացնելու համար պարզապես տեղադրեք սցենարը և կապի տարրերը համապատասխան URL-ներում, այլ ոչ թե տեղական jQuery UI ֆայլերի հղումները, ինչպես ցույց է տրված ստորև բերված օրինակում.

jQuery գրադարան $(function() ($("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 գրադարանի վերջին Stable կամ Legacy տարբերակը:

Ձեր ներբեռնած jQuery UI գրադարանի ZIP արխիվը կպարունակի հետևյալը.

jQuery UI գրադարանը միացնելու համար սովորաբար բավական է երեք հղում՝ UI թեմա CSS, jQuery գրադարան և jQuery UI։ Այն կարող է այսպիսի տեսք ունենալ.

Անհրաժեշտ ֆայլերը ներառելուց հետո կարող եք սկսել ձեր էջին անհրաժեշտ վիջեթներ ավելացնել: Օրինակ՝ DatePicker պատրաստելու համար (անգլերենից. ամսաթվի ընտրություն, ավելացրեք տեքստային պատիճ.

Եվ նաև JavaScript կոդը.

$(function())( $("#date").datepicker(); ));

Վերոնշյալ օրինակը մեկնաբանող դիտարկիչի արդյունքը կունենա հետևյալ տեսքը.

jQuery UI-ն կարգավորելի է մի քանի եղանակներով: Դուք արդեն գիտեք, թե ինչպես կարող եք բեռնել jQuery UI գրադարանի ձեր պատճենը ձեզ անհրաժեշտ բաղադրիչներով, բայց կան այս կոդը հարմարեցնելու այլ տարբերակներ՝ այն իրականացնելու համար:

Օգտագործելով ընտրանքներ. jQuery UI-ի յուրաքանչյուր բաղադրիչ ունի մի շարք լռելյայն կարգավորումներ: Միևնույն ժամանակ, դուք միշտ կարող եք դրանք փոխել՝ օգտագործելով «տարբերակը» (անգլերենից. տարբերակ), անհրաժեշտ արժեքը փոխանցելով բաղադրիչին:

Օրինակ, DatePicker վիջեթի համար ամսաթվի ձևաչափը սահմանելու համար կարող եք օգտագործել տարբերակը՝ dateFormat:

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

Դուք կարող եք ստանալ ընտրանքի արժեքը վիջեթի գործարկումից հետո հետևյալ կերպ.

var dateFormat = $("#date").datepicker("option", "dateFormat");

Դուք կարող եք նշել ընտրանքի արժեքը վիջեթը սկսելուց հետո հետևյալ կերպ.

$("#date").datepicker("option", "dateFormat", "yy-mm-dd");

Տեսողական հարմարեցում: Ձեր սեփական թեման հարմարեցնելու համար jQuery UI-ն ներառում է ThemeRoller-ը, որը թույլ է տալիս տեսողականորեն հարմարեցնել ձեր ինտերֆեյսի բաղադրիչները: Դուք կարող եք օգտագործել և ավելին իմանալ այս գործիքի մասին՝ այցելելով էջ.

Ես երկար ժամանակ բլոգում ոչինչ չեմ գրել, և վերջապես որոշ ժամանակ պահանջեցի խոսելու ավտոմատ լրացման վիդջեթի մասին, որը ներառված էր jQuery UI-ում, որը հավելում է jQuery JavaScript գրադարանի համար:

Ավտոլրացման վիդջեթն օգնում է կազմակերպել համապատասխան արժեքների ցանկը, երբ օգտվողը լրացնում է մուտքագրման դաշտը:

Նախ, եկեք այցելենք jQuery UI կայքի էջը՝ մեզ անհրաժեշտ ֆայլերը ստանալու համար: Մենք կտտացնում ենք «Deselect all component» հղմանը, որպեսզի ավելորդ բաներ չներբեռնենք, այնուհետև ընտրում ենք միայն այն, ինչ մեզ անհրաժեշտ է՝ ստուգեք «Ավտոլրացում» վանդակը և տեսեք, որ դրա հետ միասին ստուգված են «Core», «Widget» և «Position» վանդակները: Ավտոլրացման վիդջեթը կախված է այս ֆայլերի գործելուց:

Բացի այդ, աջ կողմում կա բացվող ցուցակ, որտեղ կարող եք ընտրել ձեր նախընտրած դիզայնի թեման: Եթե ​​ամեն ինչ պատրաստ է, սեղմեք Ներբեռնման կոճակը և ստացեք արխիվը: Վիջեթի հնարավորությունները կարելի է գնահատել մշակողի կայքում։ Ես պարզապես կփորձեմ ռուսերենով և հնարավորինս պարզ լեզվով բացատրել, թե ինչպես կարելի է այդ ամենն աշխատել:

Այսպիսով, նախ HEAD բաժնում դուք պետք է միացնեք մի քանի ֆայլ, որոնք գտնվում են արխիվում:

Սկզբում մենք ներառեցինք վիջեթի ոճավորման ֆայլը, այնուհետև jQuery գրադարանի ֆայլը: Երրորդ ներառված ֆայլն անհրաժեշտ է Ավտոլրացումն իրականացնելու համար:

Ավտոլրացման վիդջեթը չի պահանջում բարդ HTML նշում: Բավական է միայն տեքստի մուտքագրման դաշտը, այսինքն. սովորական մուտքային տարր, որն իր տեսակի հատկանիշում ունի տեքստային արժեք: Լրացուցիչ նշում կարող է ավելացվել՝ այն ոճավորելու համար՝ ըստ ձեր ընտրած թեմայի:

Tags:

Նախ, եկեք նայենք վիջեթի օգտագործման ամենապարզ դեպքին, երբ տեղական տվյալները օգտագործվում են խորհուրդների ցուցակ ստեղծելու համար:

$(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 զանգվածը:

Փաստորեն, մենք կարող ենք մի փոքր հարմարեցնել վիջեթը՝ օգտագործելով կարգավորումների օբյեկտի այլ հատկություններ: Ահա այս հատկությունների ցանկը.

աղբյուր – տարբերակը չունի լռելյայն արժեք և պետք է սահմանվի: Ընտրանքի արժեքը կարող է լինել տող, զանգված կամ ֆունկցիա: Ամեն դեպքում, այս տարբերակում պետք է նշվի տվյալների աղբյուրը։
minLength - լռելյայն արժեքը 1 է: Այս ընտրանքը սահմանում է նիշերի քանակը, որոնք պետք է մուտքագրվեն մուտքագրման դաշտում՝ նախքան գործիքի հուշումների ակտիվացումը: 0-ի արժեքը օգտակար է բազմաթիվ դիրքերով ցուցակների համար տեղական տվյալներ օգտագործելիս: Այս արժեքը պետք է ավելացվի, երբ օգտագործվում են տվյալներ ստանալու համար սերվերին ուղղված հարցումներ և մեծ ցուցակներ օգտագործելիս, որտեղ մեկ մուտքագրված նիշը կարող է համապատասխանել մի քանի հազար տարրերի:
հետաձգում – լռելյայն արժեքը 300 է: Այս ընտրանքը նշում է միլիվայրկյանների քանակը, որոնք պետք է անցնեն հաջորդ ստեղնը սեղմելուց հետո, որպեսզի տվյալներ ստանալու հարցումն ակտիվանա: Տեղական տվյալներ օգտագործելիս զրոյի արժեքը իմաստ ունի: Սերվերի հարցումներ օգտագործելիս այս տարբերակի զրոյական արժեքը կարող է լուրջ բեռ առաջացնել:
appendTo – լռելյայն արժեք «body»: Այս տարբերակի արժեքը կարող է լինել 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»]; ("#tags").autocomplete(( աղբյուր՝ մատչելիՏեգեր, ընտրեք՝ ֆունկցիա (իրադարձություն, UI) ( զգուշացում ("Իրադարձություն՝ " + event.type + ",\nարժեք՝ " + ui.item.value); ) ) ));

Այստեղ մենք ավելացրել ենք ընտրված հատկություն, որտեղ մենք սահմանել ենք ֆունկցիա, որը կկանչվի, երբ օգտագործողը գործիքի հուշումների ցանկից արժեք ընտրի: Ֆունկցիան ընդունում է երկու արգումենտ՝ առաջինը իրադարձության օբյեկտ է, երկրորդը՝ հատուկ UI օբյեկտ։ Այս օբյեկտների հատկությունների հասանելիությունը կազմակերպելով՝ կարող եք օգտակար տեղեկատվություն ստանալ (մենք այն ցուցադրում ենք նախազգուշացման պատուհանում):

Սա միակ իրադարձությունը չէ, որին կարող է արձագանքել վիջեթը. ահա դրանց ամբողջական ցանկը, որը ցույց է տալիս օբյեկտի սեփականության անվանումը կարգավորումներով, իրադարձության անվանումը event.type-ում և իրադարձության նկարագրությունը.

ստեղծել – Իրադարձություն ինքնալրացումտեղի է ունենում սկզբնավորման պահին:
որոնում - իրադարձություն ինքնալրացման որոնումտեղի է ունենում նախքան հարցումը կատարելը: Եթե ​​այս տարբերակում սահմանված գործառույթը վերադարձնի false, հարցումը չի ուղարկվի:
բաց - իրադարձություն ինքնալրացումտեղի է ունենում այն ​​պահին, երբ բացվում է հուշումների բացվող ցանկը:
կենտրոնացում – իրադարձություն ավտոմատ ամբողջական ֆոկուստեղի է ունենում, երբ ակնարկների ցանկի կետերից մեկը կենտրոնանում է:
ընտրել – իրադարձություն ինքնալրացման ընտրությունտեղի է ունենում, երբ ընտրված է հուշումների ցանկի տարրերից մեկը:
փակել – իրադարձություն ինքնալրացումտեղի է ունենում, երբ ակնարկների ցանկը փակ է: Միջոցառումը տեղի է ունենում անկախ այն հանգամանքից՝ ընտրվել է կետերից մեկը, թե ոչ:
փոփոխություն – իրադարձություն ավտոլրացումտեղի է ունենում ցանկի կետերից մեկի ընտրվելուց հետո: Իրադարձությունը միշտ տեղի է ունենում փակումից հետո:

Վիջեթն ունի նաև որոշ մեթոդներ, որոնց միջոցով կարող եք ավելի ընդլայնել դրա ֆունկցիոնալությունը:

Օրինակ, ավելացրեք մի քանի կոճակ HTML նշագրման մեջ.

Որոնել «որպես» Փակել Tags:

Եվ ահա 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(( source: availableTags, minLength: 0 )); որպես ");));$("#փակել").սեղմեք(function())($("#tags").autocomplete("փակել");)); ));

Այժմ, սեղմելով «Որպես» կոճակը, մենք կարող ենք նմանակել օգտատիրոջ գործողությունները, կարծես նա մուտքագրել է «որպես» նիշերը մուտքային տարրում: Սեղմելով Փակել կոճակը, մենք փակում ենք ակնարկների ցանկը, եթե այն նախկինում բացվել է։

Ստորև բերված են բոլոր առկա մեթոդների նկարագրությունները.

ոչնչացնել – .autocomplete('destroy') ամբողջությամբ հեռացնում է Ավտոլրացման վիդջեթի բոլոր գործառույթները: Վերադարձնում է տարրերը իրենց նախնական սկզբնավորման վիճակին:
անջատել – .autocomplete («անջատել») ժամանակավորապես անջատում է վիդջեթի բոլոր գործառույթները: Դուք կարող եք կրկին ակտիվացնել այն՝ օգտագործելով միացնել մեթոդը:
enable – .autocomplete('enable') թույլ է տալիս օգտագործել վիջեթի բոլոր գործառույթները, եթե այն նախկինում անջատված է եղել անջատման մեթոդով:
տարբերակ – .autocomplete('option', optionName, ) օգտագործելով այս մեթոդը, դուք կարող եք սահմանել ցանկացած վիջեթի ընտրանքի արժեքը սկզբնավորումից հետո:
տարբերակ – .autocomplete('option', optionName) այս մեթոդով դուք կարող եք ստանալ ցանկացած վիջեթի ընտրանքի արժեքը սկզբնավորումից հետո:
widget – .autocomplete('widget') Այս մեթոդը կարող է օգտագործվել օբյեկտի մուտք գործելու համար, որը ներկայացնում է Ավտոլրացման գործառույթ ունեցող տարր:
որոնում – .autocomplete('search, ') Օգտագործելով այս մեթոդը, դուք կարող եք բացել ամբողջ ցուցակը, առանց անցնելու երկրորդ պարամետրը: Եթե ​​դուք փոխանցեք նիշերի շարանը երկրորդ պարամետրում, կբացվի համապատասխան ակնարկներով ցանկ:
փակել – .autocomplete(‘close’) փակում է գործիքի հուշման ցուցակը, եթե այն նախկինում բացվել է:

Ընդհանուր առմամբ, այժմ մենք գիտենք, թե ինչպես կարգավորել և կառավարել վիջեթը, բայց մինչ այժմ մենք օգտագործել ենք բացառապես տեղական տվյալները խորհուրդների ցուցակ ստեղծելու համար: Այն հարմար է հնարավորությունները ուսումնասիրելու համար, բայց քիչ հավանական է իրական աշխատանքի համար: Իրական աշխատանքում, հավանաբար, ձեզ հարկավոր կլինի ակնարկներ ստեղծել ձեր սեփական սերվերում պահվող տվյալներից, և գուցե ընդհանրապես ոչ ձեր կողմից:

Աղբյուրի տարբերակը, որը, հիշեցնեմ, պարտադիր է և սահմանում է տվյալների աղբյուրը, կարող է ընդունել նաև url պարունակող տող, որին պետք է ուղարկվի հարցումը։ Իսկ սկզբնաղբյուրում դուք կարող եք սահմանել ձեր սեփական գործառույթը, որը կանի այն, ինչ ձեզ հարկավոր է: Սա, թերեւս, ամենաճկուն մեթոդն է, որը մենք կվերլուծենք։ Փորձենք որոշակի տվյալներ ստանալ geonames.org սերվերից՝ հուշումների ցանկի տեսքով

Ես կներկայացնեմ լիարժեք աշխատանքային ծածկագիր և կփորձեմ բացատրել, թե ինչպես և ինչ է աշխատում:

օրինակ-17-8-4 .ui-autocomplete-loading ( ֆոն՝ #FFF url ("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") աջ կենտրոն առանց կրկնության; ) #քաղաք ( լայնությունը՝ 25մ; ) #log ( բարձրությունը՝ 200px; լայնությունը՝ 600px; հորդառատ՝ ավտոմատ; ) $(function() ($("#city").autocomplete(( source: function( հարցում,պատասխան) ​​($. ajax (( url՝ «http://ws.geonames.org/searchJSON», dataType՝ «jsonp», տվյալներ՝ ( featureClass՝ «P», ոճ՝ «full», maxRows՝ 12, name_startsWith՝ request.term ) , հաջողություն՝ ֆունկցիա(տվյալներ) (պատասխան($.map(data.geonames, ֆունկցիա(հատ) ( վերադարձ ( պիտակ՝ item.name + ", " + item.countryName, արժեքը՝ item.name + " (" + item .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 և select հատկությունները։
Մենք կդիտարկենք միայն աղբյուրի սեփականությունը, որտեղ դուք կարող եք գրել ձեր սեփական գործառույթը: Այս ֆունկցիան վերցնում է երկու արգումենտ: Առաջին արգումենտը հարցումն է՝ մեկ հատկություն, տերմին պարունակող օբյեկտ, որը պահում է մուտքագրման դաշտում օգտագործողի մուտքագրած տողը։ Երկրորդ արգումենտը պատասխանն է՝ ֆունկցիա, որով կմշակվի ստացված պատասխանը։

Աղբյուրի հատկության մեջ սահմանված ֆունկցիայի ներսում մենք ունենք գրեթե անսահմանափակ գործողության ազատություն: Եվ հետևաբար, առանց հավելյալ հապաղելու, մենք այնտեղ ajax հարցում ենք գրում http://ws.geonames.org/searchJSON հասցեին, dataType տարբերակում նշում ենք, որ պատասխանում ակնկալում ենք ստանալ տվյալներ JSON ձևաչափով: Տվյալների տարբերակում մենք սահմանում ենք հարցման պարամետրերով օբյեկտ, որը կուղարկվի նշված url-ին ( ինչու են պարամետրերը հենց այսպիսին, դուք պետք է նայեք API փաստաթղթերին geonames.org սերվերում:) Վերջին պարամետրում մենք անցնում ենք request.term – այն, ինչ մուտքագրել է օգտատերը:

Ajax-ի հարցման հաջորդ տարբերակում՝ հաջողության տարբերակ, մենք անվանում ենք պատասխանի մշակման ֆունկցիա պատասխան: Փաստարկի մեջ, որը մենք անցնում ենք այս ֆունկցիային, մենք կարող ենք մշակել սերվերի պատասխանում ստացված տվյալները ցանկացած ձևով: Մենք օգտագործում ենք $.map մեթոդը՝ առաջին արգումենտում փոխանցված օբյեկտի յուրաքանչյուր տարրի վրա որոշ ֆունկցիա կիրառելու համար։ Ֆունկցիայի ներսում մենք կարող ենք մուտք գործել օբյեկտի հատկություններ - item.countryName, item.lng, item.lat ( ինչու են հատկություններն այնպիսին, ինչպիսին են դրանք, տես վեբ ծառայության կողմից տրամադրված API փաստաթղթերը) Մեր գրած ֆունկցիան յուրաքանչյուր տարրի համար վերադարձնում է երկու հատկություն պարունակող օբյեկտ, որոնք մենք ինքներս ենք սահմանել՝ օգտագործելով ստացված տվյալները: Նման օբյեկտների ստացված զանգվածից կառուցվում է ակնարկների ցանկ:

Ընդհանրապես, նման բան... Եզրափակելով, մարդկային մեծ խնդրանք՝ մեկնաբանություններում, խնդրում եմ, կարող եք սկզբունքորեն գովաբանել կամ նախատել։ Եթե ​​ցանկանում եք տեխնիկական հարց տալ, ապա տվեք այն հետևյալ հասցեով