نمادها

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

آموزش Bootstrap جلسه سی و دوم (Popover)

در خدمت شما هستیم با آموزش Bootstrap جلسه سی و دوم (Popover)

آموزش Bootstrap جلسه سی و دوم (Popover) از سری آموزش های تک قسمتی است

سلام برنامه در جلسه قبلی درباره ساخت تولتیپ بحث کرد در این جلسه موردی پیشرفته تر یاد می گیرید

popover نحوه کارش مشابه تولتیپ است اما با این تفاوت که ظاهری زیبا تر و امکاناتی بیشتر دارد

به عنوان مثال شما در پاپ اور می توانید header و footer طراحی کنید.

همچنین می توانید رنگ ظاهر نمایشی را تغییر دهید و علاوه بر متن موارد دیگر را نیز اضافه کنید

می توانید تعیین کنید که با کلیک موس نمایش داده شود یا با hover کردن موس و …

این پاپ اور کاملا رسپانسیو بوده و با کلاس های بوت استرپ ساخته می شود

 

پاپ اور (popover)

همانطور که گفتیم نحوه عملکرد popover مشابه تولتیپ است با این تفاوت که در تولتیپ با hover شدن روی تگ تولتیپ باز میشود اما در popover باید روی تگ کلیک شود تا باز شود نحوه عملکرد popover به صورت toggle است یعنی با یکبار کلیک روی تگ باز میشود با کلیک مجدد بسته میشود.

برای اجرا شدن popover ابتا باید فایل popover.js و یا bootstrap.js اجرا شود توجه داشته باشید که اجرا کردن یکی از ۲ فایل کافیست و هر دو آنها نباید با هم اجرا شود.

همانطور که گفتیم روش اجرای پاپ اور به صورت toggle است پس برای ساخت آن ابتدا به attribute نیاز داریم به اسم data-toggle که به خود مقدار popover بگیرد. سپس به attribute به نام data-content داریم که در آن متن داخل popover قرار میگیرد. همچنین میتوان از مقدار title برای ایجاد تیتر در پاپ اور استفاده کرد.

علاوه بر موارد گفته شده برای اجرای popover نیاز به  کد جیکوئری داریم که بتواند آن را نمایش دهد لذا از کد جیکوئری زیر برای این کار استفاده میکنیم:

برای واضح تر شدن موارد گفته شده میتوانید از کد کامل زیر استفاده کنید که برای شما یک popover کامل را میسازد و تمام مواردی که تا الان گفتیم در آن موجود است:

 

موقعیت باز شدن popover

اگر خاطرتان باشد زمانی که tooltip را آموزش دادیم گفتیم که میتوانیم این تولتیپ ها را در هر جهتی بنا به نیاز خود باز کنیم و نمایش دهیم این مورد برای پاپ اور نیز صدق میکند و شما میتوانید آن را در هر جهتی باز کنید. با اضافه کردن attribute با مقدار data-placement که مقادیر top و right و left و top میگیرد میتوانید این کار را انجام دهید. برای مشخص شدن موضوع از کد زیر کمک بگیرید:

همچنین شما میتوانید از مقدار auto در کنار ۴ جهت استفاده کنید که باعث میشود تشخیص باز شدن با خود مرورگر و المان های داخل صفحه باشد.

بستن popover

همانطور که گفتیم پاپ اور به صورت toggle عمل میکند یعنی همانطور که روی آن کلیک میکنیم برای باز شدن به همان صورت هم باید کلیک کنیم برای بسته شدن اما میشود این حالت پیش فرض را تغییر داد چرا که این برای کاربر و ux سایت زیاد جالب نیست و از حوصله کاربر خارج است مخصوصا اینکه در حالت پیش فرض بعد از باز شدن پاپ اور تا لحظه نبستن آن popover باز میماند و این کاربر را دچار مشکل میکند ما میتوانید کاری کنیم تا کاربر با کلیک روی هر کجای صفحه پاپ اور را ببندد.

برای این کار نیاز به attribute با مقدار data-trigger که باید برابر با focus باشد داریم.
برای واضح شدن موضع از کد زیر کمک بگیرید:

و در نهایت میتوان پاپ اور را مشابه تولتیپ کرد.

جای اینکه پاپ اور با کیک عمل کند میتوان کاری کرد که با رفتن موس روی آن باز و رفتن موس از روی آن بسته شود.
برای اینکار کافیست data-trigger را برابر با hover بگذارید مشابه کد زیر:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه سی و یکم (Tooltip)

آموزش Bootstrap جلسه سی و سوم (Scrollspy)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا آن را در آپارات ببینید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (4 رای, میانگین: 4٫75 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه سی و دوم (Popover): نوع فایل:mp4 حجم فایل:17.76 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.