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

آموزش پلاگین jqContextMenu در JQuery

دوره های مرتبط با این مقاله

آموزش پلاگین jqContextMenu در JQuery

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


آموزش پلاگین jqContextMenu  در JQuery

این پلاگین آیکونها و قالب های سفارشی دارد و بسیار سبک و راحت برای استفاده است.


روش استفاده:

ابتدا لینکهای مورد نظر از پلاگین را در پروژه قرار میدهیم. از فونت font-awesome نیز برای قرار دادن ایکونهای سفارشی استفده میکنیم

< link rel="stylesheet" href="/path/to/jqcontext-menu.css" >
< script src="/path/to/jquery.slim.min.js" >< /script >
< script src="/path/to/jqcontext-menu.js" >< /script >
< link rel="stylesheet" href="/path/to/font-awesome.min.css" >

کد HTML زیر را در body مینویسیم

< div id="content" >< /div >

در بخش اسکریپت JQuery ، در یک متغیر ایتمهای منو را که شامل آیکون ، متن و dataKey جهت استفاده در رویداد کلیک تعریف میکنیم

const myMenu = [{
        icon:'fas fa-angle-right',
        text:'Add',
        dataKey:'add'
      },
      {
 icon:'fas fa-angle-right',
 text:'Copy',
        dataKey:'copy'
      },
      {
        icon:'fas fa-angle-right',
        text:'Add to Bookmarks',
        dataKey:'bookmark'
      },
      {
	]

پلاگین را روی عنصر HTML که با کلاس مشخصی تعریف کردیم ، اجرا میکنیم. Option contxtMenu برای قرادادن متغیر در منوی کلیک راست مورد استفاده قرار میگیرد.

                                	
$ ('#content').jqContextMenu({
  contextMenu: myMenu
});

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

$ ('#content').jqContextMenu({
  contextMenu: myMenu,
  defaultStyle:'jqcontext-menu-dark'
});

زمان اعمال یک رویداد مثلا click , mouseDown روی هر کدام از آیتم های منوی کلیک راست براساس dataKey مورد نظر میتوانیم متدی را فراخوانی کنیم یا از کدهای دلخواه خودمان استفاده کنیم

$(document).on('mousedown','#content #jqcontext-menu li',function () {
  var dataKey = $(this).attr('data-key');
	  if (dataKey =='edit'){
	    alert('you clicked "edit" button');
	  }else {
    alert('you clicked ' + dataKey+' button');
  }
});
  • 99
  •    148
  • تاریخ ارسال :   1398/11/02

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش پلاگین jqContextMenu در JQuery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

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