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

در این مقاله از مجموعه مقالات آموزش طراحی سایت می آموزیم که چطور از افزونه MultiScrolling برای ساخت اسکرول چندتایی در وبسایت استفاده کنیم..

افزونه Multi Scrolling، یک پلاگین ساده برای اسکرول چندتایی در سایت هایی است که از نظر عمودی به دو پنل مجزا تقسیم می شوند. این پلاگین هم با مرورگرهایی که css3 را پشتیبانی می کنند و هم آنهایی که قدیمی تر هستند و همچنین ابزارهای لمسی مانند موبایل و تبلت سازگار است.

روش استفاده :

جهت استفاده از این پلاگین لازم است فایلهای css و js پلاگین را در پروژه خود قرار دهیم . همچنین لازم است فایل jquery.js نیز در کنار آنها موجود باشد. اگر میخواهید از افکتهایی easing (swing,linear) استفاده می کنید می توانید jquery UI را نیز استفاده کنید. برای نصب پلاگین multiScroll توسط ترمینال می توانید دستور زیر را در مکانی که می خواهیدنصب شود، فراخوانی کنید.

// With bower
bower install multiscroll.js
// With npm
npm install multiscroll.js

لینک هایی که لازم است در پروژه قرار دهید به شرح زیر هستند :

< link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" / >
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >< /script >
< !-- This following line is needed in case of using the default easing option or when using another
 one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer -- >
< script src="vendors/jquery.easings.min.js" >< /script >
< script type="text/javascript" src="jquery.multiscroll.js" >< /script >

اگر می خواهید پلاگین را دانلود کنید،روی لینک زیر را کلیک کنید :

CDNJS: https://cdnjs.com/libraries/multiscroll.js

کدهای HTML مربوط به پلاگین JQuery MultiScrolling در دوره آموزش طراحی سایت

هر بخش توسط یک عنصر div با کلاس section مشخص می شود. بخش اول که صفحه نخست سایت محسوب می شود، به صورت پیش فرض فعال است.

< div id="multiscroll" >
    < div class="ms-left" >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
    < /div >
    < div class="ms-right" >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
    < /div >
< /div >

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

< div class="ms-section active" >Some section< /div >

برای فراخوانی پلاگین در JQuery، دستور زیر را درون script می نویسیم.

$ (document).ready(function() {
    $ ('#multiscroll').multiscroll();
});

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

$ (document).ready(function() {
    $ ('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        menu: false,
        sectionsColor: [],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null,
        scrollOverflow: false,
        scrollOverflowOptions: null,
        keyboardScrolling: true,
        touchSensitivity: 5,
        //responsive
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveExpand: false,
        // Custom selectors
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',
        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});

آموزش طراحی سایت : آپشن های مربوط به افزونه JQeury MultiScrolling

• آپشن VerticalCentered : وسط چین کردن عمودی محتوای بخش ها (پیش فرض true).
• آپشن ScrollingSpeed : سرعت پیمایش برحسب میلی ثانیه (پیش فرص 700).
• آپشن SectionsColor : تعیین رنگ پیشفرض برای بخشهای مختلف (پیش فرض none).

$ ('#pagepiling').pagepiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

• آپشن Anchors : این آپشن Id لینک هایی که به هر بخش متصل هستند را نمایش می دهد. از این لینک ها برای پیمایش به جلو و عقب استفاده می شود. (مقدار پیش فرض [ ]).
• آپشن (default swing) Easing : افکت حرکتی پیمایش عمودی را مشخص می کند. جهت استفاده از این ویژگی لازم است jquery UI را نیز در پروژه خود قرار دهید. (مقدار پیش فرض swing).
• آپشن LoopTop : مشخص کننده این مورد است که در بخش اول، پیمایش به سمت بالا ما را به سمت آخرین مورد هدایت کند یا خیر (مقدار پیش فرض false).
• آپشن LoopBottom : مشخص کننده این مورد است که در بخش آخر پیمایش به سمت پایین ، ما را به سمت اولین بخش هدایت کند یا خیر (مقدار پیشفرض false).
• آپشن Css3 : استفاده از css3 یا javascript برای پیمایش بین بخش ها ( مقدار پیش فرض tru).
• آپشن NormalScrollElements : اگر می خواهید از اسکرول اتوماتیک روی بعضی عناصر جلوگیری کنید می توانید از این گزینه استفاده کنید، مقدار این گزینه به صورت رشته خواهد بود.

(normalScrollElements: '#element1, .element2')

• آپشن TouchSensitivity : درصد طول و عرض پنجره های مرورگرها و میزانی که یک swipe باید اندازه گیری شود تا به بخش بعدی هدایت شویم (مقدار پیش فرض5 است).
• آپشن AnimateAnchor : مشخص کننده این مورد است که اگر در url بخش خاصی با # مشخص شده بود، در هنگام بارگزاری با انیمیشن خاصی به آن بخش برود یا اینکه همان بخش زمان لود نمایش داده شود (مقدار پیش فرض true).
• آپشن Direction : اسکرول افقی باشد یا عمودی (مقدار پیش فرض vertical).
• آپشن Menu : یک انتخابگر که منو شامل لینکهایی که به بخش های مختلف متصل است را نمایش می دهد.
• آپشن PaddingTop : فاصله از بالای بخش ها.
• آپشن PaddingBottom : فاصله از پایین بخش ها.

آموزش متدهای مربوط به JQeury MultiScrolling در دوره آموزش طراحی سایت

متد 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);

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

آموزش طراحی سایت-آموزش 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);

})   

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

آموزش Jquery-مثال عملی

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

آموزش مثال Hello, world در Jquery

در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:

نمونه یک

<div id="divTest1">Hello, world!</div>

<script type="text/javascript">

$("#divTest1").text("Hello, world!");

همان طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند، استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:

نمونه دو

<div id="divTest2">Hello, world!</div>

<script type="text/javascript">

document.getElementById("divTest2") = "Hello, world!";

اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery اجرای این عملیات را نیز بسیار آسان ساخته است.