jQuery File Tree – это AJAX браузер файлов написанный на jQuery. Он полностью конфигурируемый, легок в установке и настройке. Внешний вид изменяется простым редактированием CSS. jQuery File Tree работает во всех браузерах, поддерживаемых jQuery. Он также полностью протестирован в Internet Explorer 6 / 7, Firefox 2, Safari 3 и Opera 9.

Для установки плагина необходимо скачать дистрибутив и загрузить его на сервер. Затем нужно подключить скрипты jQuery.js, jqueryFileTree.js и таблицу стилей jqueryFileTree.css. После этого нужно вызвать функцию fileTree() с указанием контейнера, в котором будет дерево файлов, параметров плагина и функции обработчика:

$(document).ready( function() {
	$('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
		alert(file);
	});
});

Здесь, #container_id это ID div-а, в котором будет дерево файлов, root – корневая директория для просмотра. Функция обработчик принимает один параметр – имя выбранного файла. В данном примере имя файла будет просто выводится в alert. По умолчанию, AJAX запрос отправляется на скрипт jqueryFileTree.php (входит в дистрибутив), но вы можете указать другой скрипт, добавив опцию script:

$(document).ready( function() {
	$('#container_id').fileTree({
		root: '/some/folder/',
		script: 'jqueryFileTree.asp',
	}, function(file) {
		alert(file);
	});
});

Скачать плагинСмотреть демо

Проверка данных форм это чрезвычайно важная процедура для повышения “юзабилити” при работе с формами. В первую очередь потому, что пользователь сразу же получает уведомление в том случае, если какие либо данные введены неверно. Сегодня я расскажу об очень полезном плагине для jQuery, который облегчает задачу проверки введенных данных до минимума. Это jQuery Validation Plugin. Вот некоторые его возможности:

1. Способен проверять значения email, URL, числа, цифры, номера кредитных карт, минимальное и максимальное значения и др.
2. Поддержка удаленной проверки используя AJAX.
3. Автоматическое отображение сообщений об ошибках.

Итак, попробуем скрипт в действии. Допустим, нам необходимо создать простую форму для логина пользователя, в которой есть 3 поля – имя пользователя, пароль и checkbox “запомнить”.

<form name="myForm" id="myForm" action="" method="post" style="margin:20px">
	<label for="username">Имя пользователя </label><br/>
	<input type="text" name="username" value="" /><br/>
	<label for="password">Пароль</label><br/>
	<input type="password" name="password" value="" /><br/><br/>
	<label for="remember">Запомнить меня:</label>
	<input type="checkbox" name="remember" /><br/><br/>
	<input type="submit" name="" value="Submit" />
</form>

Для начала нам понадобится подключить библиотеку jQuery и плагин в страницу:

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.delegate.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>

Теперь можно вызывать функцию jQuery.validate() которая инициализирует форму. В качестве атрибута в функцию нужно передать объект, содержащий правила (rules) и сообщения об ошибках (messages) для каждого проверяемого поля:

$().ready(function(){
	$("#myForm").validate({
		rules : {
			username : {required : true, minlength: 2},
			password : "required"
		},
		messages : {
			username : {
				required : "Введите ваше имя",
				minlength : "Введите не менее, чем 2 символа."
			},
			password : "Введите пароль"
		}
	});
});

Здесь все довольно таки просто. Селектор $(”#myForm”) получает указатель на форму, а функция validate() устанавливает правила для полей в соответствии с полученными данными. Объект rules содержит имя поля и список правил. Если правил несколько, то они должны быть объединены в отдельный объект. Так, для поля пароль просто указано правило “required”, т.е. обязательное поле, в то время как для поля username указан объект содержащий два правила – required и minlength (минимально допустимое количество символов). Структура объекта messages такая же, как и для rules, за исключением того, что вместо атрибутов правил указаны сообщения об ошибках.

Если при отправке формы обнаружены ошибки, то форма не отправляется, а высвечивается сообщение об ошибке в виде тэга <lable> с классом error. Также класс error присваивается элементу input, вызвавшему ошибку. Воспользуемся этим чтобы ярко выделить это поле:

label.error {
	color: red;
	font-style: italic;
}
input.error {
	border: 1px dotted #f00;
}

Таким образом, сообщения об ошибках будут выделены красным курсивом, а рамка поля, вызвавшего ошибку, будет выделена красной прерывистой линией.

Демо этого примера можно посмотреть здесь.

<< читать дальше >>