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 - запретить ли выделение текста в ячейках и др. Полный список опций смотрите здесь.

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

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

Слово Roar переводится с английского как “орать”. Именно такое громкое название придумали для виджета, который тихонечко появляется в уголочке и показывает нам разные оповещения, уведомления, сообщения об ошибках и т.п. Создан он на основе библиотеки Mootools, и работает на всех основных браузерах.

Минимальные требования - Mootools 1.2, который должен иметь следующие дополнения: Element.Dimensions, Fx.Tween, Fx.Morph, Selectors, DomReady (необязательно).

На сайте автора приведены три примера использования виджета, код одного из них я публикую без изменений:

window.addEvent('load', function() {

	var roar = new Roar({
		position: 'lowerLeft',
		duration: 5000 // сообщение показывается 5 секунд
	});

	roar.alert('Britney Spears meets Frankenstein', 'The Beast and the Beauty, who is who!');

	roar.chain(function() {
		roar.alert('News gone crazy', 'Frankenstein is lost!');
	}).chain(function() {
		roar.alert('Frankenstein dead!', 'Who did it, we know it!');
	}).chain(function() {
		roar.alert('We fired our editor!', 'He only wrote stupid lorem ipsum dummies, hopefully we get better texts for the next showcase!');
	});
 });

В этом примере, сначала создается новый объект Roar, с параметрами position=’lowerLeft’ (всплывающее окно будет появляться внизу) и duration = 5000 (окно будет отображаться 5 секунд). Затем вызывается метод roar.alert(), который собственно и показывает сообщения. Он принимает 2 параметра - заголовок и текст сообщения. Далее, используя метод chain() выводятся последовательно три других сообщения. Посмотреть этот пример можно здесь.

перейти на сайт проекта