آموزش طراحی سایت-افزونه ها در JQuery

با آموزش جدید Jquery از دوره آموزش طراحی سایت همراه ما باشید.آموزش افزونه sliderbars.js در JQueryاسلاید Slidebars یک افزونه jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت شما است.Slidebars 2 پر از ویژگی های جذاب میباشد.تعداد نامحدودی از اسلایدها - دیگر فقط یک سمت چپ ، یک راست وجود ندارد. https://www.aparat.com/v/lTryM اسلایدهای بالا و پایین.آموزش طراحی سایت : رویدادها - نمایش اسلایدها رویدادهایی را نشان می دهد که نشان دهنده رفتار آن است.سبک انیمیشن شیفت جدید.مدت زمان بهبود انیمیشن.سبک های چاپسبک وزن تنها 1.69kb gzippedجهت استفاده از این افزونه لازم است ، ابتدا فایلهای cssو js لازم را در پروژه اضافه میکنیم.< link href=&quotcss/slidebars.css&quot rel=&quotstylesheet&quot > < script src=&quotjs/jquery.js&quot >< /script > < script src=&quotjs/slidebars.js&quot >< /script >در بخش body صفحه Html ، صفحه به دو بخش محتوای اصلی و منو تقسیم میکنیم و محتوا دلخواه در آنها قرار میدهیم< div canvas=&quotcontainer&quot > < h1 >welcome to my website< /h1 > < p > introduction of slidebars.js< /p > < p > < button class=&quotjs-open-left-slidebar&quot >open left< /button > < button class=&quotjs-close-left-slidebar&quot >CLOSE left< /button > < button class=&quotjs-toggle-left-slidebar&quot >toggle left< /button > < /p > < /div > < div off-canvas=&quotslidebar-1 left shift&quot > < 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'); }) //eventرویدادها:رویدادهای ایجاد نمونه جدید، اعمال 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); })آموزش طراحی سایت : آموزش کار با افزونه Alertifyپلاگین alertify ، پلاگینی سبک برای توسعه دیالوگ باکس و هشدارهای زیبا در مرورگر ها میباشد. از ویژگی های این پلاگین میتوان به قابلیت گسترش و سفارشی سازی آن ، واکنشگرا بودن ، قابلیت اعمال قالب روی آنها و راست چین بودن آنها اشاره کرد. https://www.aparat.com/v/arVKj این پلاگین درواقع جایگزینی برای دیالوگ باکسهای پیش فرض مرورگرها است و استفاده ی بسیار آسانی دارد.در ادامه قطعه کدهای استفاده از این پلاگین را به ازای هشدارهای متفاوت مرورگرها مشاهده میکنیمنمایش پیام و یا هشدار:if(!alertify.myAlert){ //define a new dialog alertify.dialog('myAlert',function(){ return{ main:function(message){ this.message = message; }, setup:function(){ return { buttons:[{text: &quotcool!&quot, key:27/*Esc*/}], focus: { element:0 } }; }, prepare:function(){ this.setContent(this.message); } }}); } //launch it. alertify.myAlert(&quotBrowser dialogs made easy!&quot);آموزش راه اندازی پلاگین alertify.alert(&quotThis is an alert dialog.&quot, function(){ alertify.message('OK'); });دریافت تاییدیه از کاربرalertify.confirm(&quotThis is a confirm dialog.&quot, function(){ alertify.success('Ok'); }, function(){ alertify.error('Cancel'); }); Run Example Documentationدریافت ورودی از کاربرalertify.prompt(&quotThis is a prompt dialog.&quot, &quotDefault value&quot, function(evt, value ){ alertify.success('Ok: ' + value); }, function(){ alertify.error('Cancel'); })نمایش پیام موفقیت آمیز// success notification // Shorthand for: // alertify.notify( message, 'success', [wait, callback]); alertify.success('Success message');نمایش پیام خطا// error notification // Shorthand for: // alertify.notify( message, 'error', [wait, callback]); alertify.error('Error message');نمایش هشدار // alertify.notify( message, 'warning', [wait, callback]); alertify.warning('Warning message'); Run Example Documentationنمایش هشدار به کاربر // default notification // Shorthand for: // alertify.notify( message, [type, wait, callback]); alertify.message('Normal message'); Run Example Documentationآموزش طراحی سایت ادامه دارد