illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

19 8071 ۲۱ اردیبهشت ۹۳

به نام خدا

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

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

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

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

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

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

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

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

HTML:

CSS:

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

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

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

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

jQuery:

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

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

 

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

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

موفق باشید

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 19 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      علی امینی(۲۶ اردیبهشت ۱۳۹۳)

      سلام
      دوست عزیز اگه یه مقدار دقتتون رو بیشتر کنید مشکلتون حل میشه. تو کدهای سی اس اس اگه نگاه کرده باشید در خط اول 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(۲۵ خرداد ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    saeed_ballack_66(۲۱ آذر ۱۳۹۳)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram