З амечалі ви, що клацання правою кнопкою миші по картинкам на деяких сайтах ні до чого не приводять. Здається, ніби кнопка клацає вхолосту, а браузеру немає до неї ніякого діла - «завис і думає». Насправді ж браузер просто блокує кліки, отримавши таку команду з JavaScript-сценарію завантаженої сторінки.
Як же розблокувати праву кнопку, Щоб клікнувши по картинці, зберегти її для перегляду в офф-лайні? У більшості інтернет-оглядачів для цього достатньо «покопатися» в розширених налаштуваннях JavaScript.. Отже ...
Якщо у вас " Opera»:
1. Перейдіть по шляху «Інструменти» -> «Налаштування»;
2. У віконці зупиніться на пункті «Вміст» і відшукайте кнопку «Налаштувати JavaScript» (см.ріс.1).
3. Клікнувши по ній, викличте віконце детальних налаштувань JavaScript і приберіть галочку навпроти рядка «Блокувати праву кнопку».
Після підтвердження (натискання на «Ok») ця кнопка стане «вільної» для викликів контекстного меню. До речі в « FireFox»Для розблокування правої кнопки потрібно зняти галочку саме біля такого пункту (див. Рис.2).
В інших же просунутих браузерах блокування правої кнопки знімається аналогічно - через ті ж розширені настройки JavaScript.
Завдання: відловити натискання правої кнопки миші у вікні браузера і показати власне контекстне меню.
Що відбувається при натисканні правої кнопки миші у вікні браузера? З'явиться контекстне меню, зовнішній вигляді набір функцій якого буде залежати від типу браузера і того місця, куди ви кликнули.
А що, якщо ми захотіли заблокувати браузерні контекстне меню і показати власне? Можливо? Так. На жаль, не кросбраузерності, але код наведений нижче буде працювати в Gecko, Safari і IE. Opera таких можливостей за замовчуванням не надає.
Для початку прорісуем три DIV-а, в 2-х з яких покажемо власне контекстне меню, а в третьому залишимо дефолтний браузерні.
Як бачите, вилов натискання правої кнопки відбувається за допомогою події oncontextmenu. Для написання коду функції menu необхідні наступні складові:
- Функція для додавання обробників подій. Використовується для приховування власного контекстного меню при співах в інших частинах документа.
- Функція для визначення координат покажчика миші. Використовується для визначення положення, в якому ми покажемо контекстне меню.
Блокувати спливання стандартного браузерного меню можна елементарно повертаючи false.
Тепер код:
// Функція для визначення координат покажчика миші
function defPosition (event) (
var x = y = 0;
if (document.attachEvent! = null) (// Internet Explorer& 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;
) Else (
// Do nothing
}
return (x: x, y: y);
}
function menu (type, evt) (
// Блокуємо спливання події contextmenu
evt = evt || window.event;
evt.cancelBubble = true;
// Показуємо власне контекстне меню
var menu = document.getElementById ( "contextMenuId");
var html = "";
switch (type) (
case (1):
html = "Меню для першого диван";
html + = "
Перша функція ";
html + = "
Друга функція ";
html + = "
Третя функція ";
break;
case (2):
html = "Меню для другого диван";
html + = "
(Порожньо)"
;
break;
default:
// Nothing
break;
}
// Якщо є що показати - показуємо
if (html) (
menu.innerHTML = html;
menu.style .top = defPosition (evt) .y + "px";
menu.style .left = defPosition (evt) .x + "px";
menu.style .display = "";
}
// Блокуємо спливання стандартного браузерного меню
return false;
}
// Закриваємо контекстне при кліці лівою або правою кнопкою по документу
// Функція для додавання обробників подій
function addHandler (object, event, handler, useCapture) (
if (object.addEventListener) (
object.addEventListener (event, handler, useCapture? useCapture: false);
) Else if (object.attachEvent) (
object.attachEvent ( "on" + event, handler);
) Else alert ( "Add handler is not supported")
;
}
addHandler (document, "contextmenu", function () (
}
)
;
addHandler (document, "click", function () (
document.getElementById ( "contextMenuId") .style .display = "none";
}
)
;
Контекстне меню - це меню, яке з'являється при натисканні правою кнопкою миші по екрану. Зазвичай такі меню використовуються для спрощення виконання обраних дій, на зразок сортування папок і файлів, відкривання нового вікна програми або доступу до налаштувань системи.
Багато років термін «контекстне меню» відноситься в першу чергу до нативним додатків. Однак тепер у нас є можливість отримати від нього переваги і в веб-додатках. Як приклад можна привести менеджер файлів в Gmil. Це меню реалізовано за допомогою коду javascript:
В майбутньому у нас буде можливість створювати контекстні меню для сайтів, заснованих на HTML5. Пропонуємо вам познайомитися з цим підходом.
Розробка контекстного меню
HTML5 представив нам 2 нові елементи: menu і menuitem, і вони дозволяють вам створювати контекстні меню. Для того щоб браузер розцінював елемент menu як «контекстне меню», нам потрібно встановити тип меню як context, а також задати йому унікальний ID.
Нижче представлений приклад, в якому ми створюємо контекстне меню з цими властивостями.
У нас також залишається можливість додавати підміню, розгалужена елемент menu наступним чином:
Тепер, для того, щоб контекстне меню з'явилося на екрані при натисканні правою кнопкою миші, ми використовуємо новий HTML-атрибут під назвою contextmenu. Цей атрибут використовується для того, щоб визначати меню з зазначеним ID. З огляду на наш вищенаведений приклад, ми можемо визначити наше контекстне меню за допомогою contextmenu = contextmenu-id.
Ми можемо поставити атрибут в тезі body, якщо хочемо використовувати контекстне меню на всій сторінці. Ми також можемо додати його в HTML-елемент, щоб дане меню використовувалося виключно всередині даного елемента.
Тепер нове контекстне меню з'явиться всередині меню Operating System, як видно на прикладі нижче.
додаємо іконку
Впевнені, що багато хто з вас бачили контекстні меню, в яких використовуються іконки. У деяких випадках іконка може стати відмінним візуально допоміжним елементом, який допомагає користувачам знайти меню. До того ж він також дає користувачам можливість зрозуміти, для чого призначений даний меню.
Ми також можемо додати іконку в наше контекстне меню на HTML5 за допомогою атрибута icon:
Ось що ми побачимо у вікні браузера.
Змушуємо меню працювати
На даному етапі наше нове контекстне меню не буде працювати при натисканні. Однак ми можемо дуже просто привести його до тями за допомогою невеликого коду javascript. У нашому прикладі меню називається Email Selection. Це меню дозволяє користувачам відправляти виділений текст по електронній пошті.
Щоб воно запрацювало, давайте додамо функцію, яка дозволить користувачам використовувати виділений код.
Function getSelectedText () (
var text = "";
if (window.getSelection) (
text = window.getSelection (). toString ();
) Else if (document.selection && document.selection.type! = "Control") (
text = document.selection.createRange (). text;
}
return text;
};
Потім ми створюємо ще одну функцію, припустимо sendEmail (), яка відкриває email-клієнт. Темою листа буде введений текст з заголовка документа, а тіло листа буде заповнено виділеним текстом.
Function sendEmail () (
var bodyText = getSelectedText ();
window.location.href = "mailto:? subject =" + document.title + "& body =" + bodyText + "";
};
Нарешті, ми додаємо цю функцію в наше меню за допомогою атрибута onclick.
Раніше ми вже розповідали вам про те, як використовувати HTML5 EditableContent, який дозволяє нам редагувати веб-контент прямо на сторінці. Ми можемо використовувати цю функцію, додавши її в наше меню під назвою "Edit Content".
На завершення
Особисто ми дуже зраділи цій новій функції. Ми бачимо в ній безліч можливостей. На жаль, на момент написання даного матеріалу, тільки Firefox підтримував цю властивість. Сподіваємося, що і інші браузери скоро до нього підключаться.
Нижче ви можете переглянути демо (працює тільки в Firefox).
Веб-додатки на сьогоднішній день стають новим кроком на шляху розвитку інтернету. Це вже далеко не звичайні інформаційні сайти. Як приклад передових веб-додатків можна привести Gmail і Dropbox. З ростом функціональності, доступності та корисності веб-додатків зростає і потреба в збільшенні ефективності їх використання. У цьому посібнику буде розглянуто створення такої корисної штуки, як власне контекстне меню, і зокрема:
- Розберемося, що таке контекстне меню і навіщо воно потрібне.
- Реалізуємо своє контекстне меню, використовуючи JS і CSS.
- Торкнемося недоліки і обмеження використовуваного підходу, щоб знати, які проблеми можуть нас застерігати при викочуванні всього цього в продакшн.
Що є контекстне меню?
Якщо вірити Вікіпедії, контекстне меню - меню, що з'являється при взаємодії користувача з графічним інтерфейсом (при натисканні правої кнопки миші). Контекстне меню містить обмежений набір можливих дій, який зазвичай пов'язані з обраним об'єктом.На вашому комп'ютері клік правою кнопкою миші на робочому столі викличе контекстне меню операційної системи. Звідси ви, ймовірно, можете створити нову папку, Отримати якусь інформацію і зробити що-небудь ще. Контекстне меню в браузері дозволяє, наприклад, отримати інформацію про сторінку, подивитися її вихідні коди, зберегти зображення, відкрити посилання в новій вкладці, попрацювати з буфером обміну і всяке таке. причому набір доступних дійзалежить від того, куди саме ви кликнули, тобто від контексту. Це стандартна поведінка, закладається розробниками браузера [ І розширень до нього].
Веб-додатки поступово починають замінювати стандартні контекстні меню своїми власними. Відмінними прикладами є все ті ж Gmail і Dropbox. Питання лише в тому, як зробити своє контекстне меню? У браузері при натисканні правою кнопкою миші спрацьовує подія contextmenu. Нам доведеться скасувати поведінка за умовчанням і зробити так, щоб замість стандартного меню виводилося наше власне. Це не так вже й складно, але розбиратися будемо крок за кроком, так що вийде досить об'ємно. Для початку створимо базову структуру програми, щоб розроблюваний приклад не був зовсім вже відірваний від реальності.
Список задач
Уявімо, що ми створюємо додаток, що дозволяє вести список завдань. Я розумію, ви вже напевно неймовірно втомилися від усіх цих списків завдань, але нехай буде. Сторінка додатки містить список незавершених завдань. Для кожного завдання доступний типовий набір дій CRUD: отримати інформацію про завдання, додати нову, редагувати, видалити.від перекладача
Переклад місцями досить вільний, але не в збиток сенсу або змістом. Все, що не відноситься безпосередньо до оригіналу, винесено в примітки.
З пропозиціями, побажаннями та зауваженнями, як зазвичай, в ЛС.
В даному уроці ми розглянемо рідко згадувану фішку HTML5 - contextmenu. Може бути, ви ніколи раніше не чули про таке меню, але в деяких ситуаціях воно може виявитися надзвичайно корисним.
Для чого може бути призначений атрибут contextmenu? Він дозволяє додавати різні опції в контекстне меню браузера, яке виводиться після натискання правої кнопки миші, за допомогою всього лише кількох рядків коду HTML навіть тоді, коли Javascript відключений. Хоча на поточний момент такий зручний інструмент доступний тільки в Firefox.
Ось як він працює:
Використовувати contextmenu набагато простіше, ніж може здатися на перший погляд. Потрібно додати атрибут contextmenu:
Потім створюємо меню:
Атрибут id повинен відповідати атрибуту contextmenu. Таким чином, можливо використовувати різні контекстні меню для різних частин сторінки.
Потім додаємо пункти меню. Спочатку вставляємо пункт меню з текстом і іконкою, потім додаємо посилання для трансляції тче сторінки в Facebook, а в фіналі вставляємо посилання для оновлення сторінки. Виходить контекстне меню з трьома пунктами:
Також можна створювати підміню:
Дуже цікаве і корисне властивість HTML5. Але, його застосування обмежується тільки браузером Firefox.
