Home آموزش طراحی سایت آموزش جیکوئری کلیک راست سفارشی با JQuery

کلیک راست سفارشی با JQuery

8
1
43

کلیک راست سفارشی با JQuery

سلام به همه خوانندگان عزیز ویکی وردپرس 🙂

احتمالا براتون پیش اومده که توی یه سایتی وقتی کلیک راست میکنید منویی که باز میشه با منوی پیشفرض مرورگر متفاوته و گزینه های دیگه ای داخلش هست. برای مثال شاید خیلیاتون تو فایل منیجر picofile این نوع کلیک راست رو دیده باشید. نمونه دیگش هم نرم افزارهای تحت وب هستن؛ مثلا یه سایتی میرید که به صورت آنلاین میتونید نقاشی بکشید. توی اینجور سایت ها کلیک راست رو طبق نیازهای نرم افزارشون طراحی میکنند.

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

See the Pen Custom right click by abbas (@AbbasH90) on CodePen.

اما چطور میشه منوی کلیک راست رو طبق نیاز خودمون بسازیم ؟ با ما همراه باشید.

گام اول: غیر فعال کردن منوی پیشفرض با جاوا اسکریپت

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

گام دوم: ایجاد قالب html منوی دلخواه

خب حالا میخوایم با html منوی دلخواه خودمون رو ایجاد کنیم و توی css هم تو حالت پیشفرض مخفی میکنیمش. با css هم میتونیم بهش استایل بدیم هر جوری که دلمون بخواد 😀

من ساختار زیرو برای html در نظر گرفتم:

گام سوم: تکمیل منو به کمک جاوا اسکریپت

حالا میتونیم برای هر کدوم از عناصر منویی که ساختیم یه کاربرد تو JQuery تعریف کنیم. تو مثالی که ما نوشتیم قراره رنگ پس زمینه body تغییر کنه. از طرفی هم به هر li آیدی رنگ متناظرش رو دادیم. پس با کلیک روی هر li کافیه Value آیدیش رو بخونیم و به عنوان رنگ زمینه body استفاده کنیم. یعنی اینجوری:

همونطور که میدونید منوی ما دقیقا جاییکه موس قرار داره باید باز بشه. پس مختصات نقطه ای که روش کلیک کردیم رو باید پیدا کنیم و منو رو به اونجا منتقل کنیم و بعد نمایش بدیمش. در واقع از این کد استفاده میکنیم:

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

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

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

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

بسیار خب کارمون کامله. با جمع همه کدهای JQuery بالا و مرتب کردنشون به این کد میرسیم:

در واقع استراتژی ما برای ساختن منوی دلخواه اینجوریه:

1- غیرفعال کردن منوی پیشفرض

2- ایجاد منوی دلخواه

3- تنظیمات نمایش منوی دلخواه توسط جاوا اسکریپت

4- ایجاد توابع مربوط به هر گزینه توسط جاوا اسکریپت

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

امیدوارم از این آموزش لذت برده باشید و به دردتون بخوره.

می تونید سوالاتتون رو در بخش نظرات بپرسید.

موفق باشید 🙂

8 نظر

  1. محمد مهدی افقری

    ژانویه 1, 2017 در 7:05 ق.ظ

    خیلی خوب ممنون دنبال چنین کدی بودم البته نمونه هایی دیگه هم دیده بودم ولی خب هیچ کدوم یاد نداده بودند چجوری میشه ساخت که شما اون اموززش رو دادید
    ممنون
    خسته نباشید

    نقل قول

    • ایلیا پژوهیده

      ایلیا پژوهیده

      ژانویه 1, 2017 در 7:21 ق.ظ

      با تشکر از نظر شما . ما همیشه سعی میکنیم بهترین کد ها و افزونه هارو برای شما آماده کنیم .

      نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      ژانویه 1, 2017 در 10:52 ب.ظ

      سلام محمدمهدی جان
      خواهش میکنم، خوشحالم مفید بوده 🙂

      نقل قول

  2. امیر حسین

    ژانویه 1, 2017 در 7:16 ق.ظ

    عالی بود داداش دمت گرم دنبالش همچین چیزی بودم

    نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      ژانویه 1, 2017 در 10:53 ب.ظ

      سلام امیرحسین جان
      خواهش میکنم 🙂

      نقل قول

  3. محمد

    ژانویه 2, 2017 در 9:02 ق.ظ

    خیلی خوب بود♥

    نقل قول

  4. امیرخان

    ژانویه 10, 2017 در 11:29 ق.ظ

    بهترین سایتی که تابحال دیدم!

    نقل قول

    • ایلیا پژوهیده

      ایلیا پژوهیده

      ژانویه 10, 2017 در 11:45 ق.ظ

      مرسی بابت نظرتون

      نقل قول

ارسال نظر

ایمیل شما منتشر نمیشودفیلد های ستاره دار اجباری هستند *