نمادها

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

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

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

آموزش Bootstrap 4 جلسه بیست و هفتم (popover) از سری آموزش های تک قسمتی است.

 

پاپ اور (Popover)

قبلا درباره پاپ اور توضیح داده ایم اما برای آن دسته از عزیزانی که مستقیما در حال مشاهده این آموزش هستند دوباره پاپ اور را توضیح میدهیم . پاپ اور مشابه تولتیپ است با این تفاوت که تولتیپ با رفتن موس روی المان نمایش داده میشود ولی پاپ اور با کلیک روی المان نمایش داده میشود.

 

نحوه ساخت پاپ اور

نحوه ساخت پاپ اور تقریبا مشابه تولتیپ است شما میتوانید قابلیت پاپ اور را به هر تگی بدهید ما اینجا از تگ a استفاده میکنیم لازم است که در تگ a خود attribute با نام data-toggle را مساوی با مقدار popover قرار دهید همچنین attribute با نام title را نیز برابر با header قرار دهید حال نوبت به محتویات داخل پاپ اور هست که با attribute با نام data-content میتوانید آن را بسازید یعنی هر مقداری که برای data-content بنویسید میشود محتویات داخل پاپ اور شما حال نیاز به قطعه کدی جیکوئری دارید که همراه با مثال همین قسمت میتوانید در کد زیر ببینید:

 

موقعیت نمایش popover

شما میتوانید تعیین کنید که پاپ اور در کدام جهت باز شود چهار جهت اصلی یعنی بالا، پایین، چپ و راست میتواند نمایانگر پاپ اور شما باشد برای این مورد کافیست attribute با نام data-placement را برابر با یکی از مقادیر زیر قرار دهید

  • top : برای باز شدن پاپ اور درجهت بالا
  • bottom : برای باز شدن در جهت پایین
  • right : برای باز شدن در جهت راست
  • left : برای باز شدن در جهت چپ

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

بسته شدن پاپ اور با کلیک در هرجا از صفحه

در حالت عادی با کلیک روی تگ مد نظر پاپ اور باز میشود و با کلیک مجدد روی همان تگ پاپ اور بسته میشود اما اگر بخواهیم پس از باز شدن پاپ اور با کلیک روی هر کجا از صفحه پاپ اور بسته شود کافیست attribute با نام data-trigger را مساوی با focus قرار دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

باز و بسته شدن پاپ اور با قرار گیری موس روی آن

در حالت عادی پاپ اور با کلیک روی تگ مد نظر باز و بسته میشود اگر میخواهید پاپ اور هم مانند تولتیپ با رفتن موس روی تگ مد نظر باز و بسته شود کافیست attribute با نام  data-trigger را برابر با hover قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

انیمیشن در پاپ اور

در حالت عادی پاپ اور به صورت خشک و بدون افکت و لحظه ای باز و بسته میشود اگر میخواهید افکت fade را به آن بدهید کافیست دستور انیمیشن را اجرا کنید به این صورت که در کد جیکوئری خود دستور animation را برابر با true قرار دهید اگر این مقدار را  false کنید انیمیشن غیر فعال میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اختصاص دادن پاپ اور به یک container

ابتدا ببینیم که این مورد به چه کار ما می آید فرض کنید شما یک کلمه داخل یک div با سایز بزرگ نوشته اید و میخواهید هر کجای این div که کلیک کردید پاپ اور مربوط به نوشته باز شود بسیار خوب حال که کاربرد این قسمت را متوجه شدیم کافیست برای اجرایی کردن این حالت یک div با کلاس مد نظر خود بسازیم سپس عبارت مد نظر خود را داخل آن بنویسیم  این عبارت میتواند یک تگ html باشد یا هر چیز دیگر سپس باید به کمک دستور container آن را در جیکوئری خود اضافه کنیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

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

در حالت عادی به محض کلیک روی تگ پاپ اور باز میشود و به محض کلیک مجدد بسته اگر بخواهید در این باز و بسته شدن تاخیر به وجود بیاوریم میتوانید ۲ کار انجام دهید حالت اول این است که در باز شدن تاخیر به وجود بیاید کافیست دستور delay را در کد جیکوئری برابر با یک مقدار بر حسب میلی ثانیه قرار دهیم به عنوان مثال ۱۰۰۰ که میشود یک ثانیه اما اگر بخواهیم این تاخیر را هم به باز شدن و هم به بسته شدن بدهیم باید دستور delay را نوشته و در {} مقادیر show و hide را به آن اختصاص دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

استفاده از تگ html در پاپ اور

در حالت عادی هر مقداری که به پاپ اور بدهیم به صورت یک متن معمولی نمایش داده میشود اگر بخواهیم از تگ های html برای پاپ اور خود استفاده کنیم باید در قسمت جیکوئری این کار را انجام دهیم . باید ابتدا متن خود را همراه با تگ های html در قسمت title یا content بنا به نیاز بنویسیم سپس دستور html را برابر با مقدار true قرار دهیم با این کار هر تگی که نوشتیم اجرا میشود و در خروجی نمایش داده میشود اگر مقدار html را false قرار دهیم کد ها اجرا نمیشوند برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

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

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

 

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

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (هنوز امتیازی داده نشده است)
Loading...

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

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

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

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

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

*

code

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