الفرق بين المراجعتين ل"jQuery/position"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(إضافة محتويات الصفحة.)
 
ط
 
سطر 58: سطر 58:
 
* [http://api.jquery.com/position/ صفحة التابع ‎‎.position()‎‎ في توثيق jQuery الرسمي.]
 
* [http://api.jquery.com/position/ صفحة التابع ‎‎.position()‎‎ في توثيق jQuery الرسمي.]
 
[[تصنيف:jQuery]]
 
[[تصنيف:jQuery]]
 +
[[تصنيف:jQuery Method]]
 
[[تصنيف:jQuery CSS]]
 
[[تصنيف:jQuery CSS]]
 
[[تصنيف:jQuery Offset]]
 
[[تصنيف:jQuery Offset]]
 
[[تصنيف:jQuery Manipulation]]
 
[[تصنيف:jQuery Manipulation]]

المراجعة الحالية بتاريخ 17:47، 13 يونيو 2018

‎.position()‎

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

يجلب هذا التابع الإحداثيات الحالية للعنصر الأول في المجموعة المطابقة نسبةً إلى أقرب عنصر أب متموضع (offset parent) لذلك العنصر.

‎.position()‎

أضيف مع الإصدار 1.2. لا يقبل هذا التابع أية وسائط.

يجلب التابع ‎.position()‎ الإحداثيات الحالية لعنصرٍ (لإطار حوافه الخارجية [margin box] تحديدًا) نسبةً إلى أقرب عنصر أب له (إطار حواشيه [padding box] تحديدًا، أي باستثناء الهوامش والإطار). يختلف هذا التابع عن التابع ‎.offset()‎ الذي يعيد الإحداثيات الحالية للعنصر نسبةً إلى الصفحة. عند وضع عنصر جديد بالقرب من عنصر آخر وكان كلاهما موجودين ضمن العنصر DOM نفسه، فيكون استعمال التابع ‎.position()‎ أكثر فائدة.

يعيد هذا التابع كائنًا يحتوي على الخاصية top والخاصية left.

ملاحظة: لا تدعم jQuery الحصول على إحداثيات العناصر المخفية ولا تأخذ بالحسبان قيمة الهوامش المضبوطة للعنصر <html> في الصفحة.

ملاحظات إضافية

قد يكون العدد المُعاد باستعمال الواجهات البرمجية (APIs) المتعلقة بالأبعاد، من ضمنها ‎.position()‎، كسريًّا في بعض الحالات. فيجب ألا تفترض الشيفرة أنَّ هذا العدد صحيحٌ (integer). بالإضافة إلى ذلك، قد تكون الأبعاد خطأ عندما يكبِّر المستخدم الصفحة، إذ لا توفِّر المتصفحات واجهةً برمجيةً لمعرفة أنَّ هذه الحالة قد وقعت.

أمثلة

إيجاد موضع الفقرة <p> الثانية:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>position مثالٌ عن استعمال التابع</title>
  <style>
  div {
    padding: 15px;
  }
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <p>مرحبًا</p>
</div>
<p></p>
 
<script>
var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
</script>
 
</body>
</html>

مصادر