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

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

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

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

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

در مرحله بعد باید توجه کنیم، اگر زمانی که روی صفحه کلیک راست می‌کنیم و خارج از کادر (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>

نکته :