Джон Ресиг создал новый плагин для jQuery, который позволяет анализировать производительность работы скриптов, написанных с использованием этой библиотеки. Работает он довольно просто, нужно просто подключить плагин…:

<script src="/javascripts/bundle.js"></script>
<script src="http://dev.jquery.com/~john/plugins/profile/jquery-profile.js"></script>

Затем просто пользоваться сайтом, т.е. заставить поработать скрипты. Чтобы просмотреть результаты анализа производительности, нужно ввести в консоли команду jQuery.displayProfile(), результат будет примерно следующим:

Чтобы получить необработанные данные профайлера, воспользуйтесь функцией jQuery.getProfile().

источникскачать

Vista-like AJAX Calendar v2 – это простой в использовании и “ненавязчивый” календарь/виджет для выбора дат, написанный на Mootools с использованием AJAX и PHP.

Достоинства плагина:

• Дизайн в стиле Vista.
• Быстрая навигация между месяцами, годами, десятилетиями без использования выпадающих списков.
• Эффекты плавной анимации.
• Легок в настройке.
• Возможность выбора дат.
• Как календарь, так и виджет для выбора дат можно создавать много раз.
• Совместим с версиями Mootools 1.11 и 1.2
• Небольшой размер (в сжатом виде 8,50kB)

Данный плагин протестирован в IE6/7, Firefox 2 и Opera 9.

скачатьсмотреть демо

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

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

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() выводятся последовательно три других сообщения. Посмотреть этот пример можно здесь.

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