Категории: JavaScript

Управление jqGrid с помощью поля с автозавершением

Владимир | | Ajax, HTML, JavaScript, MySQL, PHP, Web разработка.

Сегодня я продолжу рассказывать о плагине jqGrid и покажу еще один пример его использования.

Если не ошибаюсь, это уже 5-ый пост об этом плагине, поэтому я не буду останавливаться на его установке и настройке. Лучше приведу ссылки на предыдущие части:

1) Query Grid Plugin – «продвинутое» решение для создания таблиц

2) jqGrid: редактирование табличных данных с помощью inline редакторов

3) jqGrid – создание дополнительных кнопок

4) jqGrid – поиск данных

Но для тех, кто их не читал, кратко поясню, о чем вообще речь.

jqGrid – это плагин для библиотеки jQuery, предназначенный для работы с табличными данными. Он поддерживает кучу полезных возможностей вроде разбивки данных на страницы, поиска, добавления, удаления, редактирования записей и т.п.

Естественно, у плагина очень много настроек и вариантов использования, но это не означает, что их хватит на все случаи жизни 😉

Например, раньше я рассказывал об использовании встроенной формы поиска jqGrid. Но иногда удобнее использовать отдельную форму, содержащую поля с автозавершением. Под ними по мере набора слова будут появляться варианты, а когда посетитель выберет один из них, то автоматически обновиться таблица с данными.

Как это работает, вы можете посмотреть на демо-страничке

Demo

либо скачать архив с примером и установить его на своем сервере

Source

Реализовать такую систему не сложно.
Читать дальше

Создание слайдшоу на JavaScript и несколько особенностей анимации

Владимир | | HTML, JavaScript, Web разработка.

jquery_panel_gallery

Приветствую всех!

На днях я экспериментировал с плагином jQuery Panel Gallery и хочу поделиться впечатлениями, а заодно рассказать, как с ним работать. Кроме того, использование подобных плагинов имеет некоторые особенности, которые касаются не их самих, а JavaScript анимации вообще.

Итак, начнем с плагина.

Как несложно догадаться из названия, для его работы нужна библиотека jQuery. Сам плагин слайдшоу с плавными переходами между картинками.

Как это выглядит можно посмотреть на демонстрационной страничке.

Demo

И, конечно, вы можете скачать архив с примером.

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

Передача параметров в JavaScript файлы

Владимир | | HTML, JavaScript, PHP, Web разработка.

Приветствую всех!

Сегодня я хочу обсудить два способа передачи параметров в JavaScript файлы.

Прежде всего, объясню, в чем заключается проблема. Обычно в конфигурационных файлах серверных (PHP) скриптов хранится множество настроек. И к некоторым из них нужно получить доступ из JavaScript. Если все эти параметры собраны в одном месте (конфигурационном файле или БД), то значительно упростится поддержку приложения.

Существует два широко распространенных решения этой задачи.
Читать дальше

Исправляем недостатки IE6

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

Думаю, все кто когда-нибудь занимался версткой сайтов, знает о том насколько хорошо IE6 поддерживает разные полезные возможности 😉

Призывы перейти на нормальные браузеры или хотя бы обновить IE6, можно встретить на каждом шагу. Тем не менее ситуация меняется очень медленно.

И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.

К тому же для того чтобы обеспечить поддержку IE6 не обязательно отказываться от новых возможностей.

Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.
Читать дальше

Локализация клиентской части web приложений

Владимир | | Ajax, JavaScript, PHP, Web разработка.

Сегодня я хочу рассказать о поддержке нескольких языков в клиентской части web приложений.

Прежде всего, определимся с задачей.

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

И если наше приложение не использует JavaScript, то можно считать задачу решенной.

Но на сегодняшний день JS используется все чаще и в основном для создания интерфейса, содержащего множество надписей, сообщений и т.п.

Кроме того, в идеале мы должны указывать язык интерфейса только один раз, на стороне сервера. Например, во время регистрации пользователь указывает наиболее удобный для него язык, и мы сохраняем его в базе.

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

Теперь рассмотрим решение.
Читать дальше

jqGrid — поиск данных

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

Приветствую всех!

Я довольно давно обещал рассказать о функции поиска в плагине jqGrid и сегодня выполняю обещание.

Для тех, кто сразу хочет посмотреть, как это работает, я сделал демонстрационную страничку

Demo

и, конечно, можно скачать архив с примером

Source

Напомню, что jqGrid — это плагин для библиотеки jQuery, который значительно упрощает работу с таблицами данных.

Сразу хочу отметить, что эта статья — продолжение предыдущих двух частей (jQuery Grid Plugin — «продвинутое» решение для создания таблиц и jqGrid: редактирование табличных данных с помощью inline редакторов). Поэтому если вы впервые слышите о jqGrid — очень советую почитать хотя бы первую часть.
Читать дальше

PHP скрипт: ToDo с картинками

Владимир | | Ajax, CodeIgniter, CSS, htaccess, HTML, JavaScript, MySQL, PHP, Web разработка.

Уделяете ли вы внимание организации своей работы?
Много ли у вас «мелких» дел, о которых вы регулярно забываете?

Вроде бы простые вопросы, но для многих людей (и я не исключение) организация работы – это актуальная проблема.

Хуже всего, когда нужно сделать много «мелких» дел, которые не занимают много времени, но обязательно должны быть выполнены вовремя… и держать в голове их все просто невозможно.

Естественно, разработчики реагируют на потребности рынка, и на сегодняшний день создано множество программ-органайзеров, различных напоминалок и т.п.
Примеры создания ToDo списков часто приводят в учебниках по программированию.

Я решил не оставаться в стороне и сделал собственный вариант такого ToDo списка, естественно, с некоторыми дополнительными возможностями.

Кстати, скрипт называется SimpleTasks.

Главная особенность – возможность указывать состояние выполнения задач. При этом используется специальная система обозначений.
Читать дальше

jqGrid – создание дополнительных кнопок

Владимир | | Ajax, JavaScript, Web разработка.

Пишу этот пост, т.к. недавно столкнулся с проблемой при использовании jqGrid. Об этом плагине для jQuery я уже рассказывал (часть 1, часть 2), поэтому повторяться нет смысла, скажу только, что, на мой взгляд, он представляет собой одно из лучших JS решений для работы с большими таблицами.

А проблема возникла, в общем-то, тривиальная – не достаточно подробная документация.

Дело было так. Один из читателей этого блога (Виктор Волков) попросил меня помочь добавить дополнительные кнопки в навигационную панель jqGrid. Я естественно отправил ему ссылку на соответствующую страницу справки 🙂 … Но при этом я не знал, что если скопировать код от туда, то работать он не будет.

Хотя их демонстрационные примеры с дополнительными кнопками прекрасно работают.
Читать дальше

Калькулятор взвешенных оценок

Владимир | | HTML, JavaScript, Web разработка.

Приветствую всех!
В этот раз речь пойдет о создании калькулятора для расчета взвешенных оценок. Такие оценки часто используют при проведении различных тестирований и сравнений.

Например, вы хотите сравнить несколько мобильных телефонов между собой. Выбираете параметры, которые для вас важны (пусть это будут: цена, размер дисплея и вес) и для каждого из них выставляете оценку.

Естественно некоторые параметры будут важнее чем другие. Например, цена важнее веса. И вы хотите это учесть.

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

В суммарную оценку входит сумма оценок всех параметров, умноженных на их вес.

При этом удобно, чтобы сумма весов всех параметров равнялась 1 (100%). Например, цена – 50%, размер дисплея – 40%, вес – 10%.

Теперь рассмотрим пример создания такого калькулятора для 3-х параметров.

Нам понадобятся 3 поля для ввода оценок каждого из параметров и 3 слайдера (slider) для задания их весов.

В данном случае слайдеры создадут очень наглядное представление весов параметров. К тому же мы сделаем их связанными между собой и пользователю не придется следить за тем, чтобы сумма их значений была равна 100%.

Чтобы показать как будет выглядеть окончательный результат, я сделал демонстрационную страничку.
Читать дальше

Строим редактируемые графики с помощью JavaScript

Владимир | | HTML, JavaScript, Web разработка.

И снова я продолжаю тему графиков 🙂

Кстати, в том, что от twitter’а есть польза я недавно убедился на личном опыте 🙂 . В ленте b1shop проскочила ссылка на очень интересный плагин для jQuery, предназначенный для создания графиков.

О том как нарисовать график с помощью JavaScript я писал в статье JavaScript библиотеки для создания графиков и в ней же сделал некоторые выводы.

В одном из них было утверждение о том, что JS библиотеки серьезно уступают Flash аналогам в плане функциональности. По большому счету это правильно… но библиотека jqPlot имеет ряд возможностей, которые, как я считал раньше доступны только во flash.

Кроме того, jqPlot позволяет подключать дополнительные плагины, точнее большинство функций реализовано с помощью плагинов. Таким образом, подключая только необходимые JS-файлы вы можете уменьшить размер страницы.

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

Пример создания такого графика я и хочу показать в этой статье.
Читать дальше