Архивы за месяц: мая 2009

Создаём виджет для хранения заметок. Часть 2.

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

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

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

Думаю, очевидно, что для виджета отправка и получение данных должна выполняться с помощью AJAX запросов. Ведь вряд ли кому-то понравиться, если каждая операция с виджетом будет приводить к перезагрузке всей страницы.

Поэтому основную часть клиентской части у нас будет занимать JavaScript код. А чтобы его сократить мы используем библиотеку jQuery с несколькими плагинами.

Кстати, есть демонстрационная страничка с этим виджетом.

Demo

И, как и обещал, выкладываю архив с исходниками.

Source

Прежде всего, рассмотрим разметку страницы (index.html).
Читать дальше

Создаём виджет для хранения заметок. Часть 1.

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

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

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

Код виджета не сложный, но требует использования сразу нескольких технологий: PHP и MySQL на стороне сервера, HTML, CSS, JavaScript – на стороне клиента, поэтому я разбил статью на 2 части. В первой мы рассмотрим серверную часть кода, во второй – клиентскую.

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

Demo

Если задача ясна, приступим к делу.

Начнем с базы данных.
Читать дальше

jQuery Grid Plugin — «продвинутое» решение для создания таблиц

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

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

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

От вас требуется настроить плагин и передавать ему данные. Звучит не сложно, но как всегда есть нюансы.

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

Стикер. Создаем плагин для jQuery.

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

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

Итак, задача такая. Нам нужно создать стикер, который пользователь сможет свободно перемещать по странице. Но если пользователь оставит стикер около края страницы, то он должен плавно «прилипнуть» к этому краю. Сам стикер может представлять собой что угодно, для этого примера я использовал обычный div с картинкой.

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

Demo
Source

Теперь перейдем к реализации.
Читать дальше

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

Владимир | | Hosting, Разное.

Статья «Как самостоятельно и бесплатно зарегистрировать домен» до сих пор остается самой популярной в этом блоге, несмотря на то, что прошел 1 год и 9 месяцев с момента её публикации.

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

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

Как поймать спамеров в twitter’е

Владимир | | Разное.

Сегодня будет небольшой оффтопик. Мне просто хочется обсудить twitter и его проблемы 🙂

Начну из далека. Многие блоггеры (и не только они) уже зарегистрировались в этом сервисе и пользуются им. Только пользуются по-разному.

Я, например, первый зарегистрированный аккаунт забросил через пару дней. Не понятно было, что вообще с ним делать. Но потом шум вокруг сервиса нарастал, и я решил зарегистрировать ещё один аккаунт, но исключительно как дополнение к этому блогу. Т.е. публиковаться будут ссылки и короткие сообщения, для которых не хочется создавать отдельный пост в блоге. Мне немного повезло, имя (simplecoding) оказалось свободным.

Но вернемся к теме поста, в смысле к спамерам.
Читать дальше

Отправка данных в формате JSON с помощью JavaScript и jQuery

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

В прошлых статьях я рассказывал и приводил примеры получения и обработки данных в формате JSON на стороне клиента. Но примера отправки данных серверу в этом формате не было. Сегодня я попробую исправить это упущение.

Прежде всего, кратко напомню принцип передачи данных в JSON формате от сервера браузеру.

1) Серверный (PHP) скрипт формирует массив с данными, преобразует их в формат JSON (используется функция json_encode) и отправляет браузеру.

2) На стороне браузера JS скрипт обрабатывает полученные данные. Тут для преобразования данных используется eval.

То есть все преобразования данных сводятся к использованию двух функций.

Отправка данных серверу немного сложнее.
Читать дальше

Делаем радио кнопки удобными

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

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

В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (radio buttons) за счет правильной HTML разметки и нескольких CSS стилей.

Обратите внимание. Применение этих советов никоим образом не сказывается на работоспособности формы и не изменяет отправляемые данные.

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