Ajax Russia : Аякс по-русски

Сегодня увидел один интересный CSS трюк для подсказок, или tooltips. Обычно их используют для ссылок, чтобы показать пользователю какую то дополнительную информацию, перед тем как он на ссылку нажмёт. Есть куча скриптов в интернете, с помощью которых можно сделать очень красивые подсказки, но Alen Grakalic придумал подсказки без джаваскрипта. Только с использованием CSS.

Идея очень простая, но эффективная. Вот маркап:

<a href=’#'>Заголовок ссылки <span>Подсказка</span></a>

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

Комментариев: 20

Я знал, что с CSS можно сделать многое, но такого не ожидал. Román Cortés’ нарисовал Гомера Симпсона полностью с использованием CSS. А Ned Batchelder анимировал процесс с помощью jQuery.

Нет комментариев

Все помнят Super Mario на джаваскрипте? Его создатель - Jacob Seidelin решил не останавливаться на достигнутом и написал онлайн версию Wolfendtein 3D с использованием Javascript, Canvas и немного аякса. Игра работает в Firefox 2.0.0.14, FF3 beta5, Safari 3.1.1 и Opera (9.27 и 9.50b).

Управление:
WASD или стрелки для движения.
x - открывать двери.
c - стрелять.

ИГРАТЬ

Нет комментариев

Все наверное не раз видели в интернете звёздочки для рейтингов. Это мог быть рейтинг для фоток, или рейтинг для статьи на блоге или ещё что нибудь. Сейчас расскажу как сделать такой рейтинг самому.

Использовать мы будем Starbox. Starbox это скрипт на базе Prototype и Scriptaculous, который позволяет добавлять рейтинги буквально парой строчек кода.

• Установка
  Starbox требует Prototype 1.6.0.2 и Scriptaculous 1.8.1. Скачайте и подгрузите их в HEAD вместе с starbox.js и starbox.css. Картинки для звёзд надо распаковать в папку images.
  PLAIN TEXT
  HTML:

  1. <script type='text/javascript' src='js/prototype.js'></script>
  2. <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
  3. <script type='text/javascript' src='js/starbox.js'></script>
  4. <link rel="stylesheet" type="text/css" href="css/starbox.css" />

• Использование
  Сделаем пустой DIV для рейтинга, и запустим Starbox скрипт.
  PLAIN TEXT
  HTML:

  1. <div id="rating"></div>
  2. <script type="text/javascript">
  3.   new Starbox('rating', 0);
  4. </script>

• Отправляем рейтинг на сервер
  У Starbox есть свой custom event - starbox:rated. Его мы будем ждать с помощью Prototype и посылать на сервер.
  PLAIN TEXT
  JavaScript:

  1. document.observe('starbox:rated', function(event){
  2.   function saveStar(event) {
  3.     new Ajax.Request('savestar.php', {
  4.       parameters: event.memo
  5.     });
  6.   }
  7. });

  event.memo содержит информацию на какую звезду кликнули и её рейтинг. Как обработать эти данные на сервере и записать в базу я объяснять не буду. Google вам в помощь

Скачать Starbox и почитать подробнее об использовании можно на сайте разработчика.

1 комментарий

Среди форматов обмена данными, AJAX программисты часто выделяют JSON (JavaScript Object Notation, "джейсн"), как альтернатива языку XML, а именно потому, что XML больше язык разметки, чем носитель данных. JSON в свою очередь, легкий, человеко-читабельный, текстовый формат для хранения и передачи простых структурированных данных, а так же более комплексных объектов (массивов). В этом уроке мы рассмотрим простой пример формирования данных в JSON средствами PHP, а так же их получение и представление, с помощью JavaScript. Кто еще не понял, это продолжение серии уроков "AJAX PHP поиск" (XML, Prototype).
Читать дальше

Комментариев: 7