Десятка полезных jQuery сниппетов

21 апреля, 2014

Alexjc

С каждым годом популярность jQuery не падает, а это значит, что растёт набор полезных наработок, десятку из которых вы увидите в данном посте. Данные примеры можно легко адаптировать под свои проекты.

1. Прокрутка на начало страницы

В данном примере страница пользователя прокрутится на самый верх при клике по ссылке с id = #topid.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

$("a[href='#top']").click(function() {

$("html, body").animate({ scrollTop: 0 }, "slow");

return false;

});

2. Дублирование заголовков колонок на конце таблицы

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

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
    $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

var $tfoot = $('<tfoot></tfoot>');

$($('thead').clone(true, true).children().get().reverse()).each(function(){

$tfoot.append($(this));

});

$tfoot.insertAfter('table thead');

3. Выравнивание высоты ячеек таблицы

Часто при выводе текста в таблице, высота ячеек получается разной. Для более приятного глазу, отображения таблицы, мы можем выровнять все ячейки по высоте. Смотрится намного лучше!

var maxheight = 0;
$("div.col").each(function(){
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

var maxheight = 0;

$("div.col").each(function(){

if($(this).height() > maxheight) { maxheight = $(this).height(); }

});

$("div.col").height(maxheight);

4. Оформление таблицы в стиле “зебра”

Опять же, для лучшей читабельности таблиц, можно оформить её в стиле “зебра”. Каждая чётная строка будет отличаться по цвету. Для этого создайте особый CSS стиль и воспользуйтесь следующим кодом.

$(document).ready(function(){
     $("table tr:even").addClass('stripe');
});

$(document).ready(function(){

$("table tr:even").addClass('stripe');

});

5. Пред-загрузка фотографий

С помощью jQuery мы можем легко организовать пред-загрузку изображений в фоновом режиме. Просто обновите названия изображений.

$.preloadImages = function() {
       for(var i = 0; i < arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

$.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 присутствует множество ссылок на сторонние сайты, или их оставляют пользователи в комментариях, то с помощью следующего кода вы можете автоматически сделать так, чтобы они открывались в новом окне.

$('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');
       });
   }
});

$('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-а, размеры которого будут равны размерам окна. Замечательный сниппет для модальных окон.

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,
    });
});

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:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

1 2	<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>

Надёжность вычисляется с помощью регулярных выражений. Возможные варианты: надёжный, средний, слабый, или недостаточно символов.

$('#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;
});

$('#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. Частичное обновление контента

Если вам нужно обновлять контент какого-то блока с определённой периодичностью, то этот фрагмент кода для вас:

setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // ожидание в миллисекундах

setInterval(function() {

$("#refresh").load(location.href+" #refresh>*","");

}, 10000); // ожидание в миллисекундах

10. Проверка загрузилось ли изображение

var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

var imgsrc = 'img/image1.png';

$('<img/>').load(function () {

alert('image loaded');

}).error(function () {

alert('error loading image');

}).attr('src', imgsrc);

A man like james michener, who consistently https://www.homework-writer.com gives away most of what he earns writing best sellers, is certainly not driven by the desire for cash.

Posted in Прочее

Вы можете оставить ответ, или trackback с вашего сайта.