
С каждым годом популярность jQuery не падает, а это значит, что растёт набор полезных наработок, десятку из которых вы увидите в данном посте. Данные примеры можно легко адаптировать под свои проекты.
1. Прокрутка на начало страницы
В данном примере страница пользователя прокрутится на самый верх при клике по ссылке с id = #topid.
1 2 3 4 |
$("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); |
2. Дублирование заголовков колонок на конце таблицы
Для лучшего восприятия таблицы иногда неплохо помочь пользователю вспомнить значение той или иной колонки. Как вариант, можем продублировать названия колонок в самом низу таблицы.
1 2 3 4 5 |
var $tfoot = $('<tfoot></tfoot>'); $($('thead').clone(true, true).children().get().reverse()).each(function(){ $tfoot.append($(this)); }); $tfoot.insertAfter('table thead'); |
3. Выравнивание высоты ячеек таблицы
Часто при выводе текста в таблице, высота ячеек получается разной. Для более приятного глазу, отображения таблицы, мы можем выровнять все ячейки по высоте. Смотрится намного лучше!
1 2 3 4 5 6 |
var maxheight = 0; $("div.col").each(function(){ if($(this).height() > maxheight) { maxheight = $(this).height(); } }); $("div.col").height(maxheight); |
4. Оформление таблицы в стиле “зебра”
Опять же, для лучшей читабельности таблиц, можно оформить её в стиле “зебра”. Каждая чётная строка будет отличаться по цвету. Для этого создайте особый CSS стиль и воспользуйтесь следующим кодом.
1 2 3 |
$(document).ready(function(){ $("table tr:even").addClass('stripe'); }); |
5. Пред-загрузка фотографий
С помощью jQuery мы можем легко организовать пред-загрузку изображений в фоновом режиме. Просто обновите названия изображений.
1 2 3 4 5 6 7 8 9 |
$.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { $("<img />").attr("src", arguments[i]); } } $(document).ready(function() { $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); }); |
6. Открытие всех сторонних ссылок в новом окне
Если в вашем HTLM присутствует множество ссылок на сторонние сайты, или их оставляют пользователи в комментариях, то с помощью следующего кода вы можете автоматически сделать так, чтобы они открывались в новом окне.
1 2 3 4 5 6 7 8 9 10 |
$('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } }); |
7. Изменение размера блока в зависимости от области видимости
Создание div-а, размеры которого будут равны размерам окна. Замечательный сниппет для модальных окон.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var winWidth = $(window).width(); var winHeight = $(window).height(); // выставляем свойства height / width $('div').css({ 'width': winWidth, 'height': winHeight, }); // меняем размеры блока при изменении размеров страницы $(window).resize(function(){ $('div').css({ 'width': winWidth, 'height': winHeight, }); }); |
8. Проверка надёжности пароля
Для начала HTML:
1 2 |
<input type="password" name="pass" id="pass" /> <span id="passstrength"></span> |
Надёжность вычисляется с помощью регулярных выражений. Возможные варианты: надёжный, средний, слабый, или недостаточно символов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { $('#passstrength').html('More Characters'); } else if (strongRegex.test($(this).val())) { $('#passstrength').className = 'ok'; $('#passstrength').html('Strong!'); } else if (mediumRegex.test($(this).val())) { $('#passstrength').className = 'alert'; $('#passstrength').html('Medium!'); } else { $('#passstrength').className = 'error'; $('#passstrength').html('Weak!'); } return true; }); |
9. Частичное обновление контента
Если вам нужно обновлять контент какого-то блока с определённой периодичностью, то этот фрагмент кода для вас:
1 2 3 |
setInterval(function() { $("#refresh").load(location.href+" #refresh>*",""); }, 10000); // ожидание в миллисекундах |
10. Проверка загрузилось ли изображение
1 2 3 4 5 6 |
var imgsrc = 'img/image1.png'; $('<img/>').load(function () { alert('image loaded'); }).error(function () { alert('error loading image'); }).attr('src', imgsrc); |
.