Создание класса Mootools

Question

У меня есть этот встроенный код, жестко запрограммированный на странице, но я хочу иметь возможность превратить его в класс mootools?Я следовал за примерами в блоге david.walsh, но я все еще не уверенизображение и текст внутри всплывающего окна):

var li = new Element('li', {'class':'button pngscale', 'id':'item_' + i});
var container = new Element('div', {'class':'button-container pngscale'}).inject(li);

switch (d.type) {
case 'correct':
li.set('imgCatDOG.png'].join('') );
new Element ('h1', {'class':'text'}).set('text', d.content).inject(li);
new Element ('div',{'class': 'text2', 'imgBGpopup }).inject(li);
break; 

Это json, из которого подается контент:

var popup = [
{
'type': 'correct',
'content': 'that is right!'

}

Answer 1

ОЧЕНЬ сложно сказать, что вы делаете без какого-либо контекста и только фрагментов. даже не знаю, для чего предназначен класс, всплывающее окно неоднозначно и может означать что угодно.

также, если вы говорите, что следовали учебному пособию для создания класса, где код, который вы написали, который не удался для вас?

в самом простом виде, вот каркас, чтобы начать:

var myPopup = new Class({

    // mixins to use setOptions merge and class events
    Implements: [Options, Events],

    options: {
        // default options here
        maxPerPage: 4,
        view: null,
        items: []
    },

    initialize: function(options) {
        // constructor
        this.setOptions(options);
        this.items = this.options.items;
        this.view = document.id(this.options.view);

        if (!this.view)
            return; // no element to work with

        this.addPopups();
    },

    addPopups: function() {
        this.items.each(function(el, i) {
            if (i % this.options.maxPerPage === 0) {
                this.page = new Element("div.page", {
                    tween: {
                        unit:'%',
                        duration:300,
                        transition:Fx.
                        Transitions.Quart.easeIn
                    }
                });
                new Element("ul.nav-buttons").inject(this.page);
                this.page.inject(this.view);

                // etc etc.
            }
        }, this); // keep it bound to class instance
    }

});

должно дать вам достаточно, чтобы развить.

возможно, вам сначала пригодится чтение моих уроков по созданию класса mootools и его расширению:

Урок 1: создайте свой первый класс mootools - всплывающие подсказки. http://fragged.org/tutorial-write-a-small-but-flexible-mootools-tips-class_1293.html

Урок 2. Создание класса слайдера содержимого и его расширение: http://fragged.org/tutorial-write-a-small-content-slider-class-in-mootools-and-extend-it_1321.html

и, наконец, в случае, если вы создаете всплывающее окно модального окна: http://fragged.org/the-simple-modal-window-via-mootools_232.html - это не учебник, а настоящий плагин, который я выпустил, но он может дать вам некоторые идеи относительно того, как создавать методы класса, использовать события и как его расширять впоследствии.

удачи.