mootools_test01

test style change and inline labels mootools

by spacexplorer

HTML

<body>
    <div id="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
    </div>
    
    <div id="box"></div>
    
    
    <form>
        <label for="myInput">myInputLabel</label>
        <input id="myInput" name="myInput" />
        
        
    </form>
    
</body>

CSS

a
{
    display: block;
    float: left;
    border: 1px solid #000;
    width: 100px;
    height: 20px; 
    padding: 2px;
    
}

body
{
    background-color: orange;   
    margin: 0;
    padding: 0;
    
}


.red
{
    
    border: 2px solid red; 
    padding: 1px;
}

.blue
{
    
    border: 2px solid blue;    
    padding: 1px;
}


#box

{
    
    width: 20px;
    height: 20px;
    background-color: blue;   
    
}


.yellow
{
    
    border: 2px solid #ff0;
    padding: 1px;
}




#nav
{
    margin: 0px auto;   
    
}


form
{
 width: 300px;
 display: block;
 float: left;   
    
    
}

JavaScript

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

    //if(!test)alert("not defined");
    // alert(this);
    
    
    
    
    
    $$('lable + input').setStyle('border-color','red');
    
    

    
    
    
    var boxAnimation = new Fx.Tween($('box'));


    
    
    var $myDiv = new Element('div', {
        
        
        
    });




    var $myImg = new Element('img', {
        src: '/foo.jpg',
        alt: 'this is foo',
        //class is a reserved word in JS,
        //so we must use quotes
        'class': 'fooClass',
        //In addition to basic attributes,
        //you can declare special ones:
        events: {
            click: function() {
                alert('click!');
            }
        },
        styles: {
            border: '1px solid blue',
            marginTop: '10px',
            float: 'left',
            width: '20px',
            height: '20px',
            display: 'block'
        }
    });


    //not working
    $$('body')[0].grab($myImg);
    //document.id('body').grab($myImg);


    // $$('a + a').setStyle('visibility', 'hidden');
    // $$('a').each(function(a){a.addClass('red');});
    //$$('a')[0]
    //myElement.addEvent(eventType, function);
    $$('a')[0].addEvent('click', function() {

        $startValue = this.get('html');

        // if (this.get('class') == 'red')
        if (this.hasClass('red')) {
            //this.set('class','');
            //this.erase('class');
            this.removeClass('red');

            //myElement.inject(newParentElement);
        } else {

            //this.setStyle('border-color','red');
            this.set('class', 'red');

            this.get('height', this.height - 2);

            this.grab(new element('div'));

            //myElement.inject(newParentElement);
            this.set('html', 'aaa');

            $('body').grab($myImg);

            // $('body').grab(this);
        }

        //alert();
    });





    $$('a')[1].addEvents({
        click: function() {

...