tablesorter - это плагин для jQuery, который способен преобразовать обычную HTML таблицу в сортируемую. Он автоматически определяет тип данных ячеек таблицы (числа, даты, IP-адреса) и соответствующим образом сортирует их.

Как использовать

Подключите скрипты jquery.js и jquery.tablesorter.js:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>

В HTML документе создайте таблицу, причем теги thead и tbody должны обязательно присутствовать:

<table id="myTable">
<thead>
<tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

Далее создаем сортируемую таблицу используя функцию tablesorter():

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);

Можно также передавать различные параметры в tablesorter(): sortList - каким образом и какие колонки нужно отсортировать, cssHeader - какой класс установить для заголовков, cancelSelection - запретить ли выделение текста в ячейках и др. Полный список опций смотрите здесь.

Также вместе с плагином доступны темы оформления таблиц.

смотреть демозагрузить

В этом туториале я рассмотрю пример создания приложения FAQ (часто задаваемые вопросы), в котором вопросы и ответы будут располагаться в двух расположенных рядом контейнерах с полосами прокрутки. Вместо стандартных полос прокрутки я создам собственный дизайн, а прокручивание сделаю плавным, плюс добавлю меню-аккордеон со списком вопросов.

Окончательный результат будет работать следующим образом: смотреть.

Для создания полос прокрутки я буду применять плагин jScrollPane, который в свою очередь требует jquery.dimensions.js, а также jquery.mousewheel.js чтобы можно было прокручивать список при помощи колесика мышки.

Читать дальше »

По большему счету функции jQuery работают над коллекцией элементов, получаемых при помощи метода $(). Исключением из этого правила являются функции “геттеры” (getters - трудно сказать как правильно перевести этот термин), которые возвращают результат только для первого элемента коллекции. Таковыми являются функции attr(), width(), html() и другие. Но иногда возникает необходимость получить некоторые значения для всех элементов коллекции. Именно с этой целью Аарон Брэндон создал плагин jQuery.batch, который расширяет функциональность jQuery добавляя новые методы, которые отличаются от аналогов лишь множественным числом в названии. Так, для функции attr() объявляется функция attrs(). Новые методы обрабатывают всю полученную коллекцию, возвращая массив результатов.

Полный список методов, добавляемых jQuery.batch:

• attrs
• styles
• widths
• heights
• vals
• texts
• htmls

Дополнительно к основным методам, jQuery.batch добавляет свой собственный метод - jQuery.fn.batch(), который принимает имя существующей функции из коллекции jQuery.fn вместе с дополнительными параметрами:

$('a').batch('attr', 'href');

Этот же результат можно получить при помощи следующего выражения:

$('a').attrs('href');

Домашняя страница плагина расположена по следующей ссылке: jQuery.batch

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

Читать дальше »

В этой статье я покажу простой метод создания полупрозрачной подсветки (т.н. ролловер) элементов меню, который создает эффект мягкого фонового свечения. Эффект работает во всех браузерах, включая IE 6 - это возможно за счет использования полупрозрачных изображений в формате png и скрипта pngfix для вышеупомянутого браузера. Результат будет примерно следующим:

Этот метод был создан Брюсом Крозе (Bruce Kroeze), статью которого можно найти здесь.

Читать дальше »

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

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

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

Читать дальше »