Полезные "плюшки" на JavaScript и jQuery

В статье описаны полезные решения на jQuery и JavaScript. Небольшие (по объему кода), но порой довольно важные (для визуального оформления) методы помогут сделать взаимодействие пользователя с вашим сайтом более удобным.

На JavaScript

Текст в строке ввода, который исчезает при клике

Можно использовать, например, для надписи "Поиск" была внутри поля для ввода текста, а при клике мышкой надпись исчезает:

<input type="text" value="Поиск" onblur="if(this.value=='') this.value='Поиск'" onfocus="if(this.value=='Поиск') this.value=''" />

Вывести диалог для подтверждения формы

<input type="submit" onclick="javascript: if (!confirm('Передать данные?')) return false;">

Как определить позицию курсора мыши

Определение координат пользовательского курсора по отношению к странице не так уж и проста. Как правило, различные браузеры по-разному определяют значения некоторых свойств. Универсальное решение:

// Определяем координаты X, Y
function getPosition(e) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    } else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
   }
   return {
        x: posx,
        y: posy
   }
}

// Определяем координаты по клику мышки
document.addEventListener( "click", function(e) {
    var x = getPosition(e).x;
    var y = getPosition(e).y;
    console.log("x pos: "+ x +" // y pos:"+ y);
});

На jQuery

Загрузка результата php-скрипта в область

$("#button").click(function() {
    $.get("http://site.ru/script.php", {параметр1: значение1}, function(data) {
        $('#aria').html(data);
    });
});

Подсветка при наведении на строку таблицы

$(function() {
    var hL = $('.highlight tr');
    hL.bind('mouseenter', function() {
        $('td', this).addClass('clrhigh');
    });
    hL.bind('mouseleave', function() {
        $('td', this).removeClass('clrhigh');
    });
}

где highlight, это класс таблицы, для которой нужно использовать подсветку строк, а clrhigh - css-класс цвета подсветки:

.clrhigh: {color: red !important}

Для плагинов jQuery

Плагин fancybox - убираем смещение страницы вверх при клике по ссылке

Чтобы при клике по ссылке class="fancybox" непроисходило прокрутки страницы на самый верх (бывает например, когда теги html, body и имеют height: 100%;) используйте параметр:

jQuery(".fancybox").fancybox({
    padding : 0,
    helpers: {
        overlay: {
            locked: false
        }
    }
});

Как перезагрузить страницу с помощью jQuery

$('#something').click(function() {
    location.reload();
});