Главная / Java Script / ООП / Mootools /

Random - случайное отображение контента

Вторник, 29 Июнь 2010

Работая над одним из проэктов, потребовалось реализовать отображение отзывов клиентов случайным образом, то-есть рандомно (Random). Не найдя в сети ничего стоящего и компактного, решился на написание специального плагина random.js, который содержит класс Random.

Данный класс позволяет реализовать следующее:

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

Для того что бы было понятней о чем идет речь, посмотрите Demo random.js

Как видно из примера случайным образом (random) выводится содержимое из двух контейнеров, причем эти контейнеры имеют разлиные типы. С лева это немаркированный список UL, а с права это контейнер DIV со вложенными в него дочерними контейнерами DIV, содержащими в себе текст.

Содержимое и структура HTML может быть различная но нужно придерживатся следующего правила :

В общем (основном) родительском контейнере, для перебора в случаном порядке, использовать контейнеры принадлежащие к одному и тому же типу (NodeType).

К примеру:

 
<ul id="exemple-0">
  <li></li>
  <li></li>
  <li></li>
</ul>

Или так:

 
<div id="example-1">
  <div></div>
  <div></div>
  <div></div>
</div>

Далее о том как подключить плагин random.js На web страницу, и применить его функцию случайного перебора (random) для конкретного блока с содержимым.

Делается это в три этапа

Подключаем библиотеку Mootools (данный плагин разработан под
mootools v 1.2.4, с более ранними версиями он работать не будет.)
Подключам сам плагин random.js
Создаем экземпляр нашего класса Random

Пример:

 
<script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="random.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
  new Random({
      container : $('example-0'),
      typeNode  : 'li',
      speed     : 5000,
      duration  : 700
  });
});
</script>

Ну и сам HTML код:

 
<ul id="exemple-0">
  <li></li>
  <li></li>
  <li></li>
</ul>

Осталось сказать о создании экземпляра класса Random и передачи ему параметров (настроек). Ну во первых, экземпляров классов вы можите создать сколько угодно и для каждого указать индивидуальные значения параметров.

Ну например это вы можите увидеть здесь Demo random.js

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

И так параметры по порядку:

container - обязательный параметр, указывает родительский контейнер из которого будут выводится в случайном порядке (рандомно) его дочерние элементы с содержимым
typeNode - так же обязательный параметр, указывающий какого типа обьекты DOM должны использоватся для случайного отображения из родительского контейнера. Это сделано с той целью, что бы в родительском контейнере имели возможность находится иные объекты (eузлы DOM) и не использоватся плагином для случайного отображения.
speed - продолжительность периода в милисекундах между случайными показами содержимого
opacity - по умолчанию равно 1 (то есть включено), отключить можно указав в значении параметра 0 (ноль)
duration - скорость смены прозрачности элемента (opacity) с нулевого значения до единицы

Demo

Download

PS. И не забудьте подписаться на ленту новостей RSS

Метки:

Random - случайное отображение контента

Похожие статьи:

Комментарии

Добавить комментарий