ایجاد منوی راست کلیک سفارشی

- visibility ١٩ mode_comment

به نام خدا

با سلام خدمت همگی دوستان 7لرنی. امیدوارم حالتون خوب باشه و ایام به کامتون. امروز میخوایم یه منوی راست کلیک اختصاصی واسه خودمون درست کنیم. فرقی نمیکنه برای کل صفحه یا قسمتی از صفحه!

ما میخوایم این کارو با JS انجام بدیم ولی شاید بگید که با HTML5 هم میشه(اضافه کردن آیتم به منوی کلیک راست با HTML5)! خب باید بگم که حرف شما درسته ولی تنها مرورگر فایرفاکس از این منو پشتیبانی میکنه! پس تنها کار استفاده از جاوا اسکریپته.

ابتدا دمو رو ببینید.

اولین چیزی که باید بدونیم اینه که رویداد راست کلیک در جاوا اسکریپت چیه. به کد زیر توجه کنید.

همونطور که دیدید برای اینکه راست کلیک کاربر رو کنترل کنیم، از رویداد contextmenu استفاده میکنیم.

خب حالا اگه خواستیم با جی کوئری کار کنیم چطوری باید از رویداد contextmenu استفاده کنیم؟ به کد زیر توجه کنید.

همونطور که دیدید از متد ()on استفاده کردیم.

خب حالا برای اینکه یک منوی کلیک راست سفارشی داشته باشیم، باید کد HTMLش رو بنویسیم و بهش استایل بدیم. (این قسمت نیازی به توضیح نداره)

HTML:

CSS:

همونطور که دیدید به منو یه استایل دادیم و پنهانش کردیم.

خب حالا برین سراغ کدهای jQuery:

همونطور که دیدید وقتی کاربر راست کلیک میکنه منو رو در همون مکانی که راست کلیک شده نمایش میدیم. فقط این کد یه نقص داره! به تصویر نگاه کنید.Capture

همونطور که دیدید وقتی کاربر بیاد گوشه صفحه کلیک راست کنه، منو به صورت کامل دیده نمیشه، بنابراین باید یه دستکاری رو کد انجام بدیم.

jQuery:

خط 5 تا 13 رو به کدمون اضافه کردیم. همونطور که دیدید عرض و ارتفاع پنجره کاربر و مکانی که در اونجا کلیک شده رو در چندتا متغیر ذخیره کردیم. سپس دو متغیر دیگه به نام های PageX و PageY تعریف کردیم که مقدارشون معین میکنه اگه کاربر خیلی سمت راست یا پایین کلیک کرد، منو در همون نقطه ای که کلیک شده قرار نگیره و در مکانی قرار بگیره که کل منو دیده بشه.

میتونید دمو رو مشاهده و دانلود کنید.

 

حالا که با روش کلی ایجاد یک منوی راست کلیک آشنا شدید میتونید که کد HTML و استایلش رو به صورت دلخواه تغییر بدید و همچنین میتونید آیتم هایی کاربردی بهش اضافه کنید.

امیدوارم این مطلب براتون مفید بوده باشه.

موفق باشید

comment دیدگاه کاربران
حمید

سلام
مثل همیشه عالی بود
خسته نباشید

علی امینی

ممنون

rockstar

بسیار جالب بود ممنون ❓

محسن

ممنون ولی یه اشکال داره
وقتی صفحه لود میشه اون منو گوشه سمت چپ بالا دیده میشه
و بعد از اینکه کلیک راست میشه جاش عوض میشه!

علی امینی

سلام
دوست عزیز اگه یه مقدار دقتتون رو بیشتر کنید مشکلتون حل میشه. تو کدهای سی اس اس اگه نگاه کرده باشید در خط اول display منو رو به صورت none قرار دادم تا منو دیده نشه. حتما شما این خط کد رو از استایل منو حذف کردید که اینطور شده.

محمود

سلام و درود بر شما با این آموزش فوق العاده تون.
جناب امینی عزیز بنده متاسفانه اصلا با کد نویسی و دستورات آن آشنا نیستم.
ولی خیلی دلم می خواد از این ویژگی تو وب سایتم استفاده کنم.
اینم اهم آدرس سایتمه:
http://www.arize.ir
با توجه به این که با وردپرس کار می کنم ، میشه خواهش کنم راهنمایی کنید که این کد ها رو باید کجا قرار بدم؟
خیلی از لطفتون ممنونم. ❓

ممنون.
دوست عزیز برای اینکه از این ویژگی استفاده کنید حداقل باید بدونید که کدهای استایل یا کدهای جاواساکریپت رو کجا و به چه صورت قرار بدید و حالا که روی وردپرس هست باید کمی هم بر وردپرس آشنایی داشته باشید. و کار های زیرو انجام بدید.
کدهای سی اس اس رو داخل استایل پوسته تون قرار بدید. کد HTML رو برای خورتون سفارشی کنید( یعنی آیتم هایی که میخواید بهش اضافه کنید) بعد سفارشی شده رو بعد از تگ body یا جایی یا صفحه ای که دوست دارید قرار بدید. حالا فایل rightClick.js رو از پایی صفحه دانلود کنید و قبل بسته شدن تگ body قرار بدید.

Mahmood Dabestani

خیلی از پاسخگویی تون ممنونم.
ولی نفرمودید تگ body تو کدوم فایل هستش؟
ضمن بنده فایل ضمیمه ی شما رو دانلود کردم که شامل سه تا فایل بود.
index
jquery-1.10.2.min
rightClick

علی امینی

توی وردپرس چندتا قسمت داریم.index.php برای صفحه اصلی هست و single.php مال صفحه ی پست یا همون صفحه سانگل هست. ممکنه تگ body رو گذاشته باشن داخل header.php پس بهتره کد HTML رو بذارید اول فایل index.php .
اسکریپت راست کلیک داخل فایل rightClick هست.

Mahmood Dabestani

جناب امینی عزیز
جسارت بنده رو ببخشید
اگه دسترسی بدم لطف می فرمایید برام انجام بدید؟

Mahmood Dabestani

پاسخم نگفتید جناب امینی عزیز.

یوسف

چرا وقتی به پایین صفحه میریم این منوی جای درست نشون داده نمیشه!
لطفا راهنمایی کنید 😥

علی امینی

اگه صفحه‌تون درازه و اسکرول داره باید در کدهای جاوااسکریپت، مقدار position رو از absolute به fixed تغییر دهید.(خط 15 از کدهای جی‌کوئری نهایی پست)

حسن

نمیدونم چرا وقتی کنار صفحه کلیک میکنم تو یک نقطه ای مثل عکس زیر میشه با اینکه من مقادیر عددی رو هم عوض کردم ولی بازم درست نشد ممنون میشم راهنمایی کنید
http://www.xum.ir/images/2014/09/03/9-3-201412-10-56AM.jpg

علی امینی

این فایل JS رو جایگزین قبلی کنید.

حسن

ممنون..اون مشکل حل شد ولی دیگه خاصیت لینک کار نمیکنه و به هرچی لینک میدم انگار نه انگار

عرفان

سلام
وای وای وای
واااااااااااااااای
این مطلبتون عالیههه
بی نظیرر
خیلی خیلی ممنون
واقعا به کارم اومد

saeed_ballack_66

سلام آقا واقعا دستت درد نکنه خدا خیرت بده که دست ما ها رو بدونه کوچیک ترین منتی میگیری .
انشاء ال.. در زندگیت موفق باشی . ❓

سلام دوست عزیز.
خواهش میکنم وظیفه هست.
شما هم موفق باشید.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.