หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery

25 September 2008

สมมติ xxx คือ selector

รูปแบบฟังก์ชัน $("xxx").offset();

เป็นฟังก์ชันที่ใช้สำหรับหาตำแหน่งของ element หรือ selector โดยเมื่อมีการเรียกใช้
จะคืนค่ากลับมาเป็น Object พร้อมกับค่าตัวเลข ที่เป็น property 2 ตัวคือ top กับ left
คำสั่งนี้ใช้ได้เฉพาะกับ element หรือ selector ที่มี visible เป็น true คือเป็น element
ตัวที่ไม่ได้กำหนดให้ซ่อนไว้

<script language="javascript">
$(function(){
    var p = $("p:last");
	var offset = p.offset();
	alert(offset.left);
	alert(offset.top);
});
</script>

จากโค้ดด้านบน
บรรทัดที่ 3 เป็นการสร้างตัวแปร Object ชื่อ p รับค่าจากตัว selector ที่ชื่อ p:last หมายถึืง paragraph ตัวสุดท้าย
บรรทัดที่ 4 เป็นการกำหนดค่าตัวแปร offset รับค่าตัวแปร p ที่เรียกใช้ฟังก์ชัน offset()
ผลที่ได้คือตัวแปร offset จะมีค่าตัวแปรเพิ่มมาอีก 2 ตัวคือ offset.top และ offset.left
หากตัวแปร offset เราตั้งเป็นชื่ออื่นเช่น plan ในทำนองเดียวกันค่าของตัวแปร plan เมื่อเรียก
ใช้ฟังก์ชัน offset() ก็จะได้ค่าตัวแปรเพิ่มมาอีก 2 ตัวเช่นกันคือ plan.top และ plan.left
บรรทัดที่ 5 และ 6 เป็นการแสดงค่าของตัวแปร







บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

22 Aug 10 สร้าง waiting page ให้รอสักครู่ ก่อนลิ้งค์ ไปเว็บอื่น ด้วย jQuery และ php อ่าน 2581 06 Nov 10 แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle อ่าน 2577 14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 2567 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 2558 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 2530 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2475 25 Sep 08 การกำหนดความกว้างความสูงของ element ด้วยฟังก์ชันของ jQuery อ่าน 2453 02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 2449 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2424 05 Nov 10 แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker อ่าน 2400 21 Oct 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง อ่าน 2387 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2378 11 Nov 10 แนะนำ การแทรก swf ไฟล์ ด้วย jQuery SWFObject Plugin อ่าน 2377 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 2365 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 2352
จำนวนผู้เยี่ยมชม 784683
คน 2012 © Copyright ninenik.com. All rights reserved.