Class, options, Element, inject, Fx.Morph

Simple class. Add div to page. Div has click event which animates it.

by andfinally

HTML

<div id="container">
</div>

JavaScript

var F = new Class({

        Implements: [Options, Events],

        options: {
            container: null,
            width: '250px',
            background: '#ccc'
        },

        initialize: function(options) {
            this.setOptions(options);
            this.addDemoDiv();
        },

        addDemoDiv: function() {
            var dDiv = new Element('div', {
                'class': 'myClass',
                html: 'Click me!',
                styles: {
                    padding: '20px',
                    border: '1px solid #999',
                    width: this.options.width,
                    background: this.options.background
                },
                events: {
                    click: this.animate
                }
            });
            
            if (!this.container) {
                dDiv.inject(document.body);
            } else {
                dDiv.inject(this.container);
            }
        },

        animate: function() {
            alert('Hello world');
        },
        
        myFX: new Fx.Morph(this.dDiv)

    });

    window.addEvent('domready', function() {

        var item = new F({container: 'container', background: '#ddd', width: '250px'});

    });