افزونه Popover بوت استرپ
پلاگین Popover مشابه tooltip ها است؛ این یک جعبه پاپ آپ است که وقتی کاربر روی یک عنصر کلیک میکند ظاهر میشود. تفاوت این است که popover می تواند محتوای بسیار بیشتری داشته باشد.
مقالات
چگونه با بوت استرپ یک Popvoer ایجاد کنیم؟
برای ایجاد یک popvoer اتربیوت data-toggle=”popover” را به یک عنصر اضافه کنید.
از ویژگی title برای مشخص کردن متن هدر popover استفاده کنید و از ویژگی content-content برای مشخص کردن متن که باید در داخل body popover نمایش داده شود، استفاده کنید:
|
1 |
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a> |
توجه: Popovers باید با jQuery راه اندازی شود: عنصر مشخص شده را انتخاب کرده و با متد popover() آن را فراخوانی بگیرید.
|
1 2 3 4 5 |
<script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> |
تعیین موقعیت Popover ها
به طور پیش فرض، popover در سمت راست عنصر ظاهر می شود.برای تعیین موقعیت popover در بالا، پایین، سمت چپ یا سمت راست عنصر، از ویژگی data-placement استفاده کنید.
مثال:
|
1 2 3 4 |
<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 را هنگام کلیک کردن در خارج از عنصر بسته می کند.
مثال:
|
1 |
<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 را وقتی که نشانگر ماوس را بر روی عنصر قرار می دهید نمایش داده می شود، از ویژگی trigger-data با مقدار “hover” استفاده کنید:
مثال:
|
1 |
|
1 |
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a> |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید