Что из этого получилось:

Но лучше всего увидить и спеть самому: http://dt.in.th/src/lyricscroll/ , правда автор этой штуковины из Тайланда, но я не думаю, для “нашего” человека после пива это будет являться проблемой.

Автор вдохновился таблицами от такого монстра в это деле как ExtJS и реализовал их на jquery.

А вот и список фич:

• Изменяемый размер колонок
• Изменяемая высота и ширина
• Сортировка в заголовке
• Прикольный шаблончик
• Возможно преобразовать в обычную таблицу
• Возможно подключить ajax’ом файл с данными (XML либо JSON)
• Страницы
• Показывать/Скрыть столбец
• Тулбар
• Поиск
• Простой API
• И еще куча всего

Основная задача – это сохрнить небольшой размер библиотеки с большим функционалом, в противном случае лучше использовать ExtJS либо YUI

SoundManager 2 — это звуковой API, которого так нехватает в Javascript.

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

Но не все так печально, javascript библиотека SoundManager 2 мало того, что имеет функциональность не слабее, а даже больше чем у Flash’s. Использовать звуковые эффекты на сайте с SoundManager 2 очень просто и быстро.

Пример: Страница как – play list

Пример: Ссылки на MP3 файлы, сразу проигрываются

Немало важно то, что SoundManager 2 полностью совместим с Flash 8, и в данный момент в beta версии поддерживает и Flash 9

Небольшая, но очень полезная библиотека, которая кеширует Javascript файлы внутри браузера, работает даже через SSL. Основаная идея это уменьшения тарафика для владельцев сайтов и уменьшение скорости загрузки страниц для пользователей.

О том как это чудо работает можно прочитать на офф сайте.

А примерчик можно посмотреть в живую прям здесь.

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

• dummy-js-file-01.js
• dummy-js-file-02.js
• jquery-1.2.6.min.js

Firebug – показал первую скорость загрузки старинцы со скриптами 233 ms, в это время quipt  кешируют javascript файлы и после обновлия страницы скорость равна 0 ms, впечатляет!

На самом деле checkbox и есть картинка, но в данном примере мы стандартную картинку заменим своей красивой!

Собственно надоели убогие checkbox’ы и захотелось красоты, вот что было найдено на эту тему

Fancy Form – http://lipidity.com/fancy-form

Использует как основу javascript framework Mootools 1.11, облегченная версия которого входит в пакет загрузки Fancy Form

Второй не менее интересный вариант это Protocheck – http://bugrain.com/projects/protocheck/

Использует javascript framework Prototype – в пакет закачки эта библиотека не входит, ее нужно отдельно скачивать на  сайте разработчика www.prototypejs.com

Я выбрал для работы Protocheck, но не из-за его качеств, а только из-за того что он использует protoype, который в данный момент уже присутствует в проекте, т.е. основная цель – это не плодить javascript библиотеки.

Он позволяет работать с JavaScript, HTML, DOM и CSS как на стороне клиента, так и сервера (поддерживается стандарт JavaScript 1.8)

Полную статью на русском читаем здесь.

[cc lang="php"]
node = $(‘elementID’);

// То же самое
node = document.getElementById(‘elementID’);

// Так же можно получать не только один елемент
// В этом случае результат будет массивом DOM елементов
nodes = $(‘firstDiv’, ‘secondDiv’);
[/cc]

Prototype так же предлагает функцию, ее нет в ядре JavaScript, которая возвращается массив DOM елементов и как аргумент она принимает имя css класса (class name):
[cc lang="php"]
nodes = document.getElementByClassName(‘myclass’);
[/cc]

Однако, я думаю использовать ее вы будете редко, так как Prototype предлагает более расширенную функцию двойной доллар, $$(). Эта фунция возвращает массив DOM елементов основанных на CSS селекторе (css selector). Таким образом код показанный выше можно записать так:

[cc lang="php"]
nodes = $$(‘.myclass’);
[/cc]

Благодаря мощьности CSS селекторов (css selectors) вы можете парсить модель DOM по классам (class), ID, и родитель-наследник (parent-child) и предыдущий-следующий (previous-next) связям, гораздо проще чем при использовании XPath выражений. Вы можете получить доступ к элементу через сложную комбинацию селекторов:

[cc lang="php"]
nodes = $$(‘body div#main ul li.last img > span.legend’);
[/cc]

И последний пример улучшения синтаксиса предлагаемого Prototype — это each array iterator, подобно как в PHP:

[cc lang="php"]
var vegetables = ['Carrots', 'Lettuce', 'Garlic'];
vegetables.each(function(food) { alert(‘I love ‘ + food); });
[/cc]

Не забывайте подписывать на рассылку.

Дальше будет еще много интересного.