«Я не волшебник, я только учусь» или первый плагин для jQuery

13 Фев
2012

Добрый день, уважаемый Блог. Изучение яваскрипта я начал сравнительно недавно (приблизительно пару-тройку месяцев назад). Сказать, что «нужда заставила» язык не повернется – просто захотелось чего-нибудь новенького. И изучения я начал сразу же с jQuery (счастливая случайность, думается мне). По началу я… Не понимал ничего. Темный лес, горизонта нет, а трава покрывается жуткими черными наростами. Но вскоре я начал понимать логику действий, а еще через некоторое время начал писать простенькие скрипты на сайт. Так, пора заканчивать экскурс и переходить к делу.

Дело


Собственно, немного поднаторев в jQuery, я задался вопросом, как же писать к нему плагины. Полистав несколько страниц в интернете, нашел отличный мануал, по которому и начал практиковаться. У меня стояла задача – написать плагин для использования нескольких сочетаний клавиш в поле ввода (textarea). Методом проб и ошибок, я накидал скрипт (не претендующий на звание безупречного), который отлавливал нажатие клавиши <—Tab—> и сочетания Ctrl + Enter. Писал я это для одного форума, поэтому цель понятна. Перейдем к делу. Я накидал макет страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	</head>
	
	<body>
		<textarea id="msg"></textarea>
		<p />
		<input type="button" id="post" value="Post" onclick="alert(123)"/>
	</body>
</html>


Не буду вдаваться в подробности. На страницу добавил поле ввода и кнопку, которая при нажатии выдает алерт. Далее я сел писать скрипт:

(function(jQuery) {
	jQuery.fn.tseBind = function() { //Функция присвоения события
		jQuery(this).each(function() { //Перебираем подключенные (в будущем) элементы
			jQuery(this).keydown(function(event) { //Регистрируем событие нажатия кнопки для выбранного элемента
				var key = event.keyCode || event.which; //Создаем переменную, в которую заносим код нажаой кнопки (вспоминаем про WebKit)
				if (key == 9) { //Если нажатая кнопка - Таб
					if (document.selection) { //Вспоминаем про IE
						this.focus(); //Фиксируемся на поле ввода
						sel = document.selection.createRange(); //Создаем выделение
						sel.text = sel.text+'\t'; //Вставляем символ отступа
					} else if (this.selectionStart || this.selectionStart == '0') { //Вспоминаем все современные браузеры. Если выделения нет
						this.focus(); //Фиксируемся на поле ввода
						var startPos = this.selectionStart;	var endPos = this.selectionEnd;	var scrollTop = this.scrollTop; //Создаем переменые с данными выделения
						jQuery(this).val(jQuery(this).val().substring(0, startPos)+'\t'+jQuery(this).val().substring(endPos, jQuery(this).val().length)); //Вставляем символ отступа
						this.setSelectionRange(startPos+1, endPos+1); //Ставим курсор на позицию после отступа
					} else { //Если выделение уже есть
						jQuery(this).val(jQuery(this)+'\t'); //Вставляем символ отступа
					};
					return false; //Возвращаем ложь во избежание возможный багов
				};
			});
		});
		return this; //Возвращаем элемент (все-таки плагин)
	};
	jQuery.fn.tseCtrlEnter = function() { //Функция отлова нажатия Ctrl + Enter (aka Cap)
		jQuery(this).each(function() { //Перебираем подключенные (в будущем) элементы
			var btn = jQuery(this); //Устанавливаем переменную со значением вызванного объекта
			jQuery(document).keydown(function(event) { //Регистрируем событие нажатия кнопки для выбранного элемента
				var key = event.keyCode || event.which; //Создаем переменную, в которую заносим код нажаой кнопки (вспоминаем про WebKit)
				if ((key == 13 && event.ctrlKey) || (key == 10 && event.ctrlKey)) { //Если кнопка - сочетание Ctrl + Enter (тут я помучался с совместимостью для WebKit)
					btn.click(); //Имитируем нажатие кнопки
				};
			});
		});
		return this; //Возвращаем элемент
	};
})(jQuery); //Закрываем наш плагин


Итак, скрипт готов. Модифицируем нашу страницу, добавив наш скрипт и вызвав его:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="jquery.tse.js"></script>
	</head>
	
	<body>
		<textarea id="msg"></textarea>
		<p />
		<input type="button" id="post" value="Post" onclick="alert(123)"/>
		<script type="text/javascript">$('textarea').tseBind();$('#post').tseCtrlEnter()</script>
	</body>
</html>


Сохраняем, запускаем. При нажатии таб в поле ввода у нас услужливо появляется отступ, а при нажатии Ctrl + Enter выскакивает алерт с кнопки. Все работает 🙂
Большое всем спасибо за внимание. Ссылка на исходник
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх