آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش پلاگین Popover در JQuery

دوره های مرتبط با این مقاله

آموزش پلاگین Popover در JQuery

Popover.js ، یک پلاگین popover هوشمند ، سبک و قابل سفارشی سازی است که یک tooltip شامل عنوان و محتوا را برای هر عنصر در HTML در زمان hover یا کلیک یا Focus روی آن ، ایجاد میکند.


ویژگی ها :

  • موقعیت اتوماتیک popover براساس محتوا
  • 12 موقعیت مکانی متفاوت
  • نمایش در صورت کلیک یا hover یا focus روی عناصر
  • تعیین زمان تاخیر برحسب میلی ثانیه

روش استفاده :

ابتدا فایل پلاگینهای popover و JQuery را به پروژه اضافه میکنیم.

< link href="popover.css" rel="stylesheet" / >
< script src="/path/to/jquery.min.js >< /script >
< script src="popover.js" >< /script >

عنصری را در HTML ایجاد کرده و پلاگین روی ان اجرا میکنیم. عنوان و محتوا را نیز به عنوان option برای آن تعریف میکنیم.

< div id="popover" >Hover Me< /div >
	$ ('#popover').popover({
	  title :'My Title',
	  content :'My Content'
	});


از سه حالت زیر برای تعیین زمان نمایش popover استفاده میکنیم.این ویژگی ها را برای option با نام trigger نسبت داده میشود .

  • hover
  • click
  • focus

	$ ('#popover').popover({
	  trigger :'click'
	});

مدت زمان تاخیر در نمایش popover برحسب میلی ثانیه تعیین میکنیم. به صورت پیش فرض این مقدار 10 میلی ثانیه است.

	$ ('#popover').popover({
	  delay : 300
	});

قابلیت تعیین اتوماتیک موقعیت popover را با دستور زیر معین میکنیم.

	$ ('#popover').popover({
	  autoPlace :false
	});


جهت نمایش popover نسبت به محتوا با مقادیر زیر معین میشود

  • 'top' (Default)
  • 'topLeft'
  • 'topRight'
  • 'right'
  • 'rightTop'
  • 'rightBottom'
  • 'bottom'
  • 'bottomLeft'
  • 'bottomRight'
  • 'left'
  • 'leftTop'
  • 'leftBottom'

$ ('#popover').popover({
  placement :'right'
});

  • 196
  •    274
  • تاریخ ارسال :   1398/10/23

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش پلاگین Popover در JQuery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .