Тег canvas постепенно набирает популярность, поскольку позволяет создавать 2-х мерную графику при помощи JavaScript. Однако отсутствие поддержки со стороны Internet Explorer значительно тормозит дальнейшее его продвижение. Сегодня я нашел скрипт ExplorerCanvas, который добавляет поддержку этого тега в IE используя возможности Vector Markup Language (VML). Конечно же не все возможности canvas реализованы (например радиальный градиент), но будем надеяться в будущем они появятся. Также трудно сказать о производительности этого чуда, по всей видимости она уступает canvas.

Подключать скрипт нужно только для IE используя условное подключение:

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

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

Загрузить

Bananascript.com – это онлайн инструмент, который позволяет очень эффективно сжимать скрипты JavaScript, уменьшая из размер в среднем на 72% (по данным авторов этого сервиса).

Работает этот “packer” точно также, как и аналогичный, более распространенный инструмент от Dean Edwards. Чтобы сравнить эти два инструмента я попробовал сжать файл скрипта Lightgallery. Исходный размер скрипта – 21,3 Кб, паккер Дина Эдвардса сжал его до 7,8 Кб, в то время как bananascript.com уменьшил размер до 5,8 Кб. Довольно таки неплохой результат.

Одно важное замечание – при подключении скриптов, созданных этим инструментом, обязательно указывать кодировку для скриптов ISO-8859-1:

<script src="lightgallery/lightgallery.banana.js" charset="ISO-8859-1" type="text/javascript"></script>

Если вам интересна тема сжатия скриптов, советую почитать статью JavaScript: жать или не жать? на webo.in, в которой сравнивается ряд популярных инструментов для сжатия скриптов JavaScript.

Такой инструмент хранения данных как cookies зачастую избегают из-за многих проблем связанных с их использованием – ограниченный размер хранимых данных (4 х 20Kb на один домен), хранить можно только строки, и, кроме того все эти данные добавляются в заголовки запросов браузера, что не способствует производительной работе сайта. Решение этой проблеме я нашел вчера – скрипт sessvars.js способен устанавливать и хранить данные сессий при помощи JavaScript и без использования cookies. Вместо cookies используется свойство window.name, прелесть которого в том, что оно сохраняет свое значение при перезагрузке страниц и может хранить до 2 мегабайт данных. Также как и в cookies здесь можно хранить только строковые данные. Чтобы обойти это ограничение sessvars.js использует преобразователь JSON в строку для сериализации объектных данных.

Скрипт работает во всех основных браузерах: IE 6/7, Firefox 1.5/2/3b5, Safari, Opera 9.

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

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 чтобы можно было прокручивать список при помощи колесика мышки.

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