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

Свежие новости из мира IT

Archive for September, 2007

Как добавить свои функции к любому DOM элементу

September 10th, 2007 | Category: Javascript, Prototype, Tutorial

Prototype LogoЯ уже писал ранее про эффекты при помощи Prototype и Script.aculo.us. Обычно, чтобы применить к элементу эффект, надо вызвать одну из функций класса Effect и как параметр передать id элемента, например:

PLAIN TEXT
JavaScript:
  1. Effect.Pulsate('element-id');

Может кому то этого и хватает, но мне нравится другой подход, а именно:

PLAIN TEXT
JavaScript:
  1. $('element-id').pulsate();

Читать такой код гораздо удобнее, и можно делать цепочку из функций, например $('element-id').pulsate().shake().fade(). Единственная проблема - таких функций у dom элементов нет и если попытаться их запустить, то браузер выдаст ошибку. Не беда. У Prototype есть удобный механизм для создания своих функций. В этом туториале я покажу как написать функцию shake().

Сначала надо добавить нужную функцию в хэш Element.Methods и затем вызвать Element.addMethods().

PLAIN TEXT
JavaScript:
  1. Element.Methods.shake = function(element)
  2. {
  3. new Effect.Shake(element);
  4. return element;
  5. }
  6. Element.addMethods();

Готово. Теперь можно вызывать функцию shake у любого DOM элемента. Попробуем на примере. Сделаем картинку и при нажатии на неё запустим shake().

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.         <title>Еxtend element methods with prototype</title>
  7.         <script src="prototype.js" type="text/javascript"></script>
  8.         <script src="effects.js" type="text/javascript"></script>
  9.         <script type="text/javascript" charset="utf-8">
  10.             // <![CDATA[
  11.                 Element.Methods.shake = function(element)
  12.                 {
  13.                     new Effect.Shake(element);
  14.                     return element;
  15.                 }
  16.                 Element.addMethods();
  17.                
  18.                 // ждём загрузки html
  19.                 document.observe('contentloaded', function()
  20.                 {
  21.                     // следим за кликом по картинке
  22.                     $('shake-this').observe('click', function()
  23.                     {
  24.                         // this это элемент по которому кликнули
  25.                         this.shake();
  26.                     })
  27.                 })
  28.                
  29.             // ]]>
  30.         </script>
  31.     </head>
  32.  
  33.     <body>
  34.         <img src="reflect-this.jpg" alt="test" id="shake-this" />
  35.     </body>
  36. </html>

Посмотреть результат можно по этому адресу: Туториал - Как добавить свои функции к любому DOM элементу.

No comments

Зеркальный джаваскрипт или делаем отражения без фотошопа

September 07th, 2007 | Category: Javascript, Дизайн

ReflectionПоследнее время стало модно использовать в дизайне вэб сайтов эффект отражения. У меня есть небольшие представления как подобный эффект сделать в фотошопе, но за фотошоп я берусь в крайнем случае, если дизайнер в отпуске. :)

Делать отражение мы будем при помощи джаваскрипта, и поможет нам в этом старый добрый Prototype, Script.aculo.us и скрипт Reflector. Преимущество данного способа это скорость. То есть допустим заказчик просит показать как будет выглядеть логотип сайта с отражением и времени на обработку картинки в фотошопе - нету. Ну и конечно большое преимущество, что не нужно вообще уметь работать с графикой, чтобы сделать этот эффект.

И так, приступим.
Read more

No comments

Microsoft Silverlight 1.0 - новый релиз

September 06th, 2007 | Category: Microsoft, Silverlight

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

Silverlight это новая платформа от Microsoft - что то наподобие Adobe Flash-a. С помошью Silverlight, Microsoft надеется составить конкуренцию Adobe в секторе богатых на медиа контент, интерактивных вэб сайтов. Silverlight, так же как и Flash умеет проигрывать видео и, в добавок к этому, позволяет управлять правами для их просмотра (DRM). На данный момент Silverlight работает в Internet Explorer, Firefox и Safari на Windows и Mac. Существует также Open Source проект Moonlight, что есть ни что иное как линукс версия Silverlight-a. Microsoft обещает всячески поддерживать разработку Moonlight, так что никто в обиде не останется.

Сможет ли Silverlight составить серьёзную конкуренцию флэшу - посмотрим. Но уже сейчас многие крупные интернет порталы начали использовать эту новую технологию: Entertainment Tonight, HSN, World Wrestling Entertainment, Netflix и многие другие.

1 comment

JavaScript dump(), дампим переменные

September 05th, 2007 | Category: Javascript

В поиске новостей, наткнулся на интересную статью. Её автору надоело, что у PHP есть такая классная функция print_r(), которая выдаёт информацию про структуру и содержимое переменной, а в джаваскрипте такого нет. Так на свет появилась функция dump().

PLAIN TEXT
JavaScript:
  1. function dump(arr,level) {
  2.     var dumped_text = "";
  3.     if(!level) level = 0;
  4.    
  5.     //The padding given at the beginning of the line.
  6.     var level_padding = "";
  7.     for(var j=0;j<level+1;j++) level_padding += "    ";
  8.    
  9.     if(typeof(arr) == 'object') { //Array/Hashes/Objects
  10.         for(var item in arr) {
  11.             var value = arr[item];
  12.            
  13.             if(typeof(value) == 'object') { //If it is an array,
  14.                 dumped_text += level_padding + "'" + item + "' ...\n";
  15.                 dumped_text += dump(value,level+1);
  16.             } else {
  17.                 dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
  18.             }
  19.         }
  20.     } else { //Stings/Chars/Numbers etc.
  21.         dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
  22.     }
  23.     return dumped_text;
  24. }

Теперь можно создать джаваскрипт объект или массив и сдампить их содержимое в довольно таки читабельном виде.

PLAIN TEXT
JavaScript:
  1. var arra = new Array("So long",'s',42,42.13,"Hello World");
  2. var assoc = {
  3.     "val"  : "New",
  4.     "number" : 8,
  5.     "theting" : arra
  6. };
  7.    
  8.     alert(dump(assoc));

Результатом этого скрипта будет:

PLAIN TEXT
JavaScript:
  1. 'val' => "New"
  2. 'number' => "8"
  3. 'theting' ...
  4.    '0' => "So long"
  5.    '1' => "s"
  6.    '2' => "42"
  7.    '3' => "42.13"
  8.    '4' => "Hello World"

Автор рекомендует показывать результат дампа при помощи alert() только если имеете дело с небольшими данными, иначе лучше сдампить содержимое в текстовое поле (textarea). От себя добавлю, что лучше сдампить в консоль от FireBug.

PLAIN TEXT
JavaScript:
  1. // вместо
  2. alert(dump(assoc));
  3.  
  4. // делайте
  5. console.log(dump(assoc));

1 comment

CSS Dock Menu - меню как на маке

September 04th, 2007 | Category: CSS, Javascript, Дизайн

CSS Dock MenuВсе наверное видели док меню на маке. Подобное меню есть и для линукса. Идея в принципе простая - есть список иконок и при наведении на иконку мышкой, иконка увеличивается в размере. Просто, но красиво.

Эту красоту мы сегодня перенесём с десктопа в онлайн и сделаем док меню при помощи CSS и джаваскрипта. А поможет нам в этом CSS Dock Menu. Готовый комплект можно скачать по этому адресу. В комплекте имеется 2 джаваскрипт файла jQuery и Interface, 1 CSS файл, несколько иконок и htc файл, который чинит глюки интернет эксплорера для png картинок.

Приступим.
Read more

No comments

« Previous Page — Next Page »