منو راست کلیک jQuery Project : آموزش ساخت پنجره ابزار پاپ آپ

منو راست کلیک jQuery : آموزش ساخت پنجره ابزار پاپ آپ

در این مقاله با یک پلاگین کاربردی در خدمت شما هستیم که به‌وسیله آن به‌راحتی می‌توانید منو ابزار به‌صورت پاپ آپ بسازید، پس در ادامه همراه ما باشید با ساخت منو راست کلیک jQuery.

منو راست کلیک jQuery
منو راست کلیک jQuery

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

انتظار ما این است که با راست کلیک می‌کنیم یک پنجره ظاهر می‌شود، شامل یک لیست از ایتم ها که با کلیک روی هر آیتم دو اتفاق می‌افتد :

  •     اول اینکه کادر (Box) ظاهرشده مخفی می‌شود
  •     دوم اینکه عمل موردنظر انجام می‌شود

در مرحله بعد باید توجه کنیم، اگر زمانی که روی صفحه کلیک راست می‌کنیم و خارج از کادر (Box)  ظاهرشده سپس در جای دیگر کلیک چپ کنیم منو مخفی می‌شود.

اگر کاربر دوباره راست کلیک کند بدون بستن منوی اولی، منوی اول به‌صورت خودکار بسته شود و منوی جدید باز شود و کادر (Box) همیشه در مکانی که راست کلیک کرده‌ایم بازخواهد ماند. در ادامه پیش‌نمایش پلاگینی را مشاهده خواهید کرد که بسیار ساده این کار را برای شما انجام خواهد داد.

See the Pen
MMgVjL
by taha (@tahatabibzadeh)
on CodePen.

برای نمایش بهنر بزرگنمایی را روی ۰٫۲۵x قرار دهید با فایل های پروژه را از ساید بار دانلود کنید.

کتابخانه مورد نیاز:

کتابخانه های مربوطه را به ترتیب زیر در تگ هد اضافه کنید:

	<script src="src/js/jquery-3.3.1.min.js"></script>
   <script src="src/js/contextMenu.js"></script>
    <link rel="stylesheet" href="src/css/contextMenu.css">

تنظیمات منو راست کلیک jQuery :

می‌توانید یک فایل اسکریپت به پروژه اضافه کنید یا آن که قبل از بسته شدن تگ <body/> کدهای زیر را پست کنید:

<script type="text/javascript">
	
	
        var data = [
            [
                {
                    text: "<i class='fa fa-cut site-cm-icon'></i>Cut(ctrl+x)",
                    action: function () {
					alert("s")
                        console.log("Cut");
                    }
                },
                {
                    text: "<i class='fa fa-copy site-cm-icon'></i>Copy(ctrl+c)"
                },
                {
                    text: "<i class='fa fa-paste site-cm-icon'></i>Paste(ctrl+v)",
                    action: function () {
                        console.log("Paste");
                    }
                }
            ],
            [
                {
                    text: "<i class='fa fa-bold site-cm-icon'></i>Bold(ctrl+b)"
                },
                {
                    text: "<i class='fa fa-italic site-cm-icon'></i>Italic(ctrl+i)"
                },
                {
                    text: "<i class='fa fa-underline site-cm-icon'></i>Underline(ctrl+u)"
                }],
            [
                {
                    text: "<i class='fa fa-font site-cm-icon'></i> Font"
                }],
            [
                {
                    text: "<i class='fa fa-subscript site-cm-icon'></i>Subscript(ctrl+=)"
                },
                {
                    text: "<i class='fa fa-superscript site-cm-icon'></i>Superscript(ctrl+shift++)"
                }
            ]
        ];

		
        var data2 = [
            [
                {
                    text: "<i class='fa fa-cut site-cm-icon'></i>Cut(ctrl+x)"
                },
                {
                    text: "<i class='fa fa-copy site-cm-icon'></i>Copy(ctrl+c)"
                },
                {
                    text: "<i class='fa fa-paste site-cm-icon'></i>Paste(ctrl+v)"
                }
            ]
        ];

        $("#box1").contextMenu(data);
        $("#box2").contextMenu(data2, {
            name: "box2"
        });
    </script>

نکته :

  • در خطوطی که با کلمه Text شروع می‌شود می‌توانید تیتر و آیکن مورد نظر خود را انتخاب کنید.
  • در خط Action نیز رویدادی که با کلیک بر روی ان باید اتفاق بیافتد را کد نویسی می‌کنیم.
مقاله پیشنهادی :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *