Pull to refresh

Пара полезных плагинов к jQuery

Reading time2 min
Views1.1K
Написал пару плагинов по jQuery, чтобы немного облегчить себе верстку и кодинг.

Возможно, кому-то они окажутся полезными. Их код навеян постами, найденными на просторах Интернета, а затем, ввиду частой используемости, оформлен как плагины.

Первый — jquery.outlinefix.js. Используется для удаления раздражающих рамок с ссылок, являющихся якорями (например, <a href="#">ссылка</a>).

Проблема:

(у ссылок после клика остается рамка)


Сразу отмечу, что решить ее можно и используя css (например, так css-tricks.com/removing-the-dotted-outline), но только не в IE6 и IE7, плюс решение этой проблемы через css отнимает у пользователя возможность использовать клавиатуру для навигации (он не увидит, какой элемент выбран). А так как все еще остается доля платежеспособного населения и офисов с таковым браузером — проблема должна быть решена полноценно.

Итак, пример использования плагина:
$('a.left-menu-pic').outlinefix();


Исходный код плагина:
(function($){
	$.fn.outlinefix = function(){
		return this.live('mousedown', function(e) {
			e.target.blur();
			e.target.hideFocus = true;
			e.target.style.outline = 'none'
		}).live('mouseout', function(e) {
			e.target.blur();
			e.target.hideFocus = false;
			e.target.style.outline = null;
		});
	}
})(jQuery);


Второй — jquery.parentn.js. Используется для выборки родительского элемента на несколько уровней выше текущего. Мне очень не нравились конструкции типа parent().parent().parent() и хотелось описывать это как-то лаконичнее, я нашел код функции parentn() на сайте jquery в комментариях — но он не работал, я сделал работоспособным и оформил в плагине, чтобы можно было легко подключать к своим проектам.

Пример использования:
$('a.left-menu-link').each(function() {
	$(this).hover(function() {
		$(this).parentn(2).find("td:first a.left-menu-pic").css("background-position", "0 -59px");
	},
	function() {
		$(this).parentn(2).find("td:first a.left-menu-pic").css("background-position", "0 0");
	});
});


Исходный код плагина:
(function($){
	$.fn.parentn = function(n){
		var $target = $(this[0]);
		for (var i = 0; i < n && $target; i++) {
			$target = $target.parent();
		}
		return $target;
	}
})(jQuery);


Бонус
Зачастую, плагины подключаются прямо в head'е страницы и плодят кучу запросов на веб-сервер, что нерационально. Логичным было бы javascript'ы объединять в один и проходится по ним каким-нибудь компрессором, например, YUICompressor.

Я использую для сжатия css и js ant-скрипт, сделанный на базе скрипта Сергея Чикуенка из Техногрета на сайте Студии Артемия Лебедева:

www.everfall.com/paste/id.php?v5fxzfpdom72

Чтобы приспособить скрипт для своих нужд, достаточно поменять названия файлов, а также указать корректный путь к .jar файлу YUICompressor'а, не забыв попутно рядом с ним положить .jar-файл ant-task'а для YUICompressor'а — YUIAnt.jar.
Tags:
Hubs:
Total votes 25: ↑20 and ↓5+15
Comments16

Articles