CTAPbIu_MABP's BLOG

В пятницу лазил по сети и наткнулся на сайте KuraFire на один весьма забавный проект под названием FACE. Решил его поставить себе и поэкспериментировать с ним. На первый взгляд показалось, что все очень красиво и здорово, но при внимательном рассмотрении нашлась пара серьезных недостатков.

Самый серьезный из них то, что два таких рисунка нельзя поставить на одну страницу. Нет, я дочитал до конца и видел, как автор предлагает в первом диве для анимации указать все id дивов, которые будут анимированы, но этот способ не в счет, а что если я захочу создать блок на лету или прицепить анимацию на кнопку?! Тем более что таким образом анимация работает по очереди, сначала на первом, потом на втором элементе, а не на всех одновременно. Я пробовал переписать код на объектно-ориентированный, но решил, что дешевле написать новый из-за особенностей архитектуры скрипта. Я люблю описывать объект через прототип, и в очередной раз столкнулся с тем, что не могу вызвать метод объекта (из самого объекта используя this) по таймауту.

Вторым недостатком, на мой взгляд, было то, что в примере автор показывает квадрат, который заполняется спирально, а в версии для скачивания он заполняется рядами. Мне тоже захотелось спиралью (а еще столбиками), открыв CSS, я увидел, что каждый квадрат отпозиционирован отдельно. Вообщем, в этом ничего страшного нет, если большой квадрат состоит из 25-49 маленьких, а если, например, из 100? CSS разрастается в геометрической прогрессии, создавая неудобство разработчику и пользователю.

Это натолкнуло меня на написание плагина под jQuery, который бы обладал всеми вышеперечисленными свойствами, то есть быстрота создания, компактность, скорость, программируемость порядка заполнения. ВОТ ОН:

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

$.face.init(5,5,400,400,6,'#face1');
$.face.resort([0,1,2,3,4,9,14,19,24,23,22,21,20,15,10,5,6,7,8,13,18,17,16,11,12],'#face1');
$.face.start(50,'#face1');

В первой строчке происходит инициализация объекта, задаются количество столбцов и строк внутри большого квадрата, ширина и высота этого квадрата и id елемента, в котором будет построена сетка.

Во второй задается порядок, в котором будет происходить анимация, в данном конкретном случае - по спирали (по часовой стрелке). Второй параметр нужен, если на странице находиться более одного квадрата.

Третья строчка, собственно, запускает анимацию, эту функцию можно прикрепить, например, к кнопке. Первый параметр - скорость заполнения при загрузке (оптимально от 25 до 100), второй - id

Теперь я приведу код собственно самого плагина:

jQuery.extend({
    face : {
        id : null,
        li : [],
        sort : [],
        init : function (cols,rows,width,height,border,id) {
            this.id = id || '#face';
            this.li[this.id] = [];
            for(var i=0,j=cols*rows,l=0,t=0,w=width/cols-border/2,h=height/rows-border/2;i<j;i++,l=i%cols?l+w+border/2:0,t+=i%cols?0:h+border/2)
                this.li[this.id][i] = '<li style="top:'+t+'px;left:'+l+'px;width:'+w+'px;height:'+h+'px;"><div style="width:'+(w-2)+'px;height:'+(h-2)+'px;"><div><div></div></div></div></li>';
            this.sort[id] = this.li[id];
        },
        resort : function (array, id) {
            jQuery(id).empty();
            var n = [];
            id = id || this.id;
              for(var key in array)
                n[key] = this.li[id][array[key]];
            this.sort[id] = n;
        },
        start : function (speed,id)
        {
            id = id || this.id;
            jQuery(id).append('<ul>'+this.sort[id].toString().replace(/,/g,'')+'</ul>');
            jQuery(id+' ul li div').mouseover(function(){jQuery('div',this).animate({opacity:1},'slow','',function(){jQuery(this).animate({opacity:0},'fast');});});
            jQuery.each(jQuery(id+' ul li div div'),function(i,e){setTimeout(function(){jQuery(e).animate({opacity:0},'normal')},i*(speed||50))});
        }
    }
});

Свойство id хранит в себе идентификатор последнего запущенного квадрата.

Свойство li хранит список всех маленьких квадратов в первоначальном порядке.

Свойство sort хранит уже отсортированный список маленьких квадратов.

Метод init производит все первоначальные расчеты размеров и позиций маленьких квадратов, образующих сетку.

Метод resort сортирует маленькие квадраты, в произвольном порядке.

Метод start запускает анимацию и добавляет анимацию по наведению мыши.

Если кому-то понравился этот плагин - пользуйтесь на здоровье как вам угодно, если нет - ... ну что ж жаль, я старался.