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

祝你好运。

Mootools类创作

1 个答案: