آموزش طراحی سایت-آموزش Flickerplate در جی کوئری

امروز با مقاله دیگری از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله به آموزش افزونه Flickerplate در JQuery می پردازیم.

پلاگین Flickerplate یک کامپوننت از جاوا اسکریپت است که اجازه حرکت بین بخش های مختلف را به ما می دهد. جهت نصب توسط ترمینال میتوانید از دستور زیر استفاده کنید.

bower install flickerplate

لینک های زیر را در پروژه قرار دهید :

< head >
< link href="css/flickerplate.css" rel="stylesheet" type="text/css" >
< /head >
< body >
/* Your content goes here */
< script src="js/min/flickerplate.js" >< /script >
< /body >

 

قطعه کد زیر طریقه استفاده از این پلاگین را نمایش می دهد :

< div class="flicker-example" >
< ul >
< li data-background="image-url.jpg" >
< div class="flick-title" >Example Heading< /div >
< div class="flick-sub-text" >Sub Text< /div >
< /li >
< li data-background="image-url.jpg" >
< div class="flick-title" >Example Heading< /div >
< div class="flick-sub-text" >Sub Text< /div >
< /li >
< /ul >
< /div >
< script >
new flickerplate({
selector: '.flicker-example'
});
< /script >

 

آپشن های پلاگین FlickerPlate در JQuery

مثالی از پلاگین FlickerPlate

new flickerplate({
selector: '.flicker-example',
animation: 'transition-fade',
autoFlick: false,
dotAlignment: 'right',
theme: 'dark'
});

 

اگر قصد دارید پلاگین شما با قابلیت حرکت به صورت لمسی نیز باشد، از کتابخانه Hammer استفاده کنید :

< body >
 /* Your content goes here */
< script src="js/min/hammer-v2.0.3.js" >< /script >
< script src="js/min/flickerplate.js" >< /script >
< /body >

 

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

آموزش طراحی سایت-پلاگین Page Piling در جی کوئری

سلام بر دوستان عزیز و همراه..

امروز با مقاله ای دیگر از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله به آموزش افزونه 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);

 

با آموزش های بعدی در زمینه آموزش طراحی سایت همراه ما باشید ...

آموزش طراحی سایت-آموزش افزونه اسلایدر در جی کوئری

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

امروز با یک مقاله دیگه از سری مقاله های آموزش طراحی سایت همراه شما هستیم. مقاله امروز برای دوستانی کاربردیست که با جی کوئری آشنایی داشته باشند؛ چون قرار همراه با هم یکی از افزونه های (پلاگین های) جی کوئری تحت عنوان SlideBars رو یاد گرفته و بکار بگیریم..

افزونه Slidebars در jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت مورد استفاده قرار می گیرد. Slidebars 2 دارای ویژگی های هیجان انگیز و پرکاربردی است.

برای استفاده از این افزونه لازم است پیش از هر کاری فایل های css و js مورد نیاز را به پروژه اضافه کنیم :

< link href="css/slidebars.css" rel="stylesheet" >
< script src="js/jquery.js" >< /script >
< script src="js/slidebars.js" >< /script >

 

در بخش body در صفحه Html، صفحه را به دو بخش محتوا اصلی و منو تقسیم می کنیم و محتوا دلخواه را در آنها قرار می دهیم :

< div canvas="container" >
 < h1 >welcome to my website< /h1 >
< p > introduction of slidebars.js< /p >
< p >
< button class="js-open-left-slidebar" >open left< /button >
< button class="js-close-left-slidebar" >CLOSE left< /button >
< button class="js-toggle-left-slidebar" >toggle left< /button >
< /p >
< /div >
< div off-canvas="slidebar-1 left shift" >
< p >menu left< /p >
< /div >

 

جهت و مدل باز و بسته شدن منو، با استفاده از پارامتر off-canvas مشخص می شود. قطعه کد جی کوئری را برای فراخوانی افزونه اسلایدر در جی کوئری، بصورت زیر می نویسیم :

$ (document).ready(function(){
var controller = new slidebars();
controller.init();

 

بعد از ایجاد یک نمونه جدید از شی، برای رویداد کلیک روی دکمه منو، متد باز کردن منو را اجرا می کنیم :

$ ('.js-open-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.open('slidebar-1');
})

 

با کلیک روی دکمه دارای کلاس مشخص، متد بستن منو را فراخوانی می کنیم :

$('.js-close-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.close('slidebar-1');
})

 

متد toggle، دو متد close و open را با یکدیگر اجرا می کند :

$('.js-toggle-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.toggle('slidebar-1');
})
//events

 

رویدادها

رویدادها برای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal است، استفاده می شود و مدل رفتاری منو در زمان باز و بسته شدن را نشان می دهد. رویداد باز و بسته شدن منو نیز از جمله رویدادهای این افزونه است.

$ ( controller.events ).on( 'init', function () {
console.log( 'Init event' );
} );
$ (controller.events).on('css',function () {
console.log('css')
})
$ (controller.events).on('exit',function () {
console.log('exit')
})
$ (controller.events).on('opening',function (event,id) {
console.log('opening'+id);
})
$ (controller.events).on('opened',function (event,id) {
console.log('opened'+id);
})
$ (controller.events).on('closing',function (event,id) {
console.log('closing'+id);
})
$ (controller.events).on('closed',function (event,id) {
console.log('closed'+id);
})   

 

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