offset နည်းလမ်း

offset နည်းလမ်းသည် အစိတ်အပိုင်း၏ အနေအထားကို စာရွက်စာတမ်းနှင့် နှိုင်းယှဉ်၍ ရယူခွင့်ပြုသည်၊ ဆန့်ကျင်ဘက်အနေဖြင့် position နည်းလမ်းသည် မိဘ၏ အနားသတ်များနှင့် နှိုင်းယှဉ်၍ ကိုဩဒိနိတ်များရယူသည်။ offset နည်းလမ်းသည် ပိုမိုအသုံးဝင်သည် လက်ရှိအစိတ်အပိုင်းအပေါ်တွင် အသစ်တစ်ခုကို နေရာချသည့်အခါ ကမ္ဘာလုံးဆိုင်ရာ လုပ်ဆောင်မှုများအတွက် ဥပမာ၊ ဆွဲချ၍ချထားခြင်း (drag-and-drop) ကို အကောင်အထည်ဖော်ရန်။ အကျိုးဆက်အနေဖြင့်၊ နည်းလမ်းသည် အရာဝတ္ထုတစ်ခုကို ပြန်ပေးသည်၊ ယင်းတွင် top နှင့် left ဂုဏ်သတ္တိများ ပါဝင်သည်။ တွက်ချက်မှုအမှားများ ဖြစ်ပေါ်နိုင်သည်၊ အကယ်၍ အသုံးပြုသူက စာမျက်နှာအတိုင်းအတာများကို ပြောင်းလဲလျှင်။ ထို့အပြင် နည်းလမ်းသည် ကွယ်ဝှက်ထားသော အစိတ်အပိုင်းများ၏ ကိုဩဒိနိတ်များကို မရယူပါ။

ဝါကျဖွဲ့စည်းပုံ

လက်ရှိကိုဩဒိနိတ်များရယူပါ။ တစ်ခါတစ်ရံတွင် ရရှိသောတန်ဖိုးများသည် ကိန်းပျော့များ ဖြစ်နိုင်သည်။

$(selector).offset();

အစိတ်အပိုင်း၏ ကိုဩဒိနိတ်များကို ပြောင်းလဲရန်၊ အရာဝတ္ထုတစ်ခုကို ပို့ဆောင်ရမည်၊ ယင်းတွင် top နှင့် left ဂုဏ်သတ္တိများ ပါဝင်သည်။

$(selector).offset({top: 40, left: 40});

ထို့အပြင် ကျွန်ုပ်တို့သည် သတ်မှတ်ထားသော လုပ်ဆောင်ချက်ကို တစ်ခုချင်းစီသော အစုအတွင်းရှိ အစိတ်အပိုင်းတိုင်းတွင် အသုံးချနိုင်သည်။ ဤသို့ဖြစ်စဉ်တွင် ပထမပါရာမီတာအနေဖြင့် လုပ်ဆောင်ချက်သည် အစုအတွင်းရှိ အစိတ်အပိုင်း၏ နံပါတ်ကို ရယူမည်၊ ဒုတိယပါရာမီတာအနေဖြင့် - top နှင့် left ကိုဩဒိနိတ်များပါဝင်သော အရာဝတ္ထု။ this သည် လုပ်ဆောင်ချက်အတွင်း လက်ရှိအစိတ်အပိုင်းကို ညွှန်ပြနေမည်။ အစိတ်အပိုင်း၏ ကိုဩဒိနိတ်တန်ဖိုးများသည် လုပ်ဆောင်ချက်မှ ပြန်လာသော တန်ဖိုးများအဖြစ်သို့ ပြောင်းလဲသွားမည်။

$(selector).width(function(index, currentOffset));

ဥပမာ

div (အစိမ်းရောင်စတုရန်း) ၏ အနေအထားကို offset နည်းလမ်းကို အသုံးပြု၍ ရယူကြပါစို့၊ ထို့နောက်၊ ရရှိသောအရာဝတ္ထု၏ သော့များကို ရည်ညွှန်းကာ၊ ဤအချက်အလက်ကို ထုတ်ပြကြပါစို့။

<div id="result">စတုရန်းကို နှိပ်ပါ ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

ဥပမာ

ဒုတိယစာပိုဒ်၏ ကိုဩဒိနိတ်များကို ပြောင်းလဲကြပါစို့။

<p style="margin-left: 10px;">စာသား၁</p>
<p style="margin-left: 10px;">စာသား၂</p>

$('p').last().offset({top: 40, left: 60});

ဤအရာကိုလည်း ကြည့်ပါ

position နည်းလမ်း,
ယင်းသည် အစိတ်အပိုင်း၏ လက်ရှိ ကိုဩဒိနိတ်များကို ရယူခွင့်ပြုသည်
offsetParent နည်းလမ်း,
ယင်းသည် အစိတ်အပိုင်း၏ အနီးဆုံး နေရာချထားသော ဘိုးဘေးကို ရယူခွင့်ပြုသည်
css နည်းလမ်း,
ယင်းသည် အစိတ်အပိုင်း၏ CSS စတိုင်များကို ရယူခွင့်နှင့် ပြောင်းလဲခွင့်ပြုသည်