پلاگین Popover

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

پلاگین Popover شبیه Tooltip هاست؛ یک پنجره بازشو (Pop-up box) است که هنگام کلیلک کاربر برروی یک عنصر ظاهر می‌شود. تفاوت آن این است که Popover می‌تواند محتوای بیشتری داشته باشد.[۱]

نکته: پلاگین‌ها را می‌توان بطور مجزا (با استفاده از فایل جداگانه “popover.js”) یا همه را با هم (با استفاده از فایل “bootstrap.js” یا “bootstrap.min.js”) اضافه کرد.

نحوه ایجاد یک Popover

برای ایجاد یک Popover، ویژگی data-toggle="popover" را یه یک عنصر اضافه کنید.

از ویژگی title برای تخصیص متن عنوان Popover و از ویژگی data-content برای تخصیص متنی که باید در بدنه Popover نمایش داده شود استفاده کنید.

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

توجه: Popover‌ها باید توسط jQuery مقداردهی اولیه شود: یعنی باید عنصر مورد نظر را انتخاب کرده و متد popover() را فراخوانی کنید.

کد زیر همهٔ Popoverهای سند را فعال می‌کند:

مثال

<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
});
</script>


مشاهدهٔ نتیجه


مکان Popover‌ها

بطور پیش فرض، Popover در سمت راست عنصر ظاهر می‌شود.

از ویژگی data-placement برای تنظیم مکان Popover در بالا، پایین، چپ یا راست عنصر استفاده کنید:

مثال

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>


مشاهدهٔ نتیجه


توجه: می‌توانید از ویژگی data-placement با مقدار “auto” استفاده کنید، که به مرورگر اجازه می‌دهد مکان Popover را تعیین کند. برای مثال اگر مقدار آن “auto left” باشد، در صورت امکان Popover در سمت چپ ظاهر می‌شود، درغیر اینصورت در سمت راست.

بستن Popover

بطور پیش فرض، Popover هنگام کلیک مجدد برروی عنصر بسته می‌شود. با این حال می‌توان از ویژگی data-trigger="focus" استفاده کرد که Popover را هنگام کلیک در خارج از عنصر می‌بندد:

مثال

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>


مشاهدهٔ نتیجه


نکته: اگر بخواهید هنگام قرار گرفتن اشاره گر ماوس روی عنصر، Popover نمایش داده شود، از ویژگی data-trigger با مقدار “hover” استفاده کنید:

مثال

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>


مشاهدهٔ نتیجه


مرجع کامل Popover بوت استرپ

برای دستیابی به مرجع کامل همه امکانات Popover، متدها و رویدادها، به مرجع Popover JS بوت استرپ ما مراجعه کنید.

منابع آموزشی