အားလုံးပဲ မင်္ဂလာပါခင်ဗျ။
ကျွန်တော်ကတော့ Spiceworks Myanmar Company တွင် Web Designer အဖြစ် ဝင်ရောက် အလုပ်လုပ်ကိုင်နေတဲ့ ကျော်စိုးနိုင် ဖြစ်ပါတယ်ခင်ဗျ။
ဒီတစ်ပတ်မှာတော့ JQuery UI အသုံးပြုပုံနဲ့ပတ်သက်ပြီး ကျွန်တော် လေ့လာရသလောက် ရှင်းလင်းရေးသားဖော်ပြပေးသွားမှာဖြစ်ပါတယ်။

JQuery UI ဆိုတာဘာလဲ?

JQuery Javascript Library ကို အခြေခံပြီး အသုံးပြုသူ user တွေလွယ်လွယ်ကူကူ အသုံးပြုနိုင်ရန်အတွက်  user interface interactions, effects, widgets နှင့် themes တွေကို စုစည်းထားတဲ့  Javascript Library တစ်ခုဖြစ်ပါတယ်။ Web application တစ်ခုကို user interface ကောင်းအောင်တည်ဆောက်ချင်တာပဲဖြစ်ဖြစ်၊ form နှင့် date ရွေးချယ်မှုတစ်ခုခုကို ထည့်သွင်း အသုံးပြုချင်တဲ့အခါမှာပဲဖြစ်ဖြစ် JQuery UI ကို အကောင်းဆုံး အသုံးပြုနိုင်ပါတယ်။

JQuery UI  ကို အသုံးပြုဖို့အတွက် အောက်ပါ link ကနေတဆင့် dowload လုပ်ပြီးအသုံးပြုနိုင်ပါတယ်။
https://jqueryui.com/download/

JQuery UI မှာဆိုရင်

• 1. Interaction
  2. Widgets
  3. Effects
  4. Utilities

ဆိုပြီးအပိုင်း (၄)ပိုင်း ပါဝင်ပါတယ်။

Interaction

Interaction မှာဆိုရင် mouse event များကို အခြေခံထားတဲ့ element များပါဝင်ပါတယ်။
ထို element များဖြင့် draggable, droppable, resizable, selectable နှင့် sortable များကို create လုပ်ပြီးအသုံးပြုနိုင်ပါတယ်။
Interaction မှာဆိုရင် အောက်ပါ အမျိုးအစားများပါဝင်ပါတယ်။

• 1. Draggable
  2. Droppable
  3. Resizable
  4. Selectable
  5. Sortable

2. Widgets
Web application တည်ဆောက်ရာမှာ လိုအပ်တဲ့ UI များကို စိတ်ကြိုက် ပြင်ဆင် အသုံးပြုနိုင်အောင် အပြည့်အ၀ ပံ့ပိုးပေးသည့် ခိုင်မာသော core တစ်ခုဖြစ်ပါတယ်။
Widgets မှာဆိုရင် အောက်ပါ အမျိုးအစားများပါဝင်ပါတယ်။

• 1. Accordion
  2. Autocomplete
  3. Button
  4. Checkboxradio
  5. Controlgroup
  6. Datepicker
  7. Dialog
  8. Menu
  9. Progressbar
  10. Selectmenu
  11. Slider
  12. Spinner
  13. Tabs
  14. Tooltip

3. Effects
Effects, Visibility, Class Animation နှင့် Color animation များကို transition နဲ့ပတ်သက်ပြီး မိမိစိတ်ကြိုက် အသုံးပြုနိုင်ရန် JQuery UI မှာဆိုရင် အောင်ပါ effects များပါဝင်ပါတယ်။

• 1. Effects
  2. Visibility
     1. show
     2. hide
     3. toggle
  3. Class Animation
     1. Add Class
     2. Remove Class
     3. Toggle Class
     4. Switch Class
  4. Color Animation

4. Utilities
Interaction နှင့် widgets များကို ချိတ်ဆက်အသုံးပြုနိုင်ရန် Utilities နှစ်မျိုးပါရှိပါတယ်။

• 1. Position
  2. Widget Factory

Jquery UI ရဲ့ အပိုင်း (၄)ပိုင်းကို သိရှိပြီ ဆိုရင် Interaction အမျိုးအစားတစ်ခုဖြစ်တဲ့ Draggable ကို create လုပ်ပါမယ်။
အရင်ဦးဆုံး index.html ဖိုင်လေး အရင် တည်ဆောက်ပါမယ်။
ပြီးရင် html ကုဒ်များကို ထည့်ပါမယ်။

Jquery UI ကိုအသုံးပြုရန် CDN ချိတ်ပါမယ်။
CDN ကို ချိတ်သုံးဖို့အတွက် link https://cdnjs.com/libraries/jqueryui ဝင်ပြီး copy url ကို နှိပ်လိုက်ပါ။

 
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js

အခုဆိုရင် JQuery UI ချိတ်လို့ ပြီးသွားပါပြီ။
နောက်ထပ် ​JQuery UI css ကိုလည်း CDN ကိုအသုံးပြုပြီး ချိတ်ဆက်ပါမယ်။

 
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css

div တစ်ခုကို id သတ်မှတ်ပြီး အထဲမှာ p element ကို ထည့်ပါမယ်။

  
Drag me around

 

Box ပုံစံ create လုပ်ဖို့ရန်အတွက် css style ထည့်ပါမယ်။ Style အဖွင့် အပိတ်ဖြင့် ရေးပြီး အောက်က ကုဒ်ကို ထည့်ပါမယ်။

 
  #draggable { width: 150px; height: 150px; padding: 0.5em; }

အခုဆိုရင် div နှင့် p element ကို နေရာချပြီးပါပြီ။အောက်ပါပုံအတိုင်း ရရှိလာပါမယ်။

ID သတ်မှတ်ထားသော div မှာ draggable event ထည့်ပါမယ်။ Script အဖွင့် အပိတ်ဖြင့် ရေးပြီး အောက်က ကုဒ်ကို ထည့်ပါမယ်။

 
  $( function() {
    $( "#draggable" ).draggable();
  } );
  

Draggable function ကို အသုံးပြုလိုက်တာနဲ့ draggable ကို စတင်အသုံးပြုလို့ရပါတယ်။
အထက်ပါ ပုံစံအတိုင်း သက်ဆိုင်ရာ interaction, widgets နှင့် effects များထည့်သွင်းပြီး မိမိအလိုရှိသော web app များကို အချိန်မြန်လွယ်ကူစွာ ပြုလုပ်နိုင်မည်ဖြစ်ပါတယ်။
JQuery UI အသုံးပြုပုံနဲ့ပတ်သက်ပြီး ဗဟုသုတအနေနဲ့ အနည်းငယ်ရရှိသွားလိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။
အောက်ပါမူရင်း site မှလည်း လေ့လာနိုင်ပါတယ်။
https://jqueryui.com/
အဆုံးထိ အချိန်ပေးပြီး ဖတ်ရှုပေးခဲ့ကြတဲ့အတွက် ကျေးဇူးတင်ပါတယ်ခင်ဗျ။