JS Popover (popover.js)
و Popover المساعد يشبه تلميحات. وهو مربع المنبثقة التي تظهر عندما ينقر المستخدم على عنصر. والفرق هو أن popover يمكن أن تحتوي على أكثر من ذلك بكثير المحتوى.
اعتماد البرنامج المساعد: Popovers تتطلب المساعد تلميح الأدوات (tooltip.js) ليتم تضمينها في الإصدار الخاص بك من Bootstrap .
لتعليمي حول Popovers ، اقرأ Bootstrap Popover التعليمي .
عبر data-* سمات
و data-toggle="popover" ينشط popover .
و title تحدد سمة النص رأس popover .
و data-content تحدد سمة النص الذي يجب عرضه داخل popover's الجسم.
مثال
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
انها محاولة لنفسك » عن طريق جافا سكريبت
Popovers ليست الإضافات-CSS الوحيد، وبالتالي لا بد من تهيئة مع مسج: اختيار العنصر المحدد واستدعاء popover() الأسلوب.
مثال
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
انها محاولة لنفسك » Popover الخيارات
يمكن أن تنتقل عن طريق الخيارات سمات البيانات أو جافا سكريبت. لسمات البيانات، إلحاق اسم الخيار ل data- كما في data-placement="" .
| اسم | اكتب | افتراضي | وصف | جربها |
|---|---|---|---|---|
| animation | boolean | true | تحدد ما إذا كان لإضافة تأثير انتقال CSS تتلاشى عند فتح وإغلاق popover
| جربها |
| container | string, or the boolean false | false | إلحاق popover لعنصر معين. على سبيل المثال: الحاويات: 'body' | جربها |
| content | string | "" | يحدد النص داخل popover's body | جربها |
| delay | number, or object | 0 | يحدد عدد من ميلي ثانية من الوقت سيستغرق لفتح وإغلاق popover . لتحديد تأخير لافتتاح واحد آخر لإغلاق، استخدم بنية الكائن: delay: {show: 500, hide: 100} - والتي سوف تتخذ 500 مللي ثانية إلى فتح popover ، ولكن 100 فقط مللي ثانية إلى إغلاقه | جربها |
| html | boolean | false | يحدد ما إذا كانت تقبل علامات HTML في popover :
عندما وضعت لكاذبة (الافتراضي)، مسج في text() سيتم استخدام الأسلوب. استخدام هذا إذا كنت قلقا بشأن هجمات XSS | جربها |
| placement | string | "right" | يحدد popover الموقف. القيم الممكنة:
| جربها |
| selector | string, or the boolean false | false | يضيف popover إلى محدد المحدد | جربها |
| template | string | HTML الأساسي لاستخدامها عند إنشاء بوبوفير. و popover's سوف يتم حقنه الملكية في .popover-العنوان. و popover's سوف يتم حقن محتوى في .popover المحتوى. .arrow ستصبح popover's السهم. وينبغي أن يكون العنصر المجمع الأبعد من .popover الطبقة. | ||
| title | string | "" | يحدد نص رأس popover | جربها |
| trigger | string | "click" | يحدد كيفية popover يتم تشغيل. القيم الممكنة:
| جربها |
| viewport | string, or object | {selector: "body", padding: 0} | تحافظ على popover ضمن حدود هذا العنصر. على سبيل المثال: viewport: '#viewport' أو {selector: '#viewport', padding: 0} |
Popover طرق
يسرد الجدول التالي كل ما هو متاح popover الأساليب.
| طريقة | وصف | جربها |
|---|---|---|
| .popover( options ) | ينشط بوبوفير مع وجود خيار. رؤية الخيارات المذكورة أعلاه لقيم صالحة | جربها |
| .popover("show") | يظهر popover | جربها |
| .popover("hide") | يخفي popover | جربها |
| .popover("toggle") | تبديل بوبوفير | جربها |
| .popover("destroy") | يخفي ويدمر بوبوفير | جربها |
Popover الأحداث
يسرد الجدول التالي كل ما هو متاح popover الأحداث.
| حدث | وصف | جربها |
|---|---|---|
| show.bs.popover | يحدث عندما popover على وشك أن تظهر | جربها |
| shown.bs.popover | يحدث عندما popover يظهر بالكامل (بعد الانتهاء التحولات CSS) | جربها |
| hide.bs.popover | يحدث عندما popover على وشك أن تكون مخفية | جربها |
| hidden.bs.popover | يحدث عندما popover مخفيا بالكامل (بعد الانتهاء التحولات CSS) | جربها |
أمثلة
مخصص Popover التصميم
استخدام CSS لتخصيص مظهر من popover :
مثال
/* Popover */
.popover {
border: 2px dotted
red;
}
/* Popover Header */
.popover-title {
background-color:
#73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover
Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
} انها محاولة لنفسك »