Доброго часу доби, допитливі передплатники та гості блогу. Сьогодні ми розберемо з вами корисний розділ у прототипно орієнтованій сценарній мові, а саме подію при наведенні миші JavaScript.
Я хочу, щоб ви добре розібралися в таких подіях, як click, mouseup, mousedown, mouseover та інших, зрозуміли різницю між ними і навчилися їх використовувати для вирішення поставлених завдань. Звичайно ж після кожного ключового теоретичного матеріалуВи зможете знайти програмну реалізацію прикладів. Ну що ж, приступимо!
Всі відомості про події мишки
Для миші існує кілька подій, які повністю охоплюють різні дії курсору на сторінці . Серед них є ті, які спрацьовують при натисканні на об'єкт, наведенні на нього або русі покажчика по відкритому вікну. Їх можна поділити на дві групи: прості і комплексні (складові) події.
Почнемо з простого
Спочатку познайомимося з простими подіями. Їх лише п'ять. Для зручності я помістив опис кожного інструмента в таблицю, прикріплену нижче.
| Найменування | Опис |
| mousedown | Названий event викликається, коли одна з кнопок мишки натиснута, але поки що не відпущена. |
| mouseup | А це спрацьовує вже при відпусканні затиснутої раніше кнопочки. |
| mouseover | Викликається при наведенні курсору на об'єкт, що обробляється. |
| mouseout | Обробляє дію виходу курсору в області елемента. |
| mousemove | Будь-який рух покажчика над певною областю викликає поточну подію. |
А тепер для закріплення матеріалу розберемо приклад. Я створив невелику програму, в якій змінюються емоції смайлу при наведенні та відведенні курсору.
Наведіть на зображення курсор миші, і воно зміниться.
А тепер відведіть його убік та поспостерігайте за змінами
Настав час угруповання
Тепер перейдемо до комплексних видів. Кожна з таких подій включає кілька простих. При цьому всі складові комплексної події не спрацьовують одночасно, а вишиковуються в чергу. Тому ви іноді могли спостерігати таку ситуацію, що при швидкому клацанні, наприклад, пунктів меню веб-сайту натискання іноді не спрацьовують.
Чому так? Відповідь досить проста.
Отже, нижче наведено складові події.Обробка подій відбувається з якоюсь максимально допустимою швидкістю. І при цьому не варто забувати, що події обробляються по черзі. А отже, при надто швидкому натисканні на різні елементи ланцюжок обробки може не виконатися повністю.
Як ви вже зрозуміли, комплексні події дещо спрощують життя розробників, включаючи відразу набір необхідних простих event-ів. Внаслідок цього на сьогоднішній день ніхто не може уявити звичайну обробку кнопок або інших елементів без того ж click.
Для практичного ознайомлення з функціонуванням вище перерахованих подій я модифікував попередній додаток. Проаналізуйте результати моєї роботи.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
Як бачите, все дуже просто. Дані елементи легко викликати у коді та прив'язувати їх до певних дій.
Усі банально просто. Ми маємо дві області.
- Перша виконує функцію старту сценарію. На моєму блозі ця область містить нік автора і тему посту, в якій даний автор залишив коментар. Назвемо її стартовою областю
- Друга область є тією самою підказкою, яка з'явиться в результаті роботи скрипта. Ця область буде видно тільки в тому випадку, якщо курсор миші знаходиться в межах стартової області, і зникатиме в момент відходу курсору за кордон стартової області.
Суть скрипта проста, визначити положення курсору користувача ( положенням курсора є відступи, по top і left, від краю браузера в пікселях) та присвоєння цього положення для області підказки. Область підказка природно має бути абсолютно позиціонованим об'єктом.
Все досить логічно, чи не так? Залишилося дізнатися, яким способом визначити положення курсору миші. Ну не те що дізнатися, а використовувати те, що нам пропонує jquery, а саме pageXі pageY.
event.pageX, event.pageY- Містить горизонтальну/вертикальну координату події від миші щодо початку координат document, а саме від лівого краю сторінки.
Реалізуємо спливаючу підказку на jquery
Вивішу вам повний кодсторінки. Скрипт має коментар, так що розібратися в ньому не важко.
Зауважте, що файл jquery підключений посиланням на офіційний сайт, тобто я його не скачував.
Висновок
Загалом на цьому все, нічого в коді складного немає, так що юзайте на здоров'я ( якщо подібний скрипт Вам звичайно знадобиться =))
Всього вам найкращого! У мене сьогодні все!
PS: Знаєте що таке нейро - лінгвістичне програмування? Простими словамице маніпуляція свідомістю людини з допомогою промови. Задоволена корисна "річ" якщо Ви збираєтеся працювати у сфері ЗМІ, чи реклами. Докладніше про НЛП Ви можете почитати на сайті http://enlp.info/. Успіхів Вам у Вашому навчанні =)
Tooltip (тултип) - підказка на html + javascript\jQuery
Стаття з розділу "Навіщо плагіни, бібліотеки - зроби сам". На цей раз розглянемо реалізацію дуже цікавого інструменту, який дуже корисний у будь-яких інтерфейсах, де важливо виводити підказки, нагадування для відвідувачів сайту.
Насправді реалізація тултипів дуже проста і не вимагає втручання будь-яких зовнішніх плагінів, все набагато простіше. Елемент, до якого потрібно виводити tooltip, необхідно відзначити селектором та атрибутом, в якому буде знаходитись текст підказки або навіть html. При наведенні на елемент текст підказки буде розміщено у блоці тултипу. Сам блок за допомогою javascript/jQuery розміщуємо поблизу вихідного елементу. Залишається тільки стилізувати інструмент.
Отже, приступимо:
Розміщуємо html з наступним змістом:
Супермен
Людина павук
Залізна людина
Халк
Стилізуємо елементи та спливаючий тултип:
.tool-item( /* елементи */ border-bottom: 1px dashed black; display button: inline-block; margin-right: 20px; cursor: pointer; ) .tooltip-block( /* тултип */ position: absolute; background: white; border: 1px solid rgb(230, 230, 230); padding: 5px 8px; font-size: 10px; width: 140px; -index: 400; display button:none;
Javascript/jQuery:
Приклад скрипта, який розміщує інструмент tooltip праворуч від елемента наведення:
Можна фантазувати над стилізацією тултіпа: додати куточок, надати тінь, ефекти відкриття блоку тощо. Наприклад, на нашому сайті ви можете побачити тултип на лівій панелі, робота заснована на тій самій ідеї, яку ми розглянули у цій статті.
Підказка, що спливає, являє собою коротке текстове повідомлення з поясненням, що виникають в результаті наведення курсору мишки на елемент сторінки. Далі розглянемо як зробити підказку в html.
Стандартний спосіб
За показ підказки відповідає (title). Цей атрибут можна використовувати для показу підказки до різних об'єктів, але найчастіше його використовують як пояснювальний текст до зображень.
Для показу підказки потрібно тільки додати це атрибут і написати в ньому необхідний пояснювальний текст.
Як підказка може використовуватися як одне слово або словосполучення, так і кілька пропозицій. Зазвичай спливаюча html підказка виглядає так:
Пояснюючий текст з'являється не відразу після наведення мишки на зображення, а за кілька секунд. Така особливість підказок закладена за умовчанням.
Стандартна спливаюча HTML підказка при наведенні на текст має один істотний недолік - відсутність інструментів для стилізації. Щоб вирішити цю проблему, необхідно використовувати інші способи створення підказки.
Спосіб на чистому css
Для прекрасного висновку підказки зазвичай вживається конкретно цей метод. Він передбачає укладання картинки у контейнер із ідентифікатором. Завдяки цьому забезпечується можливість звернення до цього контейнера в стилях:
У наведеному вище прикладі єдиним незрозумілим моментом може бути. Цей атрибут не виконує жодної функції. Однак його значення використовується в js та css. Таким чином, і цей атрибут може бути корисним. Але спочатку потрібно описати стилі блок-контейнера.
Відносне позиціонування використовується через те, що контейнер з підказкою буде позиціонуватися абсолютно. Тому потрібно зробити так, щоб текст позиціонувався лише щодо батьківського блоку, а не всієї сторінки.
#pdskzk( position: relative; display: inline-block; )
Блоково-рядкове відображення не завадить батьківському блоку (у тому числі й контейнеру з підказкою) розтягтися на всю ширину вікна. Тепер залишилося створити пояснювальний текст.
Спливаючі підказки в css простішевсього робити за допомогою псевдоелементів:
#pdskzk:hover:after (content: attr(data-name); position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%;
Незважаючи на велику кількість коду, він дуже простий для розуміння. Селектор #pdskzk:hover:after необхідний створення псевдоелемента after тоді, коли користувач ставить курсор на контейнер із зображенням. Властивість content: attr(data-name) призначений для вказівки текстового значення. Воно відповідає властивості, яка записана в атрибуті data-name у контейнера-обгортки зображення.
Після цього залишається позиціонувати об'єкт абсолютно та задати йому необхідні параметри:
- Колір;
- Шрифт і т.д.
Таким чином, виходить така підказка css при наведенні на картинку:
У порівнянні зі стандартною підказкою, цей варіант тексту, що пояснює, при наведенні на зображення виглядає більш цікаво і привабливо. До того ж підказка виникає відразу при наведенні курсору елемент. При цьому плавна поява підказки неможлива через те, що псевдоелементи не підтримують такий функціонал.
Плавна поява
Тим не менш, можливості CSS дозволяють використовувати плавну появу підказки. І тут не використовуються псевдоелементи. Це пов'язано з тим, що вони не дозволяють застосувати опцію плавного появи. Приклад реалізації плавної появи підказки на css представлений нижче:
Варто зауважити, що CSS-код практично не змінився:
#pdskzk2( position: relative; display: inline-block; ) #pdskzk2 .text ( transition: all 0.6s; opacity: 0; position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,. 55); color: #fff;text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; transform: scale(0); ) #pdskzk2:hover .text ( opacity: 1; )
Ключова зміна стосується властивості content, яка не використовується у цьому прикладі. Воно втратило актуальність через те, що підтримується лише псевдоелементами. Ще одна зміна – поява якості transition. Саме ця властивість відповідає за створення плавних переходів. Уважний читач, напевно, звернув увагу на значення opacity: 0. Воно робить контейнер з підказкою прозорим.
Тепер при наведенні на батьківський блок достатньо повернути стандартну прозорість контейнеру із підказкою. Після цього можна перевірити роботу коду і переконатися в тому, що текст, що пояснює, виникає на екрані плавно.
CSS3 дозволяє приховати елемент та іншими способами. Наприклад, може використовуватись трансформація. Цей метод передбачає заміну повної прозорості властивістю transform: scale(0). Також необхідно зменшити розмір контейнера до 0. Таким чином його не буде видно на сторінці. При наведенні на контейнер із зображенням необхідно вказати властивість transform: scale(1). Цей спосіб дозволяє зробити появу спливаючого текстового повідомлення як плавним, а й ефектним.
Інші способи
Спливаючі текстові повідомленняможна створювати і за допомогою jQuery. Ця бібліотека може використовуватися як для написання свого коду, так і для створення плагіна для підказок на jQuery, що реалізує необхідний ефект.
Нині у світлі віянь WEB 2.0 стало модним додавати на сайти усілякі "фішки". Реалізуються вони, як правило, за допомогою JavaScript бібліотек. І попросила моя программерська душа створити чогось такого вебдванольного на JavaScript, але без використання якоїсь бібліотеки, чистою, так би мовити мовою. І ось у процесі мого навчання цій дивовижній мові народив я на світ такий скрипт: показує він підказки в хмаринці, при наведенні на той чи інший елемент. Аналог JQuery tooltip чи tip – не пам'ятаю точно.
Скрипт реалізований автономним модулем, крім свого імені не додає до глобальної області жодних інших змінних, непогано стискається компресором і судячи з тестів sIEve - пам'ять через нього в IE6 не втече.
Інструкція:Потрібно просто викликати функцію підказки як конструктор, передавши їй такі параметри:
- Обов'язковий. Глобальний контекст або браузер посилання на об'єкт window.
- Обов'язковий. NodeList елементів (наприклад, getElementsByTagName("DIV")), або посилання на елемент, на якому потрібно виводити підказку (наприклад getElementById("tip-div")).
- Необов'язковий. Об'єкт із налаштуваннями стилів на кшталт того:
(background: "yellow", border: "solid 1px green") - Необов'язковий. Об'єкт з налаштуваннями зміщення хмари по осі X і Y типу:
( x: 20, y: -20 ) - об'єкт повинен містити ці дві властивості
Приклад використання:
Window.onload = function() ( // Запускаємо підказки: new Tip(window, document.getElementsByTagName("a"), ( borderRadius: "10px", background: "yellow", border: "solid 1px green", color: "green", padding: "10px" ), (x: 20, y: -20));
Звичайно скрипт підказки можна вдосконалити і додати до хмаринки "ніжку", але мені не хотілося ускладнювати його, я думаю, ви і самі зможете зробити це, якщо знадобиться. p align="justify"> Ще скрипт жорстко ставить обробники подій mouseover і mouseout - шляхом присвоювання функцій відповідним свійтсвам безпосередньо. Тому все ж таки залишається ймовірність конфліктів у цьому місці, але все можна виправити, як я вже вказував в одному з попередніх постів можна зробити "композицію" з об'єктом який . Загалом кому потрібно / сподобається - користуйтеся здоров'ям.
Скрипт підказок лістинг(Він не такий вже великий. У ньому більше коментарів):
Function Tip(GLOBAL, elements, styles, offset) ( // Страхування необов'язкових аргументів: if (!offset) ( offset = (x: 50, y: -10) ) if(!styles) ( styles = (); ) / / Оголошуємо змінні та залежності var DOC = GLOBAL.document, length = elements.length, tipDiv, prop, i;// Додаємо html-елемент підказки: function addTip(element,div,textTip) ( // Позиція повинна бути абсолютною: div .style.position = "absolute"; // Переганяємо значення з об'єкта налаштувань стилів: for (prop in styles) ( if (styles.hasOwnProperty(prop)) ( div.style = styles; ) ) // Додаємо елемент підказку в дерево DOM element.parentNode.appendChild(div); // Додаємо текст до div підказки // Тут зроблено саме так, щоб уникнути // Витоків пам'яті в IE6 div.appendChild(textTip); return div; ) // Роздаємо пиріжки (обробники подій) // @parament element - посилання на html - елемент function addHandlers(element) ( // Створюємо div для підказки: var div = DOC. аем текст для підказки - беремо його з атрибуту title textTip = DOC.createTextNode(element.tempTitle); // Обробник події наведення миші: function mouseOver() (tipDiv = addTip(element,div,textTip); // Обчислюємо положення хмарини: tipDiv.style.top = element.offsetTop + offset.y - tipDiv.offsetHeight + "px" tipDiv.style.left = element.offsetLeft + offset.x + element.offsetLeft + "px"; ) // Обробник події з'їзду миші: function mouseOut() ( tipDiv.parentNode.removeChild(tipDiv); tipDiv = null; ) // Призначаємо обробники подій: element.onmouseover = mouseOver; element.onmouseout = mouseOut; ) // Якщо elements - це NodeList if (elements.item) ( // Проходимося по заданим елементам: for (i = 0; i
