Главная
Новости
Статьи
Скрипты
Плагины
Сервисы

Главная

СкриптыTableSorter — сортировка таблиц

На сайтах часто используются таблицы — различные топы, подборки данных, статистика и т.д. Если в таблице много столбцов, то дополнительно делают сортировку по всем полям, по возрастанию и убыванию. И это довольно сильно плодит число страниц, плюс надо дополнительно писать серверный обработчик, и на каждую сортировку нужно перезагружать страницу. Иногда это необходимо (к примеру, если данных много и они разбиты на страницы — сортировка в пределах текущей страницы ничего особенного не даст), но в ряде случаев, когда все данные есть на текущей странице, можно использовать AJAX для сортировки.

Данный скрипт именно этим и занимается. Это довольно просто и удобно, не нужно думать о серверной части — клиентский JavaScript сам отсортирует все столбцы. Правда, придется немного поработать с кодом таблицы — прописать отдельно заголовки и данные (теги thead, th и tbody), и закрыть все теги, которые обычно опускаются. Но оно того стоит)

Требования: jQuery
Документация, демо
Скачать (867 кб, полный пак)

1 Star2 Stars3 Stars4 Stars5 Stars (22 votes, average: 4,18 out of 5)
Loading...

СервисыGoogle Chart API

Да, это совсем не AJAX, но это именно то, что нужно. Когда мне понадобилось строить красивые графики у себя на сайте, я перепробовал множество библиотек, как на PHP, так и на JS. Остановился на AJAX варианте, но он подгружал 70кб библиотек, был сложен в управлении и не совсем красивый. Потом обнаружил Google Chart API и понял — вот что мне нужно 🙂 Потратив пару часов на изучение параметров и подгонки под сайт, я получил красивый, отказоустойчивый (лимит 50000 запросов в день), простой в обслуживании сервис построения диаграмм и графиков с широкими возможностями по настройке. Зачем рассчитывать точки, подключать библиотеки, строить линии, если Google все сделает за вас? Для использования не требуются никакие технологии, все данные прописываются в адресе изображения.

С помощью Google Chart API можно строить несколько видов графиков (столбчатые, линейчатые, круговые и т.д.), с полной настройкой их внешнего вида — цвет, размер линий, маркеры, фоновый цвет (в том числе с настройкой прозрачности, как в примере слева), а так же настройкой бекграунда — сетка, оси, легенда. Хотя, есть некоторые сложности — к примеру, надо разобраться в синтаксисе настроек — при построении графика придется постоянно листать мануал. Так же могут возникнуть проблемы с вводом данных — хотя, это кажется проблема всех подобных сервисов и скриптов.

Документация, примеры использования

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 4,60 out of 5)
Loading...

СкриптыVanadium — простая валидация форм

Существует большое число типовых полей в формах — например, для регистрации на сайте надо заполнить логин, почту, пароль (причем два поля) и т.д. Конечно, данные с подобных форм должны обязательно проверятся на сервере, но мы можем сильно упростить жизнь пользователя, проверяя эти данные «на лету». И вот наконец-то очень простое и красивое решение в виде скрипта Vanadium. Достаточно просто подключить .js файл к странице, а в теге input просто указать класс. К примеру, для проверки почты нужно указать class=»:email», и все.

Демо (там же документация)
Скачать (38 кб, .js файл)

1 Star2 Stars3 Stars4 Stars5 Stars (20 votes, average: 4,15 out of 5)
Loading...

СкриптыИндикация языка ввода


Как часто при вводе пароля мы ошибаемся из-за другой раскладки или включенного Caps Lock’а ? Но мы еще ладно, привыкли, а вот обычные пользователи при этом нервничают и ругаются, особенно когда непонятно, почему пароль неправильный. Данный скрипт как раз таки предназначен для предотвращения подобного. При вводе пароля он отображает сбоку раскладку последнего введенного символа, а так же показывает, включен ли капслок. Полезный и незаметный скрипт для все сайтов, в который есть авторизация.

Требования: jQuery
Демо
Скачать [21kb]
Автор: y0ga, найдено на хабре

1 Star2 Stars3 Stars4 Stars5 Stars (34 votes, average: 4,47 out of 5)
Loading...

НовостиОткрылся форум!

Теперь, если у вас есть какие либо вопросы или предложения — добро пожаловать на форум! Он интегрирован в сам WordPress, и регистрироваться отдельно для него не нужно. В данный момент уже 50 человек (регистрация так же позволяет оставлять комментарии к постам). Конечно, форум нестандартный — но зато и более простой, и спамеры не будут досаждать. Кстати, в нем немало функций реализовано на нашем любимом аяксе)

Так же, хоть это не столь заметно, мы переехали на сежую версию WP, так как предыдущая не обновлялось уже больше года. Из-за этого, правда, отвалился плагин тегов — надо будет найти новый. Зато плюсов гораздо больше — тот же форум можно поставить, безопасность улучшилась, плагины разные появились и т.д.

1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4,25 out of 5)
Loading...

СкриптыTextArea Resizer

textarearesizer.jpg Куда обычно вводится текст на сайтах? Будь то комментарий, сообщение, пост, статья — неважно, но вводится он всегда в textarea блок. И почти всегда фиксированный размер оказывается не таким, какой нужен — большое поле занимает много место, но в него удобно писать, маленькое — компактно, но писать неудобно.. И те же комментарии — кто-то может ограничиться двумя строчками, а кто то напишет автору послание на полстраницы. При публикации постов в WordPress как раз таки используется удобнейший и незаметный скрипт, который позволяет увеличивать или уменьшать текстовое полее ввода. На самом деле это очень удобно, и этот скрипт позволяет делать тоже самое с любой формой. Пользуйтесь 🙂

Требование: jQuery
Демо
Скачать (3 кб)
Документация

1 Star2 Stars3 Stars4 Stars5 Stars (22 votes, average: 4,18 out of 5)
Loading...

СкриптыМеню навигации в стили win — dhtmlxMenu

dhtmlxmenu.jpg Если вы создаете полноценное веб-приложение (именно приложение), вам скорее всего понадобится расширенная система навигации. Обычные кнопки порой занимают слишком много места, особенно если элементов очень много. В таких случаях спасает старый проверенный способ навигации Win-программ — верхняя панелька с раскрывающимися списками. Данный скрипт как раз таки реализует этот механизм, максимально приближенно и быстро.

В архиве со скриптом идет подробнейший FAQ, примеры использования, API и другие полезные вещи, которые позволят при желании во всем разобраться и максимально точно сконструировать то, что вам нужно.

Демо
Скачать (700кб)

1 Star2 Stars3 Stars4 Stars5 Stars (17 votes, average: 4,18 out of 5)
Loading...

СкриптыПодгрузка страниц — Page Loader

pageloader Можно сказать, это базовый пример динамичного яваскрипта (AJAX) 🙂 Скрипт — простейший, при клике по ссылке он загружает любую страницу в основное тело сайта. Не всегда применение такого скрипта оправдано (если на сайте 5 страниц, то ничего страшного при их загрузке не произойдет, в крайнем случае можно через чистый яваскрипт показывать), но если к примеру идет выборка из таблицы в сотню элементов (прайс), то тогда это будет гораздо удобней для пользователей.

Требования: MooTools
Демо + Обзор

1 Star2 Stars3 Stars4 Stars5 Stars (48 votes, average: 4,23 out of 5)
Loading...

СкриптыЧекбокс с прозрачностью

opac.jpg
Данный скрипт предназначен для работы со списками посредством чекбоксов. При выделении чекбокса скрипт делает элемент достаточно прозрачным, чтобы он не бросался в глаза. Такая система пригодится, к примеру, при модерировании комментариев — после выделения чекбокса комментарий становится незаметным. Так же этот скрипт можно применить, к примеры, в корзине товаров (убирать лишнии) и т.д.

Скачать
Обзор на сайте автора

PS. На сайт были добавлены рейтинги за каждый пост (если вам понравился материал — отметье это), а так же теги (что улучшит навигацию по сайту, осталось только теги сотне скриптов установить..). Пользуйтесь 🙂

1 Star2 Stars3 Stars4 Stars5 Stars (27 votes, average: 4,56 out of 5)
Loading...

СервисыАнимация загрузки: AjaxLoad

Одним из приятных штрихов AJAX скриптов является показывание пользователю того, что данные загружаются. Это позволяет оставить пользователя на сайте, и не создавать впечатления зависшего сервиса. Конечно, можно просто текстом об этом написать, но анимированная картинка ассоциируется гораздо быстрее, к тому же она компактна и выглядит красиво. Часть таких gif изображений была собрана в этом сервисе, кроме того, для каждый картинки можно выставлять настройки — цвет, фон изображения, что позволяет встроить их в любой дизайн.

Адрес сервиса: AjaxLoad.info

PS. Этим постом открываю новую категорию на сайте — Сервисы, в которую собственно будут перенесены полезные для AJAX разработчика (и просто вебмастера) сервисы.

1 Star2 Stars3 Stars4 Stars5 Stars (25 votes, average: 4,36 out of 5)
Loading...








Авторам:

Популярные статьи:

Web-просмотрщик картинок. Lightbox2 (14)
AJAX скрипт для определения Google Pagerank (13)
Карта кликов вашего сайта. ClickHeat (13)
Анимация загрузки: AjaxLoad (13)
Чекбокс с прозрачностью (10)