jQuery – это, безусловно, замечательный инструмент, когда дело доходит до интерфейсной веб-разработки. В этой статье пойдет речь о супер полезных сниппетах для jQuery.
Плавный скроллинг к #anchor
Когда пользователь находится в футере страницы сайта, было бы очень полезно обеспечить его быстрым способом вернуться к верхней части страницы. Вот простой способ как сделать гладкий скроллинг к #anchor на ваш выбор.
// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});Изменение размера изображения c использованием jQuery
Хотя вы и должны менять размер изображения на стороне сервера (с помощью PHP и GD), все таки может быть полезной возможность изменить размер изображения с помощью jQuery. Вот удобный сниппет, чтобы это сделать.
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});Автоматическая загрузка контента на скроллинге
Некоторые веб-сайты, такие как Twitter подгружают контент при скроллинге. Это означает, что все содержимое динамически загружается на одной странице до тех пор, как вы будете прокручивать вниз.
Вот как вы можете повторить этот эффект на вашем сайте:
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none");
loading = false;
});
}
}
});
$(document).ready(function() {
$('#loaded_max').val(50);
});Тестирование надежности пароля
При создании формы, очень хорошей практикой будет обеспечить проверку надежности пароля на главном интерфейсе, поэтому посетителям не надо будет бесконечно отправлять форму, чтобы исправить проблему. Этот сниппет использует обычные выражения для проверки надежности пароля. Также не забудьте проверить свои формы на стороне сервера!
$('#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;
});Выравнивание высоты div элементов
Сделать выравнивание высоты div элементов в чистом CSS не возможно, для этого мы обратимся к jQuery. Приведенный ниже код будет автоматически регулировать высоту div элементов в соответствии с более высокой высотой.
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);Простое и эффективное исправление PNG для IE6
В 2013 году IE6, наконец, почти не осталось, и люди используют только новые браузеры. Но тем не менее, в некоторых ситуациях вы должны позаботиться об этом ужасном браузера и обеспечить IE6-совместимый веб-сайт. Так как IE6 не может справляться с прозрачностью PNG, вот супер простой jQuery хак, который принудит PNG рендеринг.
Просто добавьте .pngfix класс ко всему, что вы хотите исправить.
$('.pngfix').each( function() {
$(this).attr('writing-mode', 'tb-rl');
$(this).css('background-image', 'none');
$(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="path/to/image.png",sizingMethod="scale")');
});Переменные цвета строк – “зебра”
В больших списках или таблицах, чередование цвета строк может существенно улучшить читаемость. Ниже показано, как можно чередовать цвета строк в списке элементов, используя jQuery. Вы можете использовать любой HTML элемент, который хотите: td, tr, li, и т.д. …
//jquery
$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");
//html example
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>Предзагрузка изображений, как на Фейсбуке
Вы никогда не замечали, как быстро загружаются изображения при пролистывании фотоальбомов на Facebook? Это потому, что Facebook предварительно загружает каждое из этих изображений в кэш браузера, прежде чем вы даже их просматриваете. Вот как вы сможете достичь аналогичного поведения на вашем веб-сайт, используя немного JQuery магии.
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("<img>").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});Сделайте весь div интерактивным
Допустим, у вас есть этот HTML код и в нем есть ссылка:
<div class="myBox">
раз два три.
<a href="//google.com">link</a>
</div>Следующие строки jQuery сделают весь div интерактивным:
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});Высоких конверсий!
