Mootools 类创建

Question

我有这个内联代码硬编码到页面中，但我希望能够将它变成一个 mootools 类？我已经按照 david.walsh 博客中的示例进行了操作，但我仍然感到困惑。

代码的第一部分创建了一个弹出窗口：

items.each(function (d, i) {
if (i % maxPerPage === 0) {
// create new page
page = new Element('div', {'class':'page'}).inject(view);
navButtons = new Element('ul', {'class':'nav-buttons'}).inject(page);
page.set('tween', {unit:'%',duration:300,transition:Fx.Transitions.Quart.easeIn});

if (i === 0) {
view.set('currentPage', 0);

switch (d.type) {
case 'correct':
var overlayWrapper = new Element('div', {'id':'overlay-wrapper'}),
overlayContent = new Element('div', {'id':'overlay-content'}).inject(overlayWrapper, 'top'),
overlayCheck = new Element('div', {'id':'close-overlay', 'class':'pngscale tween ', 'fku_bg':'trophies/icons/check-100.png'}).inject(view, 'bottom');

overlayWrapper.inject(mc, 'before');
break; 

第二部分创建了弹出内容（背景图片和弹出内容中的文本）：

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 - 这不是一个教程，而是我发布的一个实际插件，但它可能会给你一些关于如何构建你的类方法、使用事件以及之后如何扩展它的想法。

祝你好运。