با آموزش جدید Jquery از دوره آموزش طراحی سایت همراه ما باشید.
آموزش افزونه sliderbars.js در JQuery
اسلاید Slidebars یک افزونه jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت شما است. Slidebars 2 پر از ویژگی های جذاب میباشد. تعداد نامحدودی از اسلایدها - دیگر فقط یک سمت چپ ، یک راست وجود ندارد.
اسلایدهای بالا و پایین.
آموزش طراحی سایت : رویدادها - نمایش اسلایدها رویدادهایی را نشان می دهد که نشان دهنده رفتار آن است.
-
سبک انیمیشن شیفت جدید.
-
مدت زمان بهبود انیمیشن.
-
سبک های چاپ
-
سبک وزن تنها 1.69kb gzipped
جهت استفاده از این افزونه لازم است ، ابتدا فایلهای 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');
})
//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 ، پلاگینی سبک برای توسعه دیالوگ باکس و هشدارهای زیبا در مرورگر ها میباشد. از ویژگی های این پلاگین میتوان به قابلیت گسترش و سفارشی سازی آن ، واکنشگرا بودن ، قابلیت اعمال قالب روی آنها و راست چین بودن آنها اشاره کرد.
آدرس صفحه وبی که میخواهید نمایش دهید را Paste کنید
این پلاگین درواقع جایگزینی برای دیالوگ باکسهای پیش فرض مرورگرها است و استفاده ی بسیار آسانی دارد.
در ادامه قطعه کدهای استفاده از این پلاگین را به ازای هشدارهای متفاوت مرورگرها مشاهده میکنیم
نمایش پیام و یا هشدار:
if(!alertify.myAlert){
//define a new dialog
alertify.dialog('myAlert',function(){
return{
main:function(message){
this.message = message;
},
setup:function(){
return {
buttons:[{text: "cool!", key:27/*Esc*/}],
focus: { element:0 }
};
},
prepare:function(){
this.setContent(this.message);
}
}});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");
آموزش راه اندازی پلاگین alertify
.alert("This is an alert dialog.", function(){
alertify.message('OK');
});
دریافت تاییدیه از کاربر
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
Run Example Documentation
دریافت ورودی از کاربر
alertify.prompt("This is a prompt dialog.", "Default value",
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
آموزش طراحی سایت ادامه دارد
