Jquery ui vidjetlar : Datepicker, Dialog. Amaliy ko’rsatmalar

Jquery ui vidjetlar : Datepicker, Dialog. Amaliy ko’rsatmalar

JQUERY UI vidjetlar : Datepicker, Dialog. Amaliy ko’rsatmalar.
JQuery UI – bu JavaScript JQuery kutubxonasi ustiga o’rnatilgan foydalanuvchi interfeysi, effektlar, vidjetlar va shablonlarning moslashtirilgan to’plami hisoblanadi :

JQUERY UI vidjetlar :

1. Menu
   

2. Dialog
   

3. Datepicker

   
   

4. Button
   

5. Autocomplete
   

6. Accordion

   
   

7. Toottip
   

8. Tabs
   

9. Spinner
   

10. Slider
    

11. Progressbar

    
    

Datepicker vidjeti: Kalendar ma'lumotlarini foydalanuvchilardan matn shaklida olish har doim muammolar manbai hisoblanadi, chunki sanalarni ifodalash uchun juda ko'p turli formatlar mavjud. Datepicker vidjeti sanani tanlash va uni birlashtirilgan tarzda taqdim etishni osonlashtiradi va shu bilan xatolar ehtimolini kamaytiradi.
Sana tanlash vidjetini yaratish:
Datepicker vidjetini yaratishning ikkita asosiy usuli mavjud. Ko'pincha kirish elementiga datepicker() usuli yordamida biriktiriladi. Bu elementning ko'rinishini darhol o'zgartirmaydi, lekin element kirish fokusiga ega bo'lgach (uni bosish yoki tugmachasi yordamida boshqa elementlardan unga o'tish orqali), uning yonida taqvim ko'rsatiladi, bunda siz kerakli sanani tanlashi mumkin.
Ta'riflangan turdagi kalendarlar qalqib chiquvchi kalendarlar deb ataladi. Bunday kalendarni yaratish misoli quyida ko'rsatilgan:

Rasmda fokus kiritish maydoniga o'tkazilganda nima sodir bo'lishini ko'rsatadi:

Foydalanuvchi sanani qo'lda kiritishi yoki kalendar yordamida tanlashi mumkin. Kirish elementi fokusni yo'qotishi yoki foydalanuvchi (yoki ) tugmachasini bosishi bilan taqvim yo'qoladi.
Sana tanlash vidjeti lokalizatsiyasi:
Ko'rib turganingizdek, ko'rsatilgan misolda taqvim ingliz tilida ko'rsatilgan. jQuery UI Datepicker vidjeti butun dunyo boʻylab qoʻllaniladigan sanani formatlashning turli standartlari, jumladan, 61 ta lokalizatsiya uchun yetarli darajada toʻliq yordam beradi. Ularga kirish uchun hujjatga bitta yordamchi JavaScript-ni import qilishingiz va Datepicker vidjetiga qaysi tildan foydalanish kerakligini aytishingiz kerak. Tegishli misol quyida ko'rsatilgan:
...

...
$(function() {

$('#datep').datepicker($.datepicker.regional["ru"]);

});
...
jquery-ui-i18n.js fayli jqueryui.com dan yuklab olishingiz kerak bo'lgan jQuery UI kutubxonasi zip faylining develop-bundle/ui/i18n jildida joylashgan. Uni asl fayl bilan bir xil papkaga nusxalang va kodda ko'rsatilganidek, hujjatga qo'shing. Natija rasmda ko'rsatilgan: