آموزش کار با Popover در بوت استرپ؛ یکی از مفاهیم اساسی در دوره آموزش Bootstrap! Popover یکی از پلاگین های مهم و کاربردی در بوت استرپ است که شباهت زیادی به پلاگین tooltip دارد. توسعه دهندگان می توانند از این پلاگین استفاده کنند.
بوت استرپ شامل تعدادی از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات CSS و HTML و توابع جاوا اسکریپت برای تولید و نمایش فرم ها، گزینه ها، ستون ها و سایر عناصر مورد نیاز طراحی وب است. اگر قصد طراحی سایت در ارومیه را دارید، بهتر است با پلاگین های بوت استرپ نیز آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد پلاگین Popover در بوت استرپ برای شما ارائه کنیم و نحوه کار با Popover را به شما یاد دهیم.
پلاگین Popover در بوت استرپ چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که پلاگین Popover چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که Popover یکی از پلاگین های مهم و کاربردی در بوت استرپ است که شما می توانید از این پلاگین استفاده کرده و سایت خودتان را طراحی و راه اندازی کنید. پلاگین Popover یک view گسترش یافته کامل با یک عنوان را فراهم می کند. Popover به توسعه دهندگان این امکان را می دهد تا تغییراتی را روی صفحه سایت خودشان اعمال کنند. اگر می خواهید نحوه کار با این پلاگین را یاد بگیرید، پیشنهاد می کنیم تا در دوره آموزش بوت استرپ شرکت کنید.
جالب است بدانید، پلاگین Popover محتوا و نشانه گذاری را طبق تقاضا ایجاد می کند و معمولا Popover را بعد از عنصر trigger آنها قرار می دهد. ما می توانیم popover را با دو روش زیر می توانیم اضافی کنیم:
با استفاده از ویژگی های داده: برای اضافی کردن پلاگین Popover در پروژه های بوت استرپ، مقدار data-toggle=popover را به یک تگ anchor/button اضافی می کنیم. همچنین عنوان anchor متن یک popover خواهد بود.
<a href = "#" data-toggle = "popover" title = "Example popover"> Hover over me </a>
استفاده از جاوا اسکریپت: یکی دیگر از روش های استفاده از پلاگین Popover، استفاده از جاوا اسکریپت است. توجه داشته باشید که popover ها از طریق جاوا اسکریپت با استفاده از قاعده نوشتاری زیر فعال می شوند:
$('#identifier').popover(options)
توجه داشته باشید که پلاگین Popover مانند پلاگین dropdown و پلاگین های دیگر بحث شده در مقاله های قبلی فقط پلاگین های CSS نیستند. برای استفاده از این پلاگین باید آن را با استفاده از jquery فعال کنیم. برای فعال کردن تمام popover ها در صفحه خود کافی است تا از این اسکریپت استفاده کنیم:
$(function () { $("[data-toggle = 'popover']").popover(); });
مثال:
مثال زیر نحوه استفاده از Popover را در بوت استرپ به شما نشان می دهد و پس از آموزش کار با navs در بوت استرپ یکی از مهمترین بخش هاست. شما می توانید همانند مثال زیر، این این پلاگین استفاده کنید:
<div class = "container" style = "padding: 100px 50px 10px;" > <button type = "button" class = "btn btn-default" title = "Popover title" data-container = "body" data-toggle = "popover" data-placement = "left" data-content = "Some content in Popover on left"> Popover on left </button> <button type = "button" class = "btn btn-primary" title = "Popover title" data-container = "body" data-toggle = "popover" data-placement = "top" data-content = "Some content in Popover on top"> Popover on top </button> <button type = "button" class = "btn btn-success" title = "Popover title" data-container = "body" data-toggle = "popover" data-placement = "bottom" data-content = "Some content in Popover on bottom"> Popover on bottom </button> <button type = "button" class = "btn btn-warning" title = "Popover title" data-container = "body" data-toggle = "popover" data-placement = "right" data-content = "Some content in Popover on right"> Popover on right </button> </div> <script> $(function (){ $("[data-toggle = 'popover']").popover(); }); </script>
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد پلاگین Popover در بوت استرپ برای شما ارائه کنیم و نحوه کار با Popover را به شما یاد دهیم. همانطور که گفته شد، Popover یکی از پلاگین های مهم و کاربردی در بوت استرپ است که شما می توانید از این پلاگین استفاده کرده و تغییراتی را روی صفحات سایت خودتان اعمال کنید. اگر می خواهید نحوه کار با این پلاگین را یاد بگیرید، پیشنهاد می کنیم تا در دوره آموزش بوت استرپ شرکت کنید.
نظرات: