Категории: HTML

jQuery плагин: создаём виджет для сообщений из списков twitter’а

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

jquery twitter widget

Сегодня вряд ли у кого-то вызывает сомнения популярность твиттера, и многие блоггеры размещают в сайдбаре ленту сообщений с этого сервиса. Вообще, это хорошая идея, особенно если тематика сообщений в твиттере совпадает с тематикой блога, но её можно развить.

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

Сделать это несложно. Добавляем подходящие twitter-ленты в отдельный список и публикуем его ленту. В этой статье я покажу, как создать такой виджет с помощью JavaScript.

Сразу даю ссылки на пример и архив с исходниками.
Читать дальше

WordPress: создаем виджет для показа картинок с Flickr

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

Сегодня я расскажу о создании виджета для одной из самых популярных на сегодняшний день CMS – WordPress.

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

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

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

Единственное условие – тема должна быть «widget ready», т.е. поддерживать виджеты. Но добавить эту поддержку несложно. Подробная инструкция находится здесь. Чтобы не усложнять пример, я буду считать, что используется дефолтная тема.

Сформулируем задачу.

Допустим, нам нужен виджет, который будет находить по заданным тегам на сервесе flickr картинки и показывать их. При этом администратор должен иметь возможность задать теги, количество картинок и их размер.
Читать дальше

Управление 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
Читать дальше

960 Grid System: зачем нужны CSS фреймворки

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

Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.

Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.

Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.
Читать дальше

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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