پلاگین Popover

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

پلاگین 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های سند را فعال می‌کند:

مثال

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


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


مکان Popover‌ها

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

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

مثال

1 <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
2 <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
3 <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
4 <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 بوت استرپ ما مراجعه کنید.


منابع آموزشی