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

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

Archive for the 'Prototype' Category

Подгружаем картинки с Prototype

June 30th, 2008 | Category: CSS, Javascript, Prototype

Все читали статью Подгружаем картинки с jQuery? Довольно таки забавный скрипт. Захотел вставить его на свою страницу и вспомнил, что на ней совсем не jQuery, а Prototype. Что же делать? А просто взять и переписать скрипт для Prototype.

Работает новый скрипт точно также. Парсит CSS стили на странице, достаёт из них все картинки и подгружает их. Единственное что я не стал делать, это систему оповещения о статусе загрузки. Мне это не надо, но сделать это не сложно. Сравните мой код с плагином jQuery и будет ясно куда этот вставить.

PLAIN TEXT
JavaScript:
  1. var AjaxRussia = {};
  2. AjaxRussia.ImagePreloader = Class.create({
  3.  
  4.   initialize: function(){
  5.  
  6.     $A(document.styleSheets).each(function(sheet){
  7.       var cssPile = '';
  8.       var csshref = (sheet.href) ? sheet.href : 'window.location.href';
  9.       var baseURLarr = csshref.split('/');
  10.       baseURLarr.pop();
  11.       var baseURL = baseURLarr.join('/');
  12.       if (!baseURL.blank())
  13.         baseURL += '/';
  14.       if (sheet.cssRules) {
  15.         var thisSheetRules = sheet.cssRules;
  16.         $A(thisSheetRules).each(function(rule){
  17.           cssPile += rule.cssText;
  18.         });
  19.       }
  20.       else {
  21.         cssPile += sheet.cssText;
  22.       }
  23.      
  24.       var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);
  25.       if (imgUrls != null && imgUrls.length> 0 && imgUrls != '') {
  26.         $A(imgUrls).each(function(url){
  27.           var image = new Image();
  28.           image.src = (url.charAt(0) == '/' || url.match('http://')) ? url : baseURL + url;
  29.         });
  30.       }
  31.     });
  32.   }
  33. });

Использовать скрипт просто:

PLAIN TEXT
JavaScript:
  1. new AjaxRussia.ImagePreloader();

Только не надо этот код просто так писать на страницу. Иначе при каждой загрузке страницы CSS будет заново парситься. Я наверное буду вызывать AjaxRussia.ImagePreloader() только если у пользователя нету определённого куки. Ну а после работы AjaxRussia.ImagePreloader() соответственно эту куки сажать.

8 comments

Starbox - рейтинг на Prototype

May 01st, 2008 | Category: Ajax, Javascript, Prototype, Tutorial

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

Использовать мы будем 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 comment

AJAX PHP поиск - часть 2: Prototype

April 28th, 2008 | Category: Ajax, PHP, Prototype, Tutorial

AJAX PHP поиск - часть 2: PrototypeВ первой части урока мы рассмотрели организацию поиска по базе данных MySQL средствами AJAX, PHP и XML. Теперь я хочу показать этот же пример, только с использованием библиотеки prototype. Глобальных изменений не произошло, внешне работает абсолютно одинаково. В конце урока попытаемся подвести небольшую сравнительную характеристику двух этих методов.
Read more

16 comments

Краткое введение в prototype

March 20th, 2008 | Category: Ajax, PHP, Prototype, Tutorial

protoflowПо просьбам наших читателей - what the hell is prototype? Библиотека (фреймворк) prototype позволяет вам легко, быстро и безопасно совершать AJAX запросы и не только. Библиотека расширяет методы DOM (Data Object Model), упрощая их использование. А самое главное то, что авторы библиотеки уже позаботились о браузеро-независимости (cross-browser), и нам достается всё самое сладкое!
Read more

11 comments

Scriptaculous и плавный скроллинг

March 18th, 2008 | Category: Prototype, Script.aculo.us, Tutorial

script.aculo.us - web 2.0 javascriptСегодня покажу как сделать на странице скроллинг. Но не обычный, когда браузер просто прыгает на нужное место, а плавный скроллинг. Для этого скачаем и подгрузим на странице Prototype и Scriptaculous.



PLAIN TEXT
HTML:
  1. <script src="/javascripts/prototype.js" type="text/javascript"></script>
  2. <script src="/javascripts/effects.js" type="text/javascript"></script>

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

PLAIN TEXT
HTML:
  1. <div id="scroll_1"></div>

И теперь сделаем линк, при нажатии которого будем скроллить.

PLAIN TEXT
HTML:
  1. <a href="#scroll_1" id="scroll_link">Scroll me</a>
  2. <script type="text/javascript">
  3.   $('scroll_link').observe('click', function(e){
  4.     new Effect.ScrollTo('scroll_1');
  5.     e.stop();
  6.   });
  7. </script>



Чтобы посмотреть скрипт в деле - кликать СЮДА.

Подробнее про ScrollTo можно почитать тут.

4 comments

Next Page »