Прикрепление событий к классам в MooTools? - PullRequest
Новая
       22

Прикрепление событий к классам в MooTools?

0 голосов
/ 03 апреля 2011

Я довольно новичок в MooTools, и я немного запутался в том, как его использовать, и хотел бы получить несколько указателей.

Например, в моем приложении, когда инициализируется объект одного из моих классовсоздает элемент div.Этот div затем помещается в другой div.Пользователь может создать несколько экземпляров класса.Теперь я хотел бы знать, как добавить события к этому объекту, чтобы он мог реагировать на частые щелчки, двойные щелчки и так далее.Ниже приведен класс, который я создал: 

var new_Div = new Class({
    initialize: function(name)
    {
        this.newDiv = name + "_div";
        this.newDiv = document.createElement('div');
        this.newDiv.id = this.classDiv;
        this.newDiv.style.width = "200px";
        this.newDiv.style.height = "160px";
        this.newDiv.style.border = "thin red dashed";
        document.body.appendChild(this.newDiv);
    }
});

Div созданы и названы пользователем, взяв туда ввод из текстового поля для идентификатора divs.Сгенерированный div затем вставляется в тело с помощью этого кода, который вызывает функцию initialize () и создает div: 

var divName= document.getElementById("newdiv_Input").value;
window[divName+ '_var'] = new new_Div(divName);

Это позволяет создавать объекты одного типа с разными именами.

Теперь меня смущает то, как прикреплять события к классу.Например, как я могу создать событие, которое позволяет щелкнуть левой кнопкой мыши по каждому элементу div и запустить функцию, эта проблема присоединения событий к классу действительно смутила меня.Кто-нибудь может мне помочь?

Спасибо за любые отзывы.

Ответы [ 2 ]

1 голос
/ 04 апреля 2011

это действительно зависит от того, что вы подразумеваете под событиями для классов. Вы имеете в виду, что класс должен запускать события для экземпляра (через миксин Events) или иметь события запуска Element для класса / прикреплять события к узлам dom по классу. Имея это в виду, вот пример, который делает и то, и другое: устанавливает универсальный обработчик событий через DOM внутри класса, а также заставляет класс уведомлять экземпляр о щелчке, чтобы вы могли переопределить функциональность из вашего экземпляра экземпляра.

по отношению к вашему сообщению в другой теме: 

var new_Div = new Class({

    // use Options and Events mixins 
    Implements: [Options, Events],

    // define defaults that you can override 
    options: {
        parentNode: document.body, // can point to your input
        injectPosition: "top", // bottom, after (to show after input), before
        width: 200,
        height: 160,
        border: "1px dashed red",
        html: ""
    },

    initialize: function(name, options) {

        // set defaults
        this.setOptions(options);

        // where to inject?
        this.parent = document.id(this.options.parentNode);
        if(!this.parent)
            return; // does not exist - domready?

        // create the element
        this.element = new Element("div", {
            id: name + "_div",
            html: this.options.html,
            styles: {
                width: this.options.width,
                height: this.options.height,
                border: this.options.border
            },
            events: {
                click: this.handleClick.bind(this)
            }
        });

        // inject into dom at the parent node and position
        this.element.inject(this.parent, this.options.injectPosition);
    },

    handleClick: function(event) {
        // called when clicked on the div
        if (event && event.stop)
            event.stop();

        // you can do stuff here
        alert("hi from element event handler");

        // or delegate it to the instance like so:
        this.fireEvent("clicked", event || {});
    }
});

new new_Div("test", {
    html: "hello",
    onClicked: function() {
        // handle the custom "clicked" event on the instance
        alert("hi from class instance event");
    }
});

здесь это работает: http://jsfiddle.net/dimitar/cgDrG/

и, наконец, рассмотрите возможность использования toElement , который позволяет вам рассматривать экземпляр класса как элемент dom и экспортировать созданный вами div - рабочий пример, полезный для форм и т. Д. 

var new_Div = new Class({

    // use Options and Events mixins
    Implements: [Options, Events],

    // define defaults that you can override
    options: {
        width: 200,
        height: 160,
        border: "1px dashed red",
        html: ""
    },

    initialize: function(name, options) {

        // set defaults
        this.setOptions(options);

        // create the element
        this.element = new Element("div", {
            id: name + "_div",
            html: this.options.html,
            styles: {
                width: this.options.width,
                height: this.options.height,
                border: this.options.border
            },
            events: {
                click: this.handleClick.bind(this)
            }
        });
    },

    handleClick: function(event) {
        // called when clicked on the div
        if (event && event.stop) event.stop();

        // you can do stuff here
        alert("hi from element event handler");

        // or delegate it to the instance like so:
        this.fireEvent("clicked", event || {});
    },

    toElement: function() { 
        // the class will return this.element if called through $
        return this.element || null;
    }
});

var foo = new new_Div("test", {
    html: "hello",
    onClicked: function() {
        // handle the custom "clicked" event on the instance
        alert("hi from class instance event");
    }
});

// inject this.element through toElement into dom. 
$(foo).inject(document.id("your_name"), "after");

это правильный синтаксис для использования в mootools, ваши строки не совсем хорошие практики. Кроме того, это ваш второй вопрос за столько дней. рассмотрите возможность сделать вашу учетную запись постоянной и принять некоторые ответы.

вот практический пример с мини-классом валидатора, который проверяет наличие обязательных полей и запускает экземпляр класса поля ошибок, если он не удовлетворен: http://jsfiddle.net/dimitar/cgDrG/5/

0 голосов
/ 03 апреля 2011

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

var new_Div = new Class({
  initialize: function(name)
  {
      this.newDiv = name + "_div";
      this.newDiv = document.createElement('div');
      this.newDiv.id = this.classDiv;
      this.newDiv.style.width = "200px";
      this.newDiv.style.height = "160px";
      this.newDiv.style.border = "thin red dashed";
      document.body.appendChild(this.newDiv);

      // Using the element selector
      // Keep in mind you can only do this once the element has been
      // added to the document body and you can actually see it on the 
      // web page.
      $(this.newDiv.id).addEvents({
        click: function () {
          alert('Put whatever you want to do on click here...');
        }
      });
  }
});

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

...