Изменить контекстное меню opera
Недавно передо мной встала задача — реализовать в админке одного проекта контекстное меню по правому клику мыши. Для решения этой задачи нашел плагин для jQuery — contextMenu, демонстрация. Посмотрел пример, скачал, прикрутил и начал проверять. IE — нормально, FF — нормально, Safari — нормально, Opera — не работает!
И так, проблема:
Opera не позволяет создавать свое контекстное меню и отслеживать правый клик мыши.
Решение:
Как Вы знаете (или не знаете) в Опере есть настройки JavaScript (Инструменты — Настройки — Дополнительно — Содержимое — Настройки JavaScript), там есть свойство «Позволить контролировать правую кнопку мыши». Щелкнув на нее имеем результат — JS отлавливает событие правого клика и показывает контекстное меню, но поверх него выпадает стандартное меню. Немного погуглившись нашел решение своей проблемы:
- // Проверяем браузер, и если это Опера выполняем скрипт
- if (navigator.appName.indexOf( "Opera" )!=-1)
- // Инициализация скрипта
- ( function ()
- // Скрываем контекстное меню, когда нажата кнопка мыши
- addEventListener( 'mousedown' , function (e)
- // Если нажата правая кнопка мыши - меню не закрываем
- if ( e && e.button == 2 )
- cancelMenu(e);
- return false ;
- >
- >, true );
- var overrideButton;
- function cancelMenu(e)
- if (!overrideButton)
- var doc = e.target.ownerDocument;
- overrideButton = doc.createElement( 'input' );
- overrideButton.type= 'button' ;
- (doc.body||doc.documentElement).appendChild(overrideButton);
- >
- overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' +
- (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ;
- >
- >)( true , 1000 );
- >
Скрипт создает на странице кнопку, которая скрывает стандартное контекстно меню Оперы. Прикрутив этот скрипт к админке, получил следующее (смотреть в Опере). Теперь радуюсь и пользуюсь.
P.S. Во избежание лишних вопросов, скрипт используется только в админке и по этому посчиталось не страшным просить пользователя разрешить отслеживание клика правой кнопки мыши.
Браузер Opera состоит из пяти групп экранных элементов:
На панели меню для Mac доступны следующие элементы:
Панель вкладок позволяет переходить с одной страницы на другую при одновременном просмотре нескольких страниц. Нажмите на вкладку страницы, чтобы просмотреть ее содержимое. Чтобы открыть новую вкладку, нажмите кнопку + на панели вкладок.
С помощью кнопок навигации можно переходить на необходимые страницы браузера:
В области просмотра отображается содержимое страницы. Именно здесь вы взаимодействуете со страницей: читаете текст, просматриваете изображения, переходите по ссылкам и т.д.
Полноэкранный режим
Opera позволяет просматривать страницы в полноэкранном режиме. В полноэкранном режиме панель меню не видна, однако панель вкладок и объединенная адресная строка и строка поиска остаются на экране.
В любом из этих режимов пользователи Mac могут вызвать панель меню на экран, наведя курсор мыши на верхнюю границу экрана.
Для выхода из полноэкраннного режима на любой платформе нажмите Esc.
Фиксация вкладок
Фиксация вкладок позволяет Opera предотвратить случайное закрытие вкладок или выделить важные страницы. Зафиксированная вкладка не может быть закрыта. Чтобы закрепить вкладку на панели вкладок или открепить ее, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Pin Tab / Unpin Tab (Зафиксировать вкладку/Отменить фиксацию вкладки) . Зафиксированная вкладка перемещается в левую часть панели вкладок, откуда ее можно быстро открыть.
Controlling the result of a user clicking on the menu item
Once the user clicks on the menu item, we need it to do something. In our example, the function searchtext() is called onclick . The function looks like so:
The function handles an info object of type OnClickData — This is an object which stores a bunch of relevant information when a context menu item is clicked. In our case, it will contain information about the text we selected. We can get this by using info.selectionText . After that it is just a simple matter of appending that text to Google’s query URL as a query string, creating a new tab, and loading the URL you just assembled in the new tab.
You can download the context menu extension example described above and take a better look at the code.
Opera – один из самых функциональных современных браузеров. Неудивительно, что его функции надо организовать и сделать доступными. В интерфейсах это обычно делается через меню.
Но у браузера Опера есть как минимум три способа работать с ним, и все виды меню отличаются друг от друга.
Скрытое
В некоторые разделы, как мы уже знаем, можно попасть по клику из основных или нажатию клавиатурных комбинаций. Однако в Опере есть и скрытые разделы, которые, конечно, можно открыть, но только по специальным адресам или после специфических команд.
Так, Настройки можно серьёзно расширить, если поставить галочку напротив пункта «Дополнительные настройки». Это не откроет новых горизонтов или страниц, но вот существующие опции будут дополнены множеством новых вариантов.
Если дополнительные функции, которые вы активируете галочкой, уже проверены на стабильность, то на один уровень дальше вас ждут ещё не до конца проверенные возможности. Чтобы попасть туда, введите в адресной строке opera://flags.
Как видите, данное меню ещё даже не переведено на русский. В следующих поколениях Оперы те опции, которые будут востребованы и хорошо реализованы, попадут в основные настройки. Вот тогда они станут переведены и понятны.
На каждый конкретный момент на странице flags находятся опции, которые сейчас пребывают в статусе экспериментальных. Если вы пытливы и любознательны, обожаете пробовать новое и копаться в тонкостях – эта страница для вас.
Конечно, меню любого приложения легко освоить интуитивно. Тем не менее лучше разобраться сразу, какое именно для чего предназначено.
Я хочу реализовать пользовательское контекстное меню на сайте, над которым я работаю. Я использовал document.oncontextmenu, который работает со всеми, кроме Opera, основными браузерами, для которых я разрабатываю. Как бы я получил тот же результат в Опере? Мне нужно отключить контекстное меню по умолчанию и отобразить мое.
Первое, что я хотел бы сделать, это нажать правую кнопку мыши, так как document.body.onmousedown не распознается в Opera.
Это раздражает, но я слышал, что это идеология Opera. Они считают, что у пользователя всегда должен быть доступ к контекстному меню Opera. Если вы найдете способ отключить контекстное меню по умолчанию, я уверен, что многие из нас хотели бы знать!
Проведя небольшое исследование, я нашел интересный маленький кусочек в плагине контекстного меню jQuery.
*Opera 9.5 has an option to allow scripts to detect right-clicks, but it is disabled by default. Furthermore, Opera still doesn’t allow JavaScript to disable the browser’s default context menu which causes a usability conflict.
Нашел еще один интересный момент, который может привести вас в правильном направлении в группе Opera.linux google.
Opera doesn't support the javascript event oncontextmenu which these scripts use. Opera does support onrightclick , but as you see that is disabled by default. I've been told in the past by our developers that implementing support is not as trivial as making oncontextmenu an alias for onrightclick , the former apparently does a lot more.
. и этот фрагмент кода используется event.button для проверки правого клика.
Однако ни одно из этих решений не даст вам того, что вы хотите (на основе первого цитируемого сегмента) . Кажется, Opera считает, что щелчок правой кнопкой мыши на веб-страницах всегда должен давать пользователю «стандартное» контекстное меню.
Открытие закрытых вкладок и просмотр синхронизированных вкладок через меню вкладок
Если вы любите открывать сразу много вкладок, с помощью меню вкладок вам легче будет их упорядочивать, просматривать и открывать нужные.
Меню вкладок находится в правой части панели вкладок. Нажмите меню вкладок, чтобы увидеть список недавно закрытых вкладок и открыть вкладки со всех синхронизируемых устройств.
Взаимодействовать с меню вкладок можно с клавиатуры. Нажмите Ctrl + M, чтобы открыть или закрыть меню вкладок. Для перехода по списку вкладок нажимайте кнопки со стрелками. Нажмите Ввод, чтобы открыть вкладку из списка.
Чтобы пользоваться меню вкладок было еще удобнее, имеет смысл включить предпросмотр вкладок.
Основное
Итак, основной принцип такой: через главное меню мы работаем с браузером либо страницей в целом прямо сейчас.
Creating a context menu item
We can create a context menu item by calling the create() function. As an argument, this function takes an object that details which kind of context menu item we want to create.
Let’s for example create a context menu item that will only appear when a user right/ctrl-clicks some highlighted text; it will open a new tab, load Google in it, and perform a Google search for the selected text.
To set up the context menu, we would write something like this in the background.js script:
The object we are passing in as the argument of create() has three parts to it:
- First, title defines what text the context menu item will have when displayed. Note the presence of the %s : this will make sure the highlighted text is mentioned in the menu item. For example, if we have selected the text “Opera for Android”, in the context menu item, the context menu text will show up as “Look up: Opera for Android”.
- Next, the contexts line specifies what circumstances the menu item should appear in; we’re limiting this context menu item to only appear when selected text is right/ctrl-clicked. You could other types of context like image , video , page , link , editable (for form fields) and more. If you want your menu to appear in all contexts, use all .
- Last, we are defining what happens when the menu item is clicked, in the onclick line: When someone clicks on the menu item, the searchtext() function will be fired.
Контекстное меню
Контекстное меню появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на каком-либо элементе веб-страницы. Вид меню зависит от типа элемента (страница, текст, ссылка или картинка).
Контекстное меню страницы появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) в любом месте страницы, где нет никаких ссылок, картинок или текста. В этом меню предлагаются различные варианты навигации (вернуться назад, перейти вперед или перезагрузить страницу), а также варианты сохранения страницы на Экспресс-панели или в закладках, просмотра исходного кода страницы, сохранения страницы в формате PDF и т.д.
Контекстное меню ссылки появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) ссылку, и позволяет выбрать, как открыть или сохранить соответствующую страницу или адрес.
Контекстное меню изображения появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) какую-либо картинку, и предлагает варианты открытия, копирования или сохранения этой картинки.
Если вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) какое-либо изображение, с которым связана ссылка, в появившемся меню будут присутствовать пункты меню и для изображения, и для ссылки.
Загрузка и управление файлами
При этом справа от объединенной адресной строки и строки поиска появляется новый значок. Нажмите этот значок, чтобы просмотреть перечень недавно загруженных файлов или удалить их из истории загрузок.
Чтобы посмотреть подробный список загруженных файлов, запустить файлы из браузера или заново начать загрузку в случае обрыва соединения, выберите View (Вид) > Downloads (Загрузки) на Mac. В Windows и Linux перейдите в меню O > Downloads (Загрузки) .
Местоположение, где по умолчанию сохраняются загруженные файлы, можно изменить в настройках. Для этого выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе Downloads (Загрузки) нажмите кнопку Change… (Изменить…) .
- Выберите папку, в которой должны сохраняться загруженные файлы, и нажмите Select (Выбрать) .
Кроме того, в этом меню можно настроить браузер таким образом, чтобы он всегда спрашивал, куда необходимо сохранить загружаемые файлы.
This article describes how to use the chrome.contextmenus.* methods and events to manipulate the browser’s context menu.
Вкладки
Opera может организовать несколько страниц в одном окне с помощью вкладок, которые напоминают ярлыки папок для бумаг. Вкладки позволяют работать одновременно с несколькими страницами, не закрывая страницу, пока она нужна.
Чтобы открыть новую вкладку, нажмите кнопку + на панели вкладок.
Щелкните правой кнопкой мыши на вкладку, чтобы открыть ее контекстное меню. В этом меню доступны следующее действия для вкладки:
- Создать вкладку
- Обновить
- Обновить все вкладки
- Копировать адрес страницы
- Дублировать вкладку
- Зафиксировать вкладку
- Переместить вкладку в пространство
- Выключить звук на вкладке
- Выключить звук на остальных вкладках
- Закрыть вкладку
- Закрыть другие вкладки
- Закрыть вкладки справа
- Закрыть вкладки справа
- Закрыть повторяющиеся вкладки
- Сохранить все вкладки как папку на Экспресс-панели
- Открыть последнюю закрытую вкладку
Закрытие вкладок
Чтобы закрыть вкладку, наведите на нее указатель мыши и нажмите кнопку x. Чтобы закрыть все вкладки, кроме текущей, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по текущей вкладке и выберите Close Other Tabs (Закрыть остальные вкладки) . Кроме того, можно закрыть все вкладки справа от текущей вкладки, нажав Close Tabs to the Right (Закрыть вкладки справа).
Если вы закрыли вкладку случайно или хотите открыть недавно закрытую вкладку, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Reopen Last Other Tabs (Открыть последнюю закрытую вкладку).
Управление вкладками
Если вы хотите, чтобы открытая вкладка отображалась в отдельном окне, просто перетащите вкладку с панели вкладок. Вкладки также можно перетаскивать между открытыми окнами.
Если вы хотите открыть копию страницы в новой вкладке, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Duplicate Tab (Дублировать вкладку) .
Если вы работаете с большим количеством открытых вкладок, иногда они могут дублироваться. Наведите указатель мыши на одну из вкладок, и браузер Opera выделит повторяющиеся вкладки. Чтобы закрыть все повторяющиеся вкладки, щелкните правой кнопкой мыши одну из вкладок и выберите Закрыть повторяющиеся вкладки.
Все вкладки, открытые в окне, можно сохранить в качестве папки Экспресс-панели. Удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на панели вкладок и выберите Save Tabs as Speed Dial Folder (Сохранить вкладки группой на Экспресс-панели) . Внизу Экспресс-панели появится новая папка без названия.
Боковая панель
Боковая панель Opera – это быстрый доступ к пространствам, мессенджерам, закладкам, мой Flow, персональным новостям, вкладкам, истории, расширениям, загрузкам и настройкам.
Боковая панель может быть закреплена и видна на каждой странице браузера, или вы можете скрыть ее для удобства при просмотре других страниц. Сделать это можно через Easy Setup (Простые настройки).
Перемещение по вкладкам
Функция перемещения по вкладкам – это всплывающее окно с предварительным просмотром вкладок, которое позволяет переключаться между миниатюрами открытых вкладок. Нажмите и удерживайте нажатой клавишу Ctrl, а затем нажмите клавишу «Tab», чтобы вызвать функцию. Нажмите на нужную вкладку или отпустите Ctrl, чтобы переключиться на выделенную в данный момент вкладку.
Перемещение вкладок между пространствами
Рабочие области доступны в верхней части боковой панели и позволяют организовывать вкладки в разные группы. Например, у вас могут быть разные рабочие пространства для покупок, работы или учебы.
Чтобы переместить вкладку в другое пространство, щелкните левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на вкладку и выберите «Переместить вкладку в пространство», затем выберите нужную рабочую область во всплывающем окне.
Управление боковой панелью Opera
Чтобы настроить боковую панель, щелкните значок с тремя точками внизу боковой панели. Откроется панель настроек боковой панели, позволяющая редактировать или удалять элементы на боковой панели, такие как пространства, мессенджеры, историю, расширения, а также другие функции и инструменты.
Для доступа к настройкам боковой панели перейдите в меню Settings (Настройки) (Preferences (Настройки) на Mac) > Basic (Основные) > Sidebar (Боковая панель).
Предпросмотр содержимого вкладки
Чтобы просмотреть содержимое вкладки, не уходя с текущей страницы, можно навести указатель мыши на вкладку. Предпросмотр вкладок особенно удобен, если открыто много страниц. Включить предпросмотр вкладок можно в настройках Opera. Чтобы включить или выключить предпросмотр вкладок, выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе User interface (Интерфейс пользователя) установите флажок Show tab previews (Показывать миниатюры вкладок при наведении).
Declare it in the manifest
The first thing to do when working with the context menu is add the necessary permissions in the extension manifest file. We’ll use the contextMenus keyword in the permissions key to declare our intention to use it.
It is also recommended to have a 16x16 icon next to the context menu item, which is also defined in the manifest.
The manifest would look like so:
Поиск текста на странице
Opera может искать ключевые слова в тексте на странице. Чтобы найти слово или фразу на странице, нажмите клавиши Ctrl + F или ⌘ + F на клавиатуре. Введите текст в поле поиска.
В процессе поиска найденные слова выделяются зеленым цветом. Если слово встречается на странице неоднократно, найденные слова выделяются желтым цветом и в поле поиска указывается их количество. Для перехода от одного найденного слова к другому используйте правую или левую стрелку.
Изменение масштаба
Функция изменения масштаба в Opera позволяет упростить чтение мелкого шрифта. Чтобы изменить масштаб в Mac, выберите View (Вид) > Zoom In (Увеличить) / Zoom Out (Уменьшить) . Пользователям Windows или Linux следует перейти в меню O > Zoom (Масштаб). Таким образом вы установите масштаб только для страницы на которой актуально находитесь.
Для увеличения и уменьшения также можно использовать сочетания клавиш Ctrl или ⌘ + + / - .
Чтобы все просматриваемые страницы открывались в нужном масштабе, можно задать масштаб по умолчанию. Чтобы задать масштаб по умолчанию, выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Basic (Основные) на боковой панели.
- В разделе Appearance (Оформление) вы найдете Page zoom (Масштаб страницы).
- Выберите, в каком масштабе вам хотелось бы просматривать страницы.
После установки масштаба страницы все открываемые вами страницы будут отображаться в заданном масштабе. Если у вас были открыты какие-либо вкладки, перезагрузите их, чтобы просмотреть страницы в только что заданном масштабе по умолчанию.
Если нужно вернуться к первоначальному формату, пользователям Mac следует нажать View (Вид) > Actual Size (Фактический размер). Пользователям Windows и Linux следует перейти в меню O > Zoom (Масштаб) и выбрать Reset zoom (Сброс масштабирования) справа от +.
Виды меню в браузере Opera
В браузере Опера меню можно разделить на три вида: основное, контекстное и скрытое. Первое отвечает за общую работу с браузером, его окнами и открытыми страницами. Через второе удобно работать с его элементами – ссылками, картинками, мультимедийным контентом и так далее. Третье предназначено для тонкой настройки работы программы.
Разумеется, и доступ на эти три уровня реализован по-разному, хотя и открыт для всех пользователей.
Контекстное
Для появления контекстного меню, как и в других программах, в Опере нужно кликнуть правой кнопкой мыши по некоторому объекту. Это может быть гиперссылка, картинка, мультимедийный элемент, выделенный фрагмент текста и так далее.
Контекстное меню часто интегрируется с расширениями. Так, на иллюстрации вы видите в списке опций строку «Translate» — она отправит ссылку в переводчик Ddict через установленное в браузере расширение Ddict.
How do we customize the context menu?
There are a number of steps for us to take if we want to create an extension that customizes the context menu in some way. Let’s go through these steps now.
What is the context menu?
Usually, when you right-click (or Ctrl -click on Mac) on something in a web page inside your browser, a menu pops up: This is called the context menu. You can usually bring this up using various keyboard shortcuts too, depending on the exact platform you are using. Using the Context Menu API we can add and manipulate items in this menu and have it perform actions. We can even restrict it to certain types of media. So for example, we can specify that a context menu item should appear only if a user right-clicks on an image, rather than a video or some other media type.
Читайте также: