سلام بر دوستان عزیز و همراه..
امروز با مقاله ای دیگر از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله به آموزش افزونه Page Piling در جی کوئری می پردازیم..
پلاگین Page Piling یک پلاگین کاربردی است که همچنان که روی مروگرهای جدید به خوبی اجرا میشود، روی مرورگرهای قدیمی نیز مانند Internet Explorer 8 و 9 و Opera 12 و غیره کار میکند.در واقع این پلاگین هم با مرورگرهایی که css3 را پشتبانی می کنند و هم آنهایی که قدیمی تر هستند، سازگاری دارد. همچنین با ابزارهای لمسی مانند موبایل و تبلت نیز سازگار است.
روش استفاده از افزونه Page Piling در جی کوئری
جهت استفاده از این پلاگین لازم است فایلهای css و js پلاگین را در پروژه خود قرار دهیم . همچنین لازم است فایل jquery.js نیز در کنار آنها موجود باشد. اگر میخواهید از افکتهایی easing (swing,linear) استفاده میکنید می توانید jquery UI را نیز استفاده کنید.
نصب توسط مرورگر
برای نصب پلاگین PagePiling توسط ترمینال می توانید دستور زیر را در مکانی که می خواهید نصب شود، فراخوانی کنید.
bower install pagepiling.js
لینک هایی که لازم است در پروژه قرار دهید.
< link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" / > < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" >< /script > < script type="text/javascript" src="jquery.pagepiling.js" >< /script >
اگر میخواهید پلاگین را دانلود کنید، روی لینک زیر را کلیک کنید :
CDNJS: https://cdnjs.com/libraries/pagePiling.js
کدهای HTML مربوط پلاگین JQuery PagePiling
هر بخش توسط یک عنصر div با کلاس section مشخص میشود. بخشی اول که صفحه نخست سایت محسوب میشود، به صورت پیش فرض فعال است.
< div id="pagepiling" > < div class="section" >Some section< /div > < div class="section" >Some section< /div > < div class="section" >Some section< /div > < div class="section" >Some section< /div > < /div >
معرفی پلاگین PagePiling
برای فراخوانی پلاگین در جی کوئری، دستور زیر را درون script می نویسیم :
$ (document).ready(function() {
$ ('#pagepiling').pagepiling();
});
تمام گزینه های این پلاگین در قطعه کد زیر موجود است :
$ (document).ready(function() {
$ ('#pagepiling').pagepiling({
menu: null,
direction: 'vertical',
verticalCentered: true,
sectionsColor: [],
anchors: [],
scrollingSpeed: 700,
easing: 'swing',
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
'textColor': '#000',
'bulletsColor': '#000',
'position': 'right',
'tooltips': ['section1', 'section2', 'section3', 'section4']
},
normalScrollElements: null,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
});
});
جهت اتصال منو با بخش های مختلف میتوانیم از پارامتر menu استفاده کنیم.
آموزش گزینه های پلاگین Page Piling در جی کوئری
- verticalCentered :
وسط چین کردن عمودی محتوای بخش ها (پیش فرض true)
- scrollingSpeed :
سرعت پیمایش برحسب میلی ثانیه (پیش فرص 700)
- sectionsColor :
تعیین رنگ پیش فرض برای بخشهای مختلف (پیش فرض none)
$ ('#pagepiling').pagepiling({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
- Anchors :
لینک هایی که به هر بخش متصل هستند را نمایش میدهد. از این لینکها برای پیمایش به جلو و عقب استفاده می شود (مقدار پیش فرض []).
- Easing (Default Swing) :
افکت حرکتی پیمایش عمودی را مشخص میکند. جهت استفاده از این ویژگی لازم است jquery UI را نیز در پروژه خود قرار دهید (مقدار پیشفرض swing).
- LoopTop :
مشخص کننده این مورد است که در بخش اول، پیمایش به سمت بالا ما را به سمت آخرین مورد هدایت کند یا خیر (مقدار پیش فرض false).
- LoopBottom :
مشخص کننده این مورد است که در بخش آخر پیمایش به سمت پایین ، ما را به سمت اولین بخش هدایت کند یا خیر (مقدار پیشفرض false).
- Css3 :
استفاده از css3 یا javascript برای پیمایش بین بخش ها ( مقدار پیش فرض tru).
- NormalScrollElements :
اگر میخواهید از اسکرول اتوماتیک روی بعضی عناصر جلوگیری کنید میتوانید از این گزینه استفاده کنید .مقدار این گزینه به صورت رشته خواهد بود.
(normalScrollElements: '#element1, .element2') keyboardScrolling: (default true) Defines if the content can be navigated using the keyboard
اسکرول مطالب توسط دکمه های کیبورد (مقدار پیش فرض true).
- TouchSensitivity :
درصد طول و عرض پنجره های مرورگرها و میزانی که یک swipe باید اندازه گیری شود تا به بخش بعدی هدایت شویم (مقدار پیش فرض5).
- AnimateAnchor :
مشخص کننده این مورد است که اگر در url بخش خاصی با # مشخص شده بود، در هنگام بارگزاری با انیمیشن خاصی به آن بخش برود یا اینکه همان بخش زمان لود نمایش داده شود (مقدار پیش فرض true).
- Direction :
اسکرول افقی باشد یا عمودی (مقدار پیش فرض vertical).
- Menu :
یک انتخابگر که منو شامل لینک هایی که به بخش های مختلف متصل است را نمایش می دهد.
مثال :
< ul id="myMenu" >
< li data-menuanchor="firstPage" class="active" >< a href="#firstPage" >First section< /a ><
/li >
< li data-menuanchor="secondPage" >< a href="#secondPage" >Second section< /a >< /li >
< li data-menuanchor="thirdPage" >< a href="#thirdPage" >Third section< /a >< /li >
< li data-menuanchor="fourthPage" >< a href="#fourthPage" >Fourth section< /a >< /li >
< /ul >
$ ('#pagepiling').pagepiling({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
متدهای مربوط به پلاگین PagePiling
- moveSectionUp() :
اسکرول به سمت بالا یک بخش
$ .fn.pagepiling.moveSectionUp();
- moveSectionDown() :
اسکرول یک بخش به سمت پایین
$ .fn.pagepiling.moveSectionDown();
- moveTo(section) :
اسکرول صفحه به بخش مشخص شده
/*Scrolling to the section with the anchor link `firstSection` */
$ .fn.pagepiling.moveTo('firstSection');
//Scrolling to the 3rd section in the site
$ .fn.pagepiling.moveTo(3);
//Which is the same as
$ .fn.pagepiling.moveTo(3);
- setAllowScrolling(boolean) :
حذف امکان اسکرول بین بخش توسط موس یا حالت لمسی
$ .fn.pagepiling.setAllowScrolling(false);
- setKeyboardScrolling(boolean) :
افزودن یا حذف امکان اسکرول بین بخش توسط دکمه های کیبورد
$ .fn.pagepiling.setKeyboardScrolling(false);
- setScrollingSpeed(milliseconds) :
سرعت اسکرول برحسب میلی ثانیه
$ .fn.pagepiling.setScrollingSpeed(700);
با آموزش های بعدی در زمینه آموزش طراحی سایت همراه ما باشید ...
