188 Одним из самых впечатляющих плагинов на MooTools, размещенных на Forge, до недавнего времени был плагин с названием (или Стена) от Марко Дель'Анна.
создает бесконечную сетку элементов, которая может быть захвачена и перемещена с помощью мыши.
Давайте мы вам покажем, как можно быстро интегрировать этот плагин.
HTML
В HTML коде всего два элемента: окно просмотра и сама стена:
|
1 2 3 |
<div id="viewport"> <div id="wall"></div> </div> |
Очень просто.
CSS
CSS стили должны быть настроены с учетом вашей стены. Свойства height и width вашего окна просмотра должны быть кратными высоте ваших блоков. Если вы не собираетесь так делать, то стена не будет так привлекательна, тем не менее все останется работоспособным.
|
1 2 3 |
#viewport { border:1px solid #ccc; width:450px; height:450px; position:relative; overflow:hidden; } #wall { z-index:1; } #wall img { width:150px; height:150px; display:block; float:left; } |
Размеры окна просмотра в примере составляют 450 x 450, с блоком (единичное изображение) размерности 150 x 150.
MooTools JavaScript
Все начинается с создания экземпляра стены, куда входят атрибуты width, height, rangex и rangey, отвечающие за размерность стены и ее элементов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Когда DOM готов window.addEvent("domready", function() { // Определение переменных, включая количество изображений и "текущий индекс" var numImages = 23, // 24 изображения, 0 индекс counter = 0; // Создание стены new Wall("wall", { width: 150, height: 150, rangex: [-150,150], rangey: [-150,150], callOnUpdate: function(items) { items.each(function(item) { // вставляем новое изображение и прячем его new Element("img", { src: (++counter) + ".jpg", styles: { opacity: 0 } }).inject(item.node).fade(1); // сбрасываем индекс, если он больше, чем количество изображений if(counter > numImages) counter = 1; }); } }).initWall(); }); |
Самым важным является метод callOnUpdate, работающий с индексом. Благодаря ему и вставляется новый элемент (в нашем случае изображение). Как только счетчик достигает максимального значения, индекс сбрасывается, и стена продолжает отрисовываться!
Эта работа Марка просто потрясающая. В нашем примере показан только основной функционал стены, но если вы зайдете на его , то увидите и дополнительные опции и примеры.
