1. Tooltip (مربع موجه)
ملف رمز المصدر:
Tooltip.js
Tooltip.Scss
مبدأ التنفيذ:
1. احصل على معلومات تحديد موقع العنصر المراد عرضه (أعلى ، يسار ، أسفل ، يمين ، عرض ، ارتفاع ، إلخ)
2. احسب موضع تلميح الأدوات ، وهو واحد من أعلى ، يسار ، أسفل ، واليمين.
3. ثم احسب قيمة الإحداثيات بناءً على قيمة الموضع المحسوبة
4. تطبيق قيم الإحداثيات على Tooltip
تحليل رمز المصدر:
1. OwntedDocument: Document ؛ يحتوي على كائنين: <CODTYPE> ، DISTRISIONSELEMENT (عقدة الجذر)
2. $. contains (DOMA ، DOMB): تحديد ما إذا كان DOMA يحتوي على عناصر DOMB
3. يتم تطبيق طريقة الإزاحة.
4.
5. getPosition: هذه الوظيفة تحصل على معلومات متعلقة بإحداثيات تحديد المواقع ، مثل: أعلى ، يسار ، أسفل ، يمين ، عرض ، ارتفاع ، تمرير ، إلخ.
5.1. يتم استخدام طريقة getBoundingClientRect ، ولكن هذه الطريقة يمكن أن توصيل العرض والارتفاع في IE8.
5.2. إذا كان جسمًا ، فسيتم إعادة تعيين العرض والارتفاع إلى النافذة
5.3. رمز المصدر كما يلي:
$ element = $ element || هذا. $ element // إذا لم يتم تمرير أي معلمات ، فإن عنصر $ (العنصر الذي يؤدي إلى حدث تلميح الأدوات) هو VAR el = $ element [0] var isbody = el.tagname == 'body' var elrect = el.getBoundingClientRect () إذا (elrect.width == null) راجع https://github.com/twbs/bootstrap/issues/14093 elrect = $ .extend ({} ، elrect ، {width: elrect.right - elrect.left ، height: elrect.bottom - elrect.top})} var eloffset = isbody؟ {TOP: 0 ، اليسار: 0}: $ element.offset () var scroll = {scroll: isbody؟ document.documentElement.scrolltop || document.body.scrolltop: $ element.scrolltop ()} var outerdims = isbody؟ {العرض: $ (window) .width () ، الارتفاع: $ (نافذة). Height ()}: nullreturn $ .extend ({} ، elrect ، scroll ، Outerdims ، Eloffset)6.
6.1. الوقت السفلي
6.1.1. الجزء العلوي هو أعلى + ارتفاع عنصر تحديد المواقع (POS)
6.1.2. اليسار هو عرض عنصر تحديد المواقع (POS) /2 عرض عنصر تلميح الأدوات /2
6.2. عندما أعلى
6.2.1. الجزء العلوي هو ارتفاع عنصر TOOLTIP العلوي الذي يحدد موقع العنصر (POS).
6.2.2. اليسار هو عرض عنصر تحديد المواقع (POS) /2 عرض عنصر تلميح الأدوات /2
6.3. عندما ترك
6.3.1. الجزء العلوي هو أعلى عنصر تحديد المواقع (POS)/2 ارتفاع عنصر تلميح الأدوات/2
6.3.2. اليسار هو عرض عنصر تلميح الأدوات الأيسر الذي يحدد موقع العنصر (POS).
6.4. يمين
6.4.1. الجزء العلوي هو أعلى عنصر تحديد المواقع (POS)/2 ارتفاع عنصر تلميح الأدوات/2
6.4.2. اليسار هو عرض عنصر تحديد المواقع (POS)
6.5. موقف المثلث الصغير هو عمومًا 50 ٪ من العنصر. ومع ذلك ، إذا تم إخفاء تلميح الأدوات بواسطة اليسار والأعلى واليمين والأسفل ، فيجب إعادة حسابها وتعديلها. اسم الطريقة هو: getViewPortAddeltada
6.5.1. أولاً احسب عرض أو ارتفاع الفائض
6.5.2. ثم احسب قيمة ArrowDelta ، وإخفاء القيمة * 2 عرض Tooltip + عرض تلميح الأدوات
6.5.3. حدد قيمة الجزء العلوي أو اليسرى من المثلث
2. popover (صندوق المنبثقة)
ملف رمز المصدر:
popover.js
popover.scss
مبدأ التنفيذ:
1. ورث تطبيق تلميح الأدوات
2. مع عنوان إضافي ، يمكنك أيضًا تخصيص المحتوى (يمكن إدراج عناصر التحكم التفاعلية مثل الإدخال والزر فيه)
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.