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

با آموزش جدید 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 ، پلاگینی سبک برای توسعه دیالوگ باکس و هشدارهای زیبا در مرورگر ها میباشد. از ویژگی های این پلاگین میتوان به قابلیت گسترش و سفارشی سازی آن ، واکنشگرا بودن ، قابلیت اعمال قالب روی آنها و راست چین بودن آنها اشاره کرد.

این پلاگین درواقع جایگزینی برای دیالوگ باکسهای پیش فرض مرورگرها است و استفاده ی بسیار آسانی دارد.

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

نمایش پیام و یا هشدار:

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

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