- javascript
- event
18 октября 2009, 08:38 более 4-х месяцев назад
Javascript: bind keyboard
Забиндить клаву можно через DHTML параметр тэга onkeydown или onkeyup
<body onkeydown="displayKeyCode(event)">В саму функцию displayKeyCode мы отправляем событие тэга (боди или импута), и дальше мы с него вынимаем код клавиши
charCode = (evt.which) ? evt.which : event.keyCode;Строку с кода можно взять через стандартную функцию
String.fromCharCode(charCode);У нас же есть ещё модификаторы, для них есть отдельный метод, но и по одиночке они отдают код тоже
evt.altKey evt.ctrlKey evt.shiftKeyВот по сути и всё, код клавиш мы знаем, из кода получить символ можем, остаётся только глянуть в действии
28 мая 2009, 18:28 более 9-и месяцев назад
Context menu (right-click) on JavaScript
Для работы нам нужны 3 функции:
// Инициализация переменных // Положение мыши var mouse = {"x":0,"y":0}; // Дистанция до правого-нижнего края var distance = {"right" : 0, "bottom" : 0}; // Обьект, который будет выскакивать как меню var contextmenu = null; // при загрузке страници, инициализируем ивенты addGenericEvent(window,'load',onstart);
function onstart() { // биндим обьект меню contextmenu = $('thecontextmenu'); // перехватываем мышку addGenericEvent(document,'mousemove',mousemove); // при клике где либо на странице, прячем меню addGenericEvent(document,'click',hide_contextmenu); }
// функция которая покаызвает меню function show_contextmenu(event) { // выбираем координаты положения меню // +30 исправляем длину offsetWidth для всех кроме ИЕ о_О // +2 если курсор слишком близок к правому или нижнему краю if (distance.right < contextmenu.offsetWidth + (!window.event ? 30 : 0)) // Если очень близко к правому краю, // размещаем слева от указателя мыши contextmenu.style.left = 2 + mouse.x - contextmenu.offsetWidth+"px"; else contextmenu.style.left = mouse.x+"px"; if (distance.bottom < contextmenu.offsetHeight) // Если очень близко к нижнему краю, // размещаем сверху над указателем мыши contextmenu.style.top = 2 + mouse.y - contextmenu.offsetHeight+"px"; else contextmenu.style.top = mouse.y+"px"; // показываем меню contextmenu.style.visibility = "visible"; // улавливаем ивент когда пользователь // любит клацнуть много раз по правой кнопке try {window.getSelection().collapseToStart();} catch (e) {} // прячем правое меню браузера event.cancelBubble = true; // и другие ивенты на клик правой кнопкой if (event.stopPropagation) event.stopPropagation(); if (event.preventDefault) event.preventDefault(); return false; }
function hide_contextmenu() { contextmenu.style.visibility = "hidden"; // прячем меню над мышкой, что бы лишнее // пространство внизу страници не появлялось у ИЕ contextmenu.style.top = (mouse.y - contextmenu.offsetHeight) + "px"; }
function mousemove(e) { // параметры окна браузера // высота, ширина виевпорта и скролов var wnd = getWindowSizes(); // Ловим положение курсора if (e.clientX) // Moz mouse = { "x": e.clientX + wnd.sx, "y": e.clientY + wnd.sy}; else if (window.event) // IE mouse = { "x": window.event.clientX + wnd.sx, "y": window.event.clientY + wnd.sy}; // считаем растояния к правому-нижнему углу distance.right = wnd.w - (mouse.x - wnd.sx); distance.bottom = wnd.h - (mouse.y - wnd.sy); }
6 мая 2009, 09:43 более 10-и месяцев назад
Events (OnMouseOver, OnMouseOut) для DIVа (и вложеных елементов)
Если просто отобразить див по МаусОвер, то при наведении мыши, на любой из его внутренних елементов, он сразу исчезнет, а нам это не нужно ;)
Для того что бы этого небыло, используем простой код:
Для того что бы этого небыло, используем простой код:
//Обьявляем ивент для всех браузеров и Експлорера function addHandler(node, evt, func) { if (node.addEventListener) { node.addEventListener(evt, func, false); } else { node.attachEvent('on' + evt, func); } }; //Получаем список парент елементов обьекта - рекурсивно function isParent(child, parent) { if (!child || !parent) { return false; } while (true) { if (child == parent) { return true; } if (child.parentElement) { child = child.parentElement; } else if (child.parentNode) { child = child.parentNode; } else { return false; } } } // Простой текст-заготовка var preperedText = "<div style='position: absolute; width: 300px; background: #ccc;'> <h1>Cool Popup</h1>\ <p>Here the sample Text (<b>in paragraph</b>)\ with <i>some</i> <u>styling</u> and picture above<br/>\ <img src='Astronaut.gif' title='Picture'></p></div>"; function zaatachim(container) { var injection = document.getElementById(container); // Вставляем в контейнер приготовленный текст // Текст можно получить и через Ajax ;) injection.innerHTML = preperedText; // Цепляем ивент на контейнер с Айди container addHandler(injection, 'mouseout', function(e) { var target = e.relatedTarget || e.toElement; if(!isParent(target, injection) ) { injection.innerHTML = ''; } }); // если текст цепляем через Ajax, не забываем о задержках ;) }
14 декабря 2008, 15:07 более года назад
Add Generic Event (crossbrowser)
function addGenericEvent(source, trigger, func) { if (source.addEventListener) { source.addEventListener(trigger,func,false); } else if (source.attachEvent) { source.attachEvent("on"+trigger,func); } }source — window or document
trigger — any DHTML event widthout on (onLoad — load, onClick — click)
func — name of fucntion widthout any parameters, and brackets
27 июня 2008, 17:18 более года назад
100% загрузка функции Javascript (без onload), после загрузки всей страницы
Javascript: Run some function after full page load
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func;} else {window.onload = function() { if (oldonload) {oldonload();}func();}} } addLoadEvent(function() { //Выполняем произвольную JS "команду" :) document.getElementById("footer").style.bottom = 0; });