منوی زمینه ثابت باز نشد. منوی زمینه سفارشی با استفاده از منوی زمینه جاوا اسکریپت در مرورگر کار نمی کند

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

برای سال‌ها، اصطلاح «منو زمینه» عمدتاً به برنامه‌های بومی اشاره دارد. با این حال، اکنون این فرصت را داریم که در برنامه های تحت وب نیز از آن بهره ببریم. یک مثال فایل منیجر در جیمیل است. این منو با استفاده از کد جاوا اسکریپت:

در آینده، ما قادر خواهیم بود برای سایت های مبتنی بر HTML5 منوهای زمینه ایجاد کنیم. از شما دعوت می کنیم تا با این روش آشنا شوید.

توسعه منوی زمینه

HTML5 ما را با 2 عنصر جدید معرفی کرد: منو و آیتم منو، و آنها به شما اجازه می دهند منوهای زمینه ایجاد کنید. برای اینکه مرورگر با عنصر منو به عنوان یک "منو زمینه" رفتار کند، باید نوع منو را روی متن تنظیم کنیم و همچنین یک شناسه منحصر به فرد به آن بدهیم.

در زیر مثالی وجود دارد که در آن یک منوی زمینه با این ویژگی ها ایجاد می کنیم.

ویرایش محتوا
انتخاب ایمیل

ما همچنین توانایی اضافه کردن زیر منوها را با انشعاب عنصر منو به شرح زیر داریم:

ویرایش محتوا
انتخاب ایمیل

فیس بوک
توییتر


حال، برای اینکه با کلیک روی دکمه سمت راست ماوس، منوی زمینه روی صفحه ظاهر شود، از یک ویژگی جدید HTML به نام contextmenu استفاده می کنیم. این ویژگی برای شناسایی منو با شناسه مشخص شده استفاده می شود. با توجه به مثال بالا، می توانیم منوی زمینه خود را با contextmenu=context-menu-id تعریف کنیم.

اگر بخواهیم از منوی زمینه در سرتاسر صفحه استفاده کنیم، می‌توانیم یک ویژگی روی تگ body تنظیم کنیم. همچنین می توانیم آن را به عنصر HTML اضافه کنیم تا این منومنحصراً در این عنصر استفاده می شود.

اکنون یک منوی زمینه جدید در داخل منو ظاهر می شود سیستم عامل، همانطور که در مثال زیر مشاهده می شود.

اضافه کردن یک نماد

ما مطمئن هستیم که بسیاری از شما منوهای زمینه ای را دیده اید که از نمادها استفاده می کنند. در برخی موارد، یک نماد می تواند کمک بصری خوبی برای کمک به کاربران برای یافتن منو باشد. علاوه بر این، به کاربران این امکان را می دهد که بفهمند منو برای چیست.

همچنین می‌توانیم با استفاده از ویژگی icon، یک نماد به منوی زمینه HTML5 اضافه کنیم:

ویرایش محتوا
انتخاب ایمیل

فیس بوک
توییتر


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

کارکرد منو

در این مرحله، منوی زمینه جدید ما روی کلیک کار نخواهد کرد. با این حال، ما به راحتی می توانیم آن را با کمی کد جاوا اسکریپت زنده کنیم. در مثال ما، منو انتخاب ایمیل نام دارد. این منو به کاربران امکان می دهد متن انتخاب شده را از طریق ایمیل ارسال کنند.

برای اینکه کار کند، اجازه دهید یک ویژگی اضافه کنیم که به کاربران امکان می دهد از کد هایلایت شده استفاده کنند.

تابع getSelectedText() (
var text = "";
if(window.getSelection) (
text = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Control") (
text = document.selection.createRange().text;
}
متن بازگشتی؛
};
سپس یک تابع دیگر ایجاد می کنیم، مثلا sendEmail() که کلاینت ایمیل را باز می کند. موضوع نامه متن وارد شده از سربرگ سند خواهد بود و متن نامه با متن انتخاب شده پر می شود.

تابع sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
در نهایت، این قابلیت را از طریق ویژگی onclick به منوی خود اضافه می کنیم.

انتخاب ایمیل
قبلاً در مورد نحوه استفاده از HTML5 EditableContent که به ما امکان می دهد محتوای وب را مستقیماً در صفحه ویرایش کنیم به شما گفته ایم. ما میتوانیم استفاده کنیم این تابع، آن را به منوی خود به نام "ویرایش محتوا" اضافه کنید.

در نتیجه

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

می‌توانید یک نسخه آزمایشی را در زیر مشاهده کنید (فقط در فایرفاکس کار می‌کند).

عملکرد همه دستگاه ها در صورت خرابی، خرابی، همیشه لازم نیست با متخصصان تماس بگیرید، گاهی اوقات هزینه خدمات آنها را با قیمت های نسبتاً بالا پرداخت می کنند. بسیاری از کاستی ها، خطاها را می توان به طور مستقل اصلاح کرد. این نوع خرابی ها، خطاها شامل زمانی است که دکمه سمت راست ماوس منوی زمینه را باز نمی کند. در چنین مواقعی چگونه باید عمل کرد؟

ابتدا باید دلیل عدم موفقیت عملیات، چرایی کار نکردن منوی زمینه را دریابید. منوی ویندوز 10. چندین دلیل ممکن برای این وجود دارد:

• درهم ریختگی رجیستری با فایل های منسوخ.
• عدم وجود برنامه های موجود در منوی زمینه، عملکرد ناپایدار آنها.

بیایید در نظر بگیریم که در این موارد چه باید کرد، چگونه می توان وضعیت را هنگامی که منوی زمینه کلیک راست باز نمی شود، تغییر داد.

اگر منوی زمینه کلیک راست به دلیل شلوغ شدن رجیستری با فایل های منسوخ ظاهر نشد، توصیه می کنیم از یک ابزار برای تمیز کردن استفاده کنید، به عنوان مثال، Glary Utilities. Glary Utilities مجموعه‌ای از اصلاح‌کننده‌های سیستم است، ابزارهایی که به محافظت از تنظیم دقیق، بهبود عملکرد رایانه شخصی. با استفاده از مجموعه، می توانید فایل های غیر ضروری را که سیستم را مسدود می کنند، ورودی های رجیستری که مدت ها قدیمی هستند، بهینه سازی RAM، مدیریت راه اندازی، بهینه سازی حافظه و سایر عملکردهایی که برای عملکرد خوب رایانه مفید هستند حذف کنید. Glary Utilities را می توان به صورت رایگان دانلود کرد.

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

رفع اشکال فریز

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

انجماد «بی‌صدا» معمولاً توسط یک برنامه ناپایدار، یک برنامه ثابت یا زمانی که پیوندی در منوی زمینه به منبعی ناموجود اشاره می‌کند، ایجاد می‌شود.

روش یک

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

1. لیستی را که برای برنامه هایی که قبلاً حذف کرده اید ظاهر می شود بررسی کنید.
2. اگر برنامه ای وجود دارد که در لیست حذف کرده اید، آن را از رجیستری حذف کنید. قبل از حذف هر کلید رجیستری، توصیه می کنیم یک نسخه پشتیبان از آن ایجاد کنید تا در صورت نیاز به بازیابی آن، ذخیره کنید.

روش دو

الگوریتم روش دوم، زمانی که منوی زمینه ویندوز 10 باز نمی شود، به صورت زیر خواهد بود.

1. ویرایشگر رجیستری را همانطور که در مراحل 1-2 روش قبلی توضیح داده شده است باز کنید.
2. کلید فرعی HKEY_CLASSES_ROOT را باز کنید،
3. در آن چندین زیربخش با نام هایی مانند "name_programm.exe"، "name_programm.dll" مشاهده خواهید کرد. هر کدام را به نوبه خود با کلیک کردن بر روی LMB تا زیر بخش "فرمان" بررسی کنید. تمام بخش های فرعی باید باز باشد. اگر باز نشد، در قسمت سمت راست پنجره، وجود پارامتر "NoOpenWith" را مشاهده کنید. چنین پارامتری وجود ندارد - آن را ایجاد کنید. برای چه مراحل را دنبال کنید:

1. پس از یافتن زیربخش "فرمان"، روی LMB کلیک کنید، وجود پارامتر "(پیش فرض)" را در سمت راست بررسی کنید. این پارامتر باید به یک برنامه کاربردی یا منبع شبکه ای که در رایانه وجود دارد اختصاص داده شود.

• اگر پارامتر به منبعی اشاره دارد که دیگر وجود ندارد، کل قسمتی که با نام این منبع یعنی برنامه شروع می شود باید حذف شود. فراموش نکنید که قبل از حذف یک نسخه پشتیبان برای بازیابی در صورت لزوم ایجاد کنید. با کلیک بر روی نام بخش با RMB، سپس روی "حذف" - "بله" کلیک کنید.

پس از انجام دو روش، منوی زمینه باید باز شود، هنگامی که RMB روی فایل کلیک می کند، رایانه از حالت انجماد خارج می شود.

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

وظیفه: برای گرفتن دکمه سمت راست ماوس در پنجره مرورگر کلیک کنید و منوی زمینه خود را نشان دهید.

وقتی در پنجره مرورگر کلیک راست می کنید چه اتفاقی می افتد؟ یک منوی زمینه ظاهر می شود، ظاهرو مجموعه عملکردهای آن به نوع مرورگر و مکانی که در آن کلیک کرده اید بستگی دارد.
اما اگر بخواهیم منوی زمینه مرورگر را مسدود کنیم و منوی خود را نشان دهیم، چه؟ شاید؟ آره. متأسفانه مرورگر متقابل نیست، اما کد زیر در Gecko، Safari و IE کار خواهد کرد. Opera به طور پیش فرض چنین ویژگی هایی را ارائه نمی دهد.

برای شروع، بیایید سه DIV بکشیم، که در 2 تای آنها منوی زمینه خود را نشان می دهیم، و در سومی مرورگر پیش فرض را ترک می کنیم.

"ارتفاع: 100 پیکسل؛ حاشیه: 1 پیکسل آبی ثابت؛ رنگ پس زمینه: #CCCCFF؛"> کلیک راست

"ارتفاع: 100 پیکسل؛ حاشیه: 1 پیکسل سبز ثابت؛ رنگ پس زمینه: #CCFFCC؛"> کلیک راست

"position:absolute; top:0; left:0; border:1px solid #666; background-color:#CCC; display:none; float:left;">

همانطور که می بینید، کلیک راست دکمه با استفاده از رویداد گرفته می شود منوی متنی. برای نوشتن کد تابع منو، اجزای زیر مورد نیاز است:
- قابلیت اضافه کردن کنترل کننده رویداد. برای پنهان کردن منوی زمینه خود هنگام کلیک کردن در قسمت‌های دیگر سند استفاده می‌شود.
– تابعی برای تعیین مختصات اشاره گر ماوس. برای تعیین موقعیتی که در آن منوی زمینه را نشان خواهیم داد استفاده می شود.
شما می توانید پنجره بازشو یک منوی استاندارد مرورگر را به سادگی با بازگرداندن false مسدود کنید.

اکنون کد:

// تابعی برای تعیین مختصات اشاره گر ماوس
تابع defPosition(رویداد) (
var x = y = 0 ;
if (document.attachEvent != null) (// اینترنت اکسپلورر& Opera
x = window.event .clientX + (document.documentElement .scrollLeft ? document.documentElement .scrollLeft: document.body .scrollLeft) ;
y = window.event .clientY + (document.documentElement .scrollTop ? document.documentElement .scrollTop : document.body .scrollTop ) ;
) else if (!document.attachEvent && document.addEventListener ) (// Gecko
x = event.clientX + window.scrollX ;
y = event.clientY + window.scrollY ;
) دیگر (
// هیچ کاری نکن
}
بازگشت (x:x، y:y) ;
}

منوی عملکرد (نوع، evt) (
// پنجره بازشو رویداد منوی زمینه را مسدود کنید
evt = evt || window.event ;
evt.cancelBubble = true;
// نمایش منوی زمینه سفارشی
var menu = document.getElementById("contextMenuId" );
varhtml = "" ;
سوئیچ (نوع) (
مورد 1) :
html= "منو برای اولین DIV";
html += "
اولین تابع";
html += "
تابع دوم";
html += "
عملکرد سوم";
زنگ تفريح ؛
مورد (2):
html= "منو برای DIV دوم";
html +="
(خالی)" ;
زنگ تفريح ؛
پیش فرض:
// هیچ چی
زنگ تفريح ؛
}
// اگر چیزی برای نشان دادن وجود دارد - نشان دهید
if(html)(
menu.innerHTML = html;
menu.style .top = defPosition(evt) .y + "px" ;
menu.style .left = defPosition(evt) .x + "px" ;
menu.style .display = "" ;
}
// پنجره بازشو منوی استاندارد مرورگر را مسدود کنید
بازگشت نادرست
}

// وقتی روی دکمه چپ یا راست سند کلیک می کنید، زمینه را ببندید
// عملکرد اضافه کردن کنترل کننده رویداد
تابع addHandler (شیء، رویداد، کنترل کننده، useCapture) (
if (object.addEventListener ) (
object.addEventListener (رویداد، کنترل کننده، useCapture ? useCapture: false ) ;
) else if (object.attachEvent ) (
object.attachEvent("روشن" + رویداد، کنترل کننده) ;
) هشدار دیگر ( "افزودن کنترل کننده پشتیبانی نمی شود") ;
}
addHandler(document, "contextmenu" , function () (

} ) ;
addHandler(سند، "کلیک"، تابع () (
document.getElementById ("contextMenuId" ) .style .display = "none" ;
} ) ;

در این آموزش، نگاهی به یک ویژگی HTML5 که به ندرت ذکر شده است، یعنی منوی زمینه خواهیم داشت. شاید تا به حال نام چنین منویی را نشنیده باشید، اما در برخی شرایط می تواند بسیار مفید باشد.

برای چه چیزی می توان از ویژگی contextmenu استفاده کرد؟ این به شما امکان می دهد گزینه های مختلفی را به منوی زمینه مرورگر با کلیک راست تنها با چند خط HTML اضافه کنید، حتی زمانی که جاوا اسکریپت غیرفعال است. اگر چه در حال حاضر این ابزار مفیدفقط در فایرفاکس موجود است.

هم اکنون به چگونگی کارکرد آن می پردازیم:

استفاده از منوی زمینه بسیار ساده تر از آن چیزی است که در نگاه اول به نظر می رسد. شما باید ویژگی contextmenu را اضافه کنید:

سپس منو را ایجاد می کنیم:

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

سپس آیتم های منو را اضافه می کنیم. ابتدا یک آیتم منو با متن و آیکون وارد می کنیم، سپس پیوندی برای پخش صفحه فعلی به فیس بوک اضافه می کنیم و در نهایت پیوندی برای رفرش صفحه وارد می کنیم. یک منوی زمینه با سه مورد ظاهر می شود:

همچنین می توانید زیر منوها را ایجاد کنید:

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

امروزه برنامه های کاربردی وب در حال تبدیل شدن به گام جدیدی در توسعه وب هستند. اینها از سایت های اطلاع رسانی معمولی دور هستند. Gmail و Dropbox نمونه هایی از برنامه های کاربردی وب پیشرفته هستند. با افزایش کارایی، دسترسی و سودمندی برنامه های کاربردی وب، نیاز به افزایش کارایی استفاده از آنها نیز بیشتر می شود. این راهنما به ایجاد یک چیز مفید به عنوان منوی زمینه خود نگاه می کند، و به ویژه:

1. بیایید بفهمیم که منوی زمینه چیست و چرا به آن نیاز است.
2. ما منوی زمینه خود را با استفاده از JS و CSS پیاده سازی می کنیم.
3. بیایید کاستی ها و محدودیت های رویکرد مورد استفاده را لمس کنیم تا بدانیم چه مشکلاتی می تواند هنگام استفاده از همه اینها در تولید به ما هشدار دهد.

منوی زمینه چیست؟

طبق ویکی پدیا، منوی زمینه منویی است که هنگام تعامل کاربر با آن ظاهر می شود رابط کاربری گرافیکی(با فشار دادن دکمه سمت راست ماوس). منوی زمینه شامل مجموعه محدودی از اقدامات ممکن است که معمولاً با شی انتخاب شده مرتبط است.

در رایانه شما، با کلیک راست روی دسکتاپ، یک منوی زمینه ظاهر می شود سیستم عامل. از اینجا، احتمالاً می توانید یک پوشه جدید ایجاد کنید، اطلاعاتی به دست آورید و کار دیگری انجام دهید. منوی زمینه در مرورگر به عنوان مثال به شما امکان می دهد اطلاعاتی در مورد صفحه دریافت کنید، کد منبع آن را مشاهده کنید، یک تصویر را ذخیره کنید، یک پیوند را در یک برگه جدید باز کنید، با کلیپ بورد کار کنید و غیره. علاوه بر این، مجموعه اقدامات موجود بستگی به این دارد که دقیقاً کجا کلیک کرده اید، یعنی روی زمینه. این رفتار استانداردی است که توسط توسعه دهندگان مرورگر [ و الحاقات به آن].

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

فهرست وظیفه یا لیست کار

بیایید تصور کنیم که در حال ایجاد برنامه ای هستیم که به ما امکان می دهد لیستی از وظایف را حفظ کنیم. می‌دانم که احتمالاً قبلاً از این همه فهرست کارها به‌طور باورنکردنی خسته شده‌اید، اما همین‌طور باشد. صفحه برنامه حاوی لیستی از وظایف معلق است. برای هر کار، یک مجموعه معمولی از اقدامات CRUD در دسترس است: اطلاعات مربوط به کار را دریافت کنید، یک کار جدید اضافه کنید، ویرایش کنید، حذف کنید.

از مترجم

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