Шпаргалка по jQuery: часто используемые небольшие скрипты

В моей работе иногда требуется быстро вставить небольшой скрипт jQuery, который я уже неоднократно вставлял на предыдущих проектах. И вот тогда я начинаю вспоминать тот проект, конечно-же вспоминаю далеко не с первого раза, рою архивы… Вот и решил сделать для себя некую шпаргалку, может еще кому-то пригодиться. Шпаргалка будет пополняться постоянно. Принимаются советы и ваши мини-скриптики 🙂

Форма с пропадающими LABEL при клике на INPUT[TYPE=TEXT]

<form class="search labeled">
<div class="field"><label for="idSearch">Введите запрос</label>
<input id="idSearch" type="text" /></div>
<div>
<input class="button" type="submit" value="ИСКАТЬ" /></div>
</form>
.search .field{position:relative;}
	.search .field label{position:absolute; top:4px; left:11px; width:170px; font-size:12px; font-style:italic; color:#6C6E71; cursor:text;}
	.search .field input{width:150px; border:0; font-size:12px; background:none; outline:none;}
$('form.labeled input[type=text]').focus(function () {
	$(this).siblings('label').fadeOut(100);
});
$('form.labeled input[type=text]').blur(function () {
	 !$(this).val() && $(this).siblings('label').fadeIn(100);
});

Флотим пользовательские картинки в контенте

$("img[align='left']").attr("align", "").addClass("fleft");
$("img[align='right']").attr("align", "").addClass("fright");
.fleft{float:left; margin:3px 15px 0 0;}
.fright{float:right; margin:3px 0 0 15px;}

Анимация на примере изменения ширины страницы

<div id="wrapper">
<div id="header">
		<a class="logo" href="/">Lorem ipsum</a></div>
</div>
#wrapper{position:relative; width:1000px; margin:0 auto;}
#header{height:40px;}
.reSize{position:absolute; right:30px; font-size:18px; cursor:pointer;}
$('#header').prepend('
<div class="reSize">«»</div>
');
$(".reSize").toggle(function(){
	$("#wrapper").animate({
		width: "1200px"
	}, 500 );
	$(".reSize").html('»«');
}, function () {
	$("#wrapper").animate({
		width: "1000px"
	}, 500 );
	$(".reSize").html('«»');
});

Выполнение скрипта при ресайзе страницы

resizeWindow();
$(window).bind('resize', function() { 
	resizeWindow();
}); 
function resizeWindow(){
	$("#main").css('width', $("body").width() - 352);
}

Открываем страницы в новой вкладке правильно

$("a[rel=external]).attr('target', '_blank');
Размещено в jQuery.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • Alexandr

    Почему вы юзаете редактор в котором нету сниппетов?
    Ведь это очень полезная вещь и не только для верстки.

  • Дмитрий

     Спасибо, понравилась штука с пользовательскими картинками.

  • Я бы не использовал ни одно из этих решений. Возьмем последнее. Вместо того, чтобы вызывать отдельно функцию, можно повесить событие bind(‘load resize’), при каждом resize ищется элемент #mail. Обязательно нужно сохранять это в переменные.