Оригинал: «Useful and Handy jQuery Tips and Tricks».
За время работы над проектами у меня накопился список советов и хитростей jQuery, и сейчас я бы хотел им с вами поделиться. В этой статье я соберу все советы и хитрости jQuery, а также подсказки, которые я смог найти в сети.
С тех пор, как я начал изучать jQuery, я всегда пытался улучшить свой код, или же, в поисках простейшего способа реализации, прийти к пусть не самому элегантному, но зато понятному решению. Теперь я хочу поделиться с вами своими излюбленными советами и хитростями jQuery.
1. Подсказки по jQuery
Прежде всего, неплохо иметь подсказки в виде справочного материала. Я нашёл три такие в сети:
2. Сокращённый вариант $(document).ready
Это отличный совет! Вместо того, чтобы писать:
$(document).ready(function() { // Здесь будет ваш код }
можно пользоваться таким, полностью эквивалентным предыдущему, вариантом:
$(function(){ // Здесь будет ваш код });
3. Открыть в новом окне
Атрибут target отсутствует в STRICT-версии стандарта W3C. Поэтому, придётся использовать атрибут rel и немного кода jQuery, чтобы добавлять атрибут target динамически, и, тем самым, избежать ошибок при валидации. Это один из моих любимых примеров. Он так прост и при этом отлично справляется с работой.
$('a[rel=external]').attr('target', '_blank');
<a href="http://www.queness.com" rel="external">Queness in new window</a>
4. Сделать элемент списка кликабельным
Эта хитрость очень полезна, когда вы используете маркированные списки в качестве меню. Теперь, когда вы нажмёте на область элемента списка (вне ссылки), скрипт найдёт нужный адрес и перейдёт по соответствующей ссылке:
$("ul li").click(function(){ // Получим адрес из атрибута href и перейдём по ссылке window.location = $(this).find("a").attr("href"); return false; });
<ul> <li><a href="home">Главная</a></li> <li><a href="home">О сайте</a></li> <li><a href="home">Контакты</a></li> </ul>
5. Переключиться на другую CSS-таблицу
Вы хотите использовать различные дизайны сайта? Можете использовать следующий код для переключения используемых CSS-таблиц:
$("a.cssSwitcher").click(function() { // Изменим атрибут rel тега link на значение атрибута rel нажатой ссылки $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); });
<link rel="stylesheet" href="default.css" type="text/css"> ...... <a href="#" class="cssSwitcher" rel="default.css">По умолчанию</a> <a href="#" class="cssSwitcher" rel="red.css">Красная тема</a> <a href="#" class="cssSwitcher" rel="blue.css">Синяя тема</a>
6. Запретить нажатие правой кнопки
Некоторые могут захотеть отключить нажатие правой кнопки или создать собственное контекстное меню. Так мы определим щелчок правой кнопкой:
$(document).bind("contextmenu", function(e){ // Можете поместить здесь свой код, например, вывод меню // Отменить отображение контекстного меню браузера return false; });
7. Получить координаты x и y курсора
Этот скрипт отображает значения x и y позиции курсора:
$().mousemove(function(e){ // Отобразим координаты по x и по y внутри параграфа $('p').html("X: " + e.pageX + " | Y: " + e.pageY); });
<p></p>8. Отменить поведение по умолчанию
Предположим, у нас есть длинная страница и ссылка, похожая на приведённую ниже, которая используется не как гиперссылка. При нажатии на такую ссылку, вы будете перемещены в начало страницы. Это происходит из-за того, что в атрибуте href указан символ #. Чтобы решить эту проблему, необходимо отменить поведение по умолчанию с помощью следующего кода:
$('#close').click(function(e){ e.preventDefault(); }); /* ИЛИ */ $('#close').click(function(){ return false; });
<a href="#" id="close"></a>9. Кнопка возврата в начало страницы
Полезную ссылку возврата к началу страницы можно реализовать с помощью плагина jQuery scrollTo. Мне нравится эффект прокрутки, я использую такие ссылки на своём сайте — можете убедиться. Разумеется, необходим плагин scrollTo.
$('#top').click(function() { $(document).scrollTo(0, 500); }
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> ...... <a id="top" style="cursor:hand;cursor:pointer">В начало страницы</a>
10. Колонки одинаковой высоты
Думаю, этот скрипт довольно полезен, хотя мне ещё не приходилось его использовать. Он относится к дизайну. Если вы хотите иметь колонки одинаковой высоты, эта функция — как раз то, что вам нужно. По мотивам CSSNewbie.
$(document).ready(function() { setHeight('.col'); }); // Глобальная переменная, хранящая максимальное значение высоты var maxHeight = 0; function setHeight(col) { //Получим все элементы с классом, указанным в переменной col col = $(col); //Для каждого элемента col.each(function() { // Сохраним максимальное значение if ($(this).height() > maxHeight) { maxHeight = $(this).height();; } }); // Установим высоту col.height(maxHeight); }
<div class="col" style="border:1px solid">Колонка 1<br/> Состоит из трёх строк<br/> И отличается по высоте<br/><br/> </div> <div class="col" style="border:1px solid">Колонка 2<br/><br/></div>
11. Создание собственного селектора
Это более сложный пример. Я узнал о нём на сайте illuminatikarate.com..
// Расширяем функциональность jQuery $.extend($.expr[':'], { // Название вашего селектора moreThanAThousand : function (a){ // Соответствующие элементы return parseInt($(a).html()) > 1000; } }); $(document).ready(function() { $('td:moreThanAThousand').css('background-color', '#ff0000'); });
<table> <tbody> <tr><td>1400</td><td>700</td><td>400</td></tr> <tr><td>2500</td><td>600</td><td>100</td></tr> <tr><td>100</td><td>1100</td><td>900</td></tr> <tr><td>2600</td><td>1100</td><td>1200</td></tr> </tbody> </table>
12. Масштабирование шрифтов
Одна из наиболее популярных функций — возможность изменения размера шрифтов на странице. Я модифицировал скрипт с сайта shopdev.co.uk. Теперь в массиве можно указывать ID, классы или имена тегов, для которых будет доступно масштабирование.
$(document).ready(function(){ // ID, классы или имена тегов элементов, // для которых доступно масштабирование задаются в этом массиве. // Укажите 'html' или 'body', если хотите применять масштабирование для всей страницы var section = new Array('span','.section2'); section = section.join(','); // Вернуть начальный размер var originalFontSize = $(section).css('font-size'); $(".resetFont").click(function(){ $(section).css('font-size', originalFontSize); }); // Увеличить размер $(".increaseFont").click(function(){ var currentFontSize = $(section).css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $(section).css('font-size', newFontSize); return false; }); // Уменьшить размер $(".decreaseFont").click(function(){ var currentFontSize = $(section).css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $(section).css('font-size', newFontSize); return false; }); });
<a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Размер шрифта может быть изменён в этом блоке</span> <div class="section1">На этот изменения не действуют</div> <div class="section2">Этот тоже можно настроить!</div>
Коллекция советов и хитростей пополняется!
Я продолжу обновлять статью, так что можете занести её в закладки — надеюсь, эти примеры помогут вам. Некоторые скрипты были изменены и стали более гибкими. Если вы знаете какие-либо советы или хитрости, которыми вы бы хотели поделиться, оставьте комментарий! Спасибо!
Ключевые слова: jQuery, советы, хитрости, примеры кода
sumin.andrew@gmail.com