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

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

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

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

یک پلاگین اسلایدر زمان است که رویدادهای را در یک قالب واکنشگرا ، قالب اسکرول و به صورت افقی و عمودی و با انیمیشن Fade نمایش داده میشود


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

لینکهای فایل را در پروژه قرار میدهیم.

< link href="jquery.roadmap.min.css" rel="stylesheet" >
	< script src="https://code.jquery.com/jquery-3.3.1.min.js" >< /script >

	
	< !-- Include jQuery Roadmap Plugin -- >
	< script src="jquery.roadmap.min.js" type="text/javascript" >< /script >


در بخش Body کد زیر را وارد میکنیم.

< div id="my-timeline"  >< /div >

در بخش اسکریپت ، در یک متغیر لیست تاریخ و توضیحات رویدادها را وارد میکنیم.

var myEvents = [{
      content:'Lorem ipsum dolor sit amet'
    },{
      date:'Q2 - 2017',
      content:'Lorem ipsum dolor sit amet'
    },{
      date:'Q3 - 2017',
      content:'Lorem ipsum dolor sit amet'
    },
    // ...
    {
      date:'Q3 - 2018',
      content:'Lorem ipsum dolor sit amet'
    }
];



پلاگین را روی عنصر با کلاس معین ، فراخوانی میکنیم. از این متغیر به عنوان ورودی آن استفاده میکنیم.

$ ('#my-timeline').roadmap(myEvents);

Option های موجود در این پلاگین سبب سفارشی شدن آن میشود

$ ('#my-timeline').roadmap(myEvents,{
  eventsPerSlide: 5// default: 6
	});

اگر رویدادها در چند صفحه باشند ، میتوان مشخص کرد در مرحله اول ، کدام صفحه نمایش داده شود. به صورت پیش فرض ، صفحه اول نمایش دیده میشود.

$ ('#my-timeline').roadmap(myEvents,{
  slide: 2// default: 1
	});

ایکونهای قبل و بعد در صفحات مختلف را میتوان به شکل زیر انجام داد.

$ ('#my-timeline').roadmap(myEvents,{
  // default: 'prev'
  prevArrow:'< i class="material-icons" >keyboard_arrow_left< /i >',
  // default: 'next'
  nextArrow:'< i class="material-icons" >keyboard_arrow_right< /i >'
	});


به صورت پیش فرض ؛ رویدادها در قالب مشابه کد زیر نمایش داده میشوند ، می توان این قالب را به شکل دلخواه خود در اورد.

$ ('#my-timeline').roadmap(myEvents,{
 
  eventTemplate:'< li class="timeline__events__event" >' +
                    '< div class="event" >' +
                      '< div class="event__date" >####DATE###< /div >' +
                      '< div class="event__content" >####CONTENT###< /div >' +
                    '< /div >' +
                  '< /li >',
 
});


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

$ ('#my-timeline').roadmap(myEvents,{
  // auto, horizontal, vertical
  orientation:'auto'
});

  • 82
  •    152
  • تاریخ ارسال :   1398/11/02

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

ارسال

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

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