مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. در این آموزش قصد داریم که شما را با یکی از پلاگین های پرکاربرد در فریم ورک bootstrap 3 که popover نامیده شده است، آشنا کنیم. این پلاگین، بسیار شبیه به پلاگین Tooltip در bootstrap 3 است.فقط تفاوت آنها در این است که پلاگین popover با کلیک کاربر روی عنصر مربوطه، ظاهر می شود و popover توضیحات بیشتری را نسبت به Tooltip ارائه می دهد. در ادامه ی آموزش برای آشنایی با پلاگین popover در bootstrap 3 ، با ما همراه باشید.
پلاگین popover در bootstrap 3
پلاگین popover همانند Tooltip یک پیغام راهنما برای عناصر موجود در صفحه وب نمایش می دهد.
تفاوت کار در این است، که popover با کلیک کاربر روی عنصر مربوطه ظاهر شده و توضیحات بیشتر را در بر می گیرد.
پلاگین popover در bootstrap 3
چگونگی ایجاد popover در bootstrap 3
برای ایجاد یک popover صفت data-toggle="popover" را به عنصر html مربوطه اضافه کنید.
از صفت title نیز برای مشخص کردن متن header عنصر 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 را فراخوانی کنید.
مثال:
jQuery زیر چگونگی فعال کردن تمام پلاگین های popover یک وب سایت را بخوبی نشان می دهد:
مثال :
| <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> |
محل ظاهر شدن popover
در حالت پیش فرض popover در حاشیه سمت راست html ظاهر می شود.
با صفت data-placement می توانید موقعیت قرارگیری popover را در عناصر html، مشخص کنید:
مثال :
| <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 را روی عناصر html تعیین کند.
بستن پیغام popover
در حالت پیش فرض پنجره ی popover با کلیک مجدد روی عنصر مربوطه بسته می شود. با این وجود شما می توانید با استفاده از صفت data-trigger="focus" مشخص کنید که پنجره ی popover هنگام کلیک در خارج از محدوده ی عنصر html مربوطه بسته شود.
مثال:
مثال :
| <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> |
کلام آخر
با استفاده از پلاگین شما می توانید از توضیحات طولانی و پر محتوا برای نمایش بصورت یک پنجره ی راهنما در عناصر html مربوطه استفاده نمایید. امیدواریم مباحث آموزش آشنایی با ویژگی popover در bootstrap 4 به اندازه کافی، برای شما مفید بوده باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
