jQuery - အတိုင်းအတာများ
jQuery ဖြင့်၊ ၎င်းသည် ဒြပ်စင်များနှင့် ဘရောက်ဆာဝင်းဒိုးများ၏ အတိုင်းအတာများဖြင့် လုပ်ဆောင်ရန် လွယ်ကူသည်။
jQuery Dimension နည်းလမ်းများ
jQuery တွင် အတိုင်းအတာများဖြင့် လုပ်ဆောင်ရန် အရေးကြီးသော နည်းလမ်းများစွာ ရှိသည်။
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery အတိုင်းအတာများ
jQuery width() နှင့် height() နည်းလမ်းများ
နည်းလမ်း သည် width()ဒြပ်စင်တစ်ခု၏ အကျယ်ကို သတ်မှတ်ခြင်း သို့မဟုတ် ပြန်ပေးသည် (အကွက်များ၊ ဘောင်နှင့် အနားသတ်များ မပါဝင်ပါ)။
နည်းလမ်း သည် height()ဒြပ်စင်တစ်ခု၏ အမြင့်ကို သတ်မှတ်ခြင်း သို့မဟုတ် ပြန်ပေးသည် (အကွက်များ၊ ဘောင်နှင့် အနားသတ်များ မပါဝင်ပါ)။
<div>
အောက်ပါ ဥပမာသည် သတ်မှတ်ထားသော ဒြပ်စင်တစ်ခု၏ အကျယ်နှင့် အမြင့်ကို ပြန်ပေးသည် -
ဥပမာ
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() နှင့် innerHeight() နည်းလမ်းများ
innerWidth()နည်းလမ်းသည် ဒြပ်စင်တစ်ခု၏ အကျယ်ကို ပြန်ပေးသည် ( padding ပါဝင်သည်) ။
innerHeight()နည်းလမ်းသည် ဒြပ်စင်တစ်ခု၏ အမြင့်ကို ပြန်ပေးသည် ( padding ပါဝင်သည်) ။
<div>
အောက်ပါ ဥပမာသည် သတ်မှတ်ထားသော ဒြပ်စင်တစ်ခု၏ အတွင်း-အကျယ်/အမြင့်ကို ပြန်ပေးသည် -
ဥပမာ
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth() နှင့် outerHeight() နည်းလမ်းများ
outerWidth()နည်းလမ်းသည် ဒြပ်စင်တစ်ခု၏ အကျယ်ကို ပြန်ပေးသည် ( padding နှင့် border ပါ၀င်သည်) ။
outerHeight()နည်းလမ်းသည် ဒြပ်စင်တစ်ခု၏ အမြင့်ကို ပြန်ပေးသည် ( padding နှင့် border ပါ၀င်သည်) ။
အောက်ပါ ဥပမာသည် သတ်မှတ်ထားသော <div>
ဒြပ်စင်တစ်ခု၏ အပြင်ဘက် အနံ/အမြင့်ကို ပြန်ပေးသည်-
ဥပမာ
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
outerWidth(true)နည်းလမ်းသည် ဒြပ်စင်တစ်ခု၏ အကျယ်ကို ပြန်ပေးသည် ( padding၊ border နှင့် margin ပါ၀င်သည်) ။
နည်းလမ်းသည် ဒြပ်စင်တစ်ခု၏ အမြင့်ကို ပြန်ပေးသည် ( outerHeight(true)padding၊ border နှင့် margin ပါ၀င်သည်)။
ဥပမာ
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery ပိုမို width() နှင့် height()
အောက်ဖော်ပြပါ ဥပမာသည် စာရွက်စာတမ်း၏ အကျယ်နှင့် အမြင့် (HTML စာရွက်စာတမ်း) နှင့် ဝင်းဒိုး (ဘရောက်ဆာမြင်ကွင်းပို့တ်) ကို ပြန်ပေးသည်-
ဥပမာ
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
အောက်ပါ ဥပမာသည် သတ်မှတ်ထားသော <div>
ဒြပ်စင်တစ်ခု၏ အကျယ်နှင့် အမြင့်ကို သတ်မှတ်သည်-
ဥပမာ
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery လေ့ကျင့်ခန်းများ
jQuery CSS အကိုးအကား
jQuery CSS နည်းလမ်းများအားလုံး၏ ပြီးပြည့်စုံသောခြုံငုံသုံးသပ်ချက်အတွက် ကျေးဇူးပြု၍ ကျွန်ုပ်တို့၏ jQuery HTML/CSS ရည်ညွှန်းချက် သို့ သွားပါ ။