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

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

Aflax (аббревиатура от Asynchronous Flash и XML) - это библиотека, позволяющая разработчикам использовать JavaScript чтобы полностью использовать все возможности Adobe Flash - графику, видео и т.д. Она создана Полом Колтоном (Paul Colton), создателем Adobe JRun и основателем Aptana, Inc.

Используя Aflax, можно создавать медиа плееры, графику при помощи Flash не используя ActionScript и ничего не компилируя, а вместо этого пользоваться только лишь JavaScript. В отличии от шлюза Flash JavaScript, который был создан компанией Macromedia для Flash 7, Aflax использует ExternalInterface для общения с Flash что значительно увеличивает производительность.

Aflax demoAPI документация

По большему счету функции 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

Итак, наступает большой праздник “День победы”, одним из символов которого является конечно же праздничный салют. Как раз сегодня натолкнулся на скрипт fireworks.js, который позволяет добавлять яркие, красочные салюты на веб страницу.

Автор этого скрипта также является автором библиотеки SoundManager, для работы со звуком через JavaScript (о ней я недавно написал статью), поэтому не удивительно, что феерверк сопровождается замечательными звуковыми эффектами.

Основные возможности скрипта:

• Много разных вариаций формы и цвета феерверка
• Легкий в конфигурации API для добавления дополнительных эффектов
• Управляемые скриптом звуковые эффекты при помощи SoundManager API
• Чередующаяся анимация (позволяет легко устанавливать последовательность феерверков)
• Эффект звукового панорамирования, в зависимости от расположения салюта на странице.

Попробовать скрипт в работе можно здесь.

С праздником Вас, и до скорых встреч!

Приветствую Вас дорогие читатели!

Для тех из вас, кто знаком с RubyOnRail, CodeIgniter, CakePHP, парадигма Model, View, Controller не является новинкой. Шаблон MVC позволяет разделить данные, представление и обработку действий пользователя на три отдельных компонента: модель (Model) для предоставления данных, представление (View) для отображения информации и контроллер (Controller) для интерпретации данных, введенных пользователем.

Если для таких языков программирования, как PHP, Ruby, Python, существует множество фреймворков, использующих MVC, то для JavaScript это пока диковинка. Совсем недавно появился именно такой фреймворк для JavaScript - JavaScriptMVC

Разработка фреймворка пока еще в стадии “альфа”, но тем не менее, он уже сейчас обладает внушительными возможностями. Есть большой набор дополнительных плагинов для использования AJAX, тестирования, добавления объекта History, работы с массивами, строками и много другое. Также, что немаловажно, возможно использование JavascriptMVC с другими библиотеками - jQuery, Prototype и др.

Я решил попробовать библиотеку в действии и создать простое приложение. Вот что у меня получилось: demo.

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