آموزش کار با پلاگین Popover بوت استرپ

0 دیدگاه

در خدمت دوستان عزیز هستیم با آموزش کار با پلاگین Popover بوت استرپ. این پلاگین شبیه به Tooltip می باشد بدین صورت که زمانی که کاربر بر روی عنصری کلیک کرد Popover نمایش داده می شود با این تفاوت که پلاگین Popover می تواند شامل محتوای بسیار بیشتری باشد.

آموزش کار با پلاگین Popover بوت استرپ

پلاگین popover

پلاگین Popover : به تولتیپ شباهت دارد . یک جعبه پاپ آپ است که که به هنگام کلیک کردن کاربر بر روی عنصر نمایش داده میشود . با این تفاوت که پاپ اُور میتواند محتوی بیشتری را شامل شود.

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

[alert color=”blue” icon=””]

حتما بخونید : جهت مشاهده آموزش کار با پلاگین Tooltip بوت استرپ به این لینک مراجعه نمایید.

[/alert]

نحوه ساخت Popover

برای ایجاد یک پاپ اُور خاصیت data-toggle=”popover” را به یک عنصر اضافه نمایید. از خاصیت Title برای مشخص کردن متن سرفصل پاپ اُور ، و از خاصیت data-content برای مشخص کردن متنی که درون پاپ اور نمایش داده میشود استفاده کنید.

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

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

نکته : پاپ اور ها باید با jQuery اغاز شوند . عنصر مخصوص را انتخاب کرده و متد popover() را فراخوانی کنید.

کد زیر تمام پاپ اور های درون یک سند-داکیومنت را فعال میکند :

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

$(document).ready(function(){

$('[data-toggle="popover"]').popover();

});

</script>

موقعیت یابی popover

به صورت پیش فرض پاپ اُور در سمت راست عنصر نمایش داده میشود. از خاصیت data-placement برای تنظیم موقعیت پاپ اور در بالا، پایین ، چپ و راست عنصر استفاده کنید :

<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>

<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” استفاده کنید که در این صورت مرورگر شما خودش موقیعت پاپ اور را تنظیم میکند .

برای مثال اگر مقدار “auto left” باشد پاپ اور در صورت امکان در سمت چپ نمایش داده خواهد شد و در غیر این صورت در سمت چپ نشان داده میشود .

بستن Popover ها

به صورت پیش فرض،وقتی دوباره بر روی عنصر کلیک کنید پاپ اُور بسته خواهد شد. با این وجود،میتوانید با استفاده از خاصیت data-trigger=”focus” کاری کنید که با کلیک کردن خارج از عنصر هم پاپ اور بسته شود.

<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>

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>

نکته : اگر میخواهید که به هنگام حرکت دادن موس بر روی عنصر پاپ اور نشان داده شود ، از خاصیت data-trigger استفاده نمایید.

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

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

منبع کامل پاپ اور بوت استرپ

[alert color=”blue” icon=””]

حتما بخونید : جهت مشاهده منبع این مطلب و دمو کدها به این لینک مراجعه نمایید.

[/alert] [alert color=”blue” icon=””]

حتما بخونید : جهت دستیابی به منبع کاملی از گزینه ها،متد ها و رویداد های پاپ اور به این لینک مراجعه نمایید.

[/alert]

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش متوسطه بوت استرپ

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج آموزش پروژه محور لاراول و طراحی وب سایت کانون قلم چی

انتشار: ۷ آبان ۱۳۹۵

آموزش کار با پلاگین Popover بوت استرپ

آموزش کار با پلاگین Popover بوت استرپ

نحوه ساخت Popover

موقعیت یابی popover

بستن Popover ها

منبع کامل پاپ اور بوت استرپ

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط