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

Qalqib chiquvchi kalendarni ishga tushiradigan voqeani aniqlash
ShowOn opsiyasi sizga qalqib chiquvchi taqvim ko'rsatilishi kerak bo'lgan voqeani boshqarish imkonini beradi. Ushbu parametr uchta qiymatdan birini qabul qilishi mumkin:
diqqat
Qalqib chiquvchi taqvim kirish elementi kirish fokusini olganida ochiladi. Bu qiymat sukut bo'yicha ishlatiladi.
tugmasi
Qalqib chiquvchi kalendar tugmani bosish orqali ochiladi.
ikkalasi hamQalqib chiquvchi taqvim tugma bosilganda ham, kirish elementi fokusni olganida ham ko'rsatiladi.
Tugma yoki ikkala qiymatdan foydalanganda Datepicker vidjeti tugma elementini yaratadi va uni kiritish elementidan keyin darhol hujjatga joylashtiradi. ShowOn opsiyasidan foydalanish misoli quyida ko'rsatilgan:
$(function() {
$.datepicker.setDefaults($.datepicker.regional['ru']);
$('#datep').datepicker({
showOn: "both"
});

});
Rasmda ko'rsatilganidek, hujjatda tugma paydo bo'ldi. Ushbu misolda showOn opsiyasi ikkalasiga ham oʻrnatilganligi sababli, qalqib chiquvchi taqvim tugma bosilganda ham, kiritish elementi diqqat markazida boʻlganda ham koʻrsatiladi.

Datepicker vidjeti tomonidan qo‘shilgan tugma jQuery UI tugmasi vidjeti emas. Agar siz barcha tugmalar bir xil turdagi bo'lishini istasangiz, tugma elementini tanlang va jQuery UI button() usulini chaqiring.
Tugma elementi buttonImage va buttonText opsiyalari yordamida uslublanishi mumkin. Agar siz imageImage opsiyasini rasmning URL manziliga o‘rnatsangiz, Datepicker vidjeti ushbu rasmni tugmachaga joylashtiradi. Bundan tashqari, tugma bilan bog'langan standart matn (ellips) quyidagi misolda ko'rsatilganidek, buttonText opsiyasi yordamida boshqa matn bilan almashtirilishi mumkin:
$(function() {

$.datepicker.setDefaults($.datepicker.regional['ru']);

$('#datep').datepicker({
showOn: "both",
buttonText: "Выбрать"
});

});
ButtonImage va buttonImageOnly opsiyalaridan birgalikda foydalanib, tugmani rasm bilan almashtirib, butunlay qutulishingiz mumkin. Tegishli misol quyida ko'rsatilgan:

id="dpcontainer" >
Дата:

Ushbu misol right.png tasvirini o'rnatadi va buttonImageOnly opsiyasini rostga o'rnatadi. Bundan tashqari, yorliq va kiritish elementlariga nisbatan tasvirni joylashtirishni nazorat qilish uchun hujjatga bir nechta CSS uslublari qo'shilgan. Datepicker vidjeti oʻzi img elementini qayerga joylashtirishni aniq aniqlay olmaydi, shuning uchun img elementini hujjatda toʻgʻri joylashtirish uchun CSS qoʻllanilishi kerak edi. Tugma o'rniga rasmdan foydalanish natijasi rasmda ko'rsatilgan:

Dialog vidjeti
Dialog vidjeti oddiy ilovaning dialog oynalariga o‘xshab ko‘rinadigan sarlavha va kontent maydoniga ega suzuvchi oyna yaratadi. Dialog vidjetlaridan xabarlarni ko‘rsatish va foydalanuvchilarning e’tiborini muhim voqealarga jalb qilish uchun ham foydalanish mumkin. Biroq, hujjat mazmunining bir qismini to'sib qo'yadigan har qanday elementda bo'lgani kabi, dialog oynalarini me'yorida ishlating va ularni faqat hujjatning o'zida ularning mazmunini ko'rsatish qiyin bo'lgan holatlarda foydalaning.