Статьи

Полезные фрагменты кода jQuery

Август 22, 2018

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

});

Источник: http://snipplr.com/view/26739/jquery–smooth-scroll-to-anchor/

Изменение размера изображения с помощью 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
});

Источник: http://snipplr.com/view/62552/mage-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);
});

Источник: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery

Проверка надежности пароля

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

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

Источник: [a href = «http://css-tricks.com/snippets/jquery/password-strength/»] http://css-tricks.com/snippets/jquery/password-strength/

Выровнять высоту элементов div

Выравнивание высот divэлементов невозможно (или очень смешно) в чистом CSS, поэтому jQuery здесь, чтобы помочь. Код ниже автоматически отрегулирует высоту divэлементов в соответствии с более высоким.

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

Источник: http://css-tricks.com/snippets/jquery/equalize-heights-of-divs/

Простое и эффективное исправление png для IE6

В 2013 году IE6, наконец, почти ушел, и люди используют новые браузеры. Но, тем не менее, в некоторых ситуациях вам нужно заботиться об этом ужасном браузере и предоставить веб-сайт, совместимый с IE6. Так как IE6 не может справиться с прозрачностью png, вот супер простой jQuery-хак для принудительного рендеринга png.

Просто добавьте .pngfixкласс ко всему, что вы хотите исправить, или вставьте другой селектор jQuery.

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

Источник: http://itknowledgeexchange.techtarget.com/itanswers/

Разбор json с помощью jQuery

Разбор json-данных с помощью jQuery совсем не сложен. Вот эффективный пример того, как проанализировать данные JSON и добавить их на свою веб-страницу.

function parseJson(){
	//Start by calling the json object, I will be using a 
        //file from my own site for the tutorial 
	//Then we declare a callback function to process the data
	$.getJSON('hcj.json',getPosts);
 
	//The process function, I am going to get the title, 
        //url and excerpt for 5 latest posts
	function getPosts(data){
 
		//Start a for loop with a limit of 5 
		for(var i = 0; i < 5; i++){
			//Build a template string of 
                        //the post title, url and excerpt
			var strPost = '<h2>' 
				      + data.posts[i].title
				      + '</h2>'
				      + '<p>'
				      + data.posts[i].excerpt
				      + '</p>'
				      + '<a href="'
				      + data.posts[i].url
				      + '" title="Read '
				      + data.posts[i].title
				      + '">Read ></a>';
 
			//Append the body with the string
			$('body').append(strPost);
 
		}
	}
 
}
 
//Fire off the function in your document ready
$(document).ready(function(){
	parseJson();				   
});

Источник: http://hankchizljaw.co.uk/tutorials/parse-json-with-jquery-snippet/06/05/2012/

Цвета чередующихся строк

В больших списках или таблицах чередующиеся цвета строк могут значительно улучшить читаемость. Вот как можно чередовать цвета строк в списке элементов с помощью некоторого 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);
});

Источник: http://www.nealgrosskopf.com/tech/thread.php?pid=77.

Сделайте весь div кликабельным

Вот простой способ сделать родительский элемент ссылки кликабельным. Допустим, у вас есть этот HTML-код:

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

Следующие строки jQuery сделают весь div кликабельным:

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

Источник: http://css-tricks.com/snippets/jquery/make-entire-div-clickable/

36
Share: