Mootools Beispiele

window.addEvent('domready', function() {
    //alert("The DOM is ready.");
       
//ändern des erste    
var myids = $$('div.erste');
 
//Schleife durch den Array 
myids.each(function(item, index){
 
  //einzelnes ITEM wird verändert 
  $(item).set({ 
    //Events werden gesetzt  
  'events': {
      'click': function(){ alert('red'+index); },
      'mouseout': function(){ document.getElementById('zweite'+index).style.display = 'none' },
      'mouseover': function(){ document.getElementById('zweite'+index).style.display = 'block' },     
    },    
    //ID wird ersetzt
    'id': 'erste'+index
  });     

});    
     
   
//ändern des zweite   
var myids = $$('div.zweite');
 
//Schleife durch den Array 
myids.each(function(item, index){
 
  //einzelnes ITEM wird verändert 
  $(item).set({
    //ID wird ersetzt
    'id': 'zweite'+index

  });
  $(item).setStyles({'display':'none'}); 
  
});   

    
}); 

window.addEvent('domready', function() {
    alert("The DOM is ready.");
});     
    
//ändern des div
var myids = $$('div.rv_info');

myids.each(function(item, index){
    alert(index+'div-alt' + " = " + item['id']);
});   
 
myids.each(function(item, index){
  $(item).set({
    'styles': {
      'font': '12px Arial',
      'color': 'blue',
      'border': '1px solid #f00'
    },
    'events': {
      'click': function(){ alert('click'); },
      'mouseover': function(){ this.addClass('over') }
    },
    //Any other property uses Element:setProperty.
    'id': 'red'+index
  });

alert(index+'div-neu' + " = " + item['id']);  
});    
     
//-------------------------------------------------------------------------------------//
//ändern des IMG Tags zuerst die Klasse dann die Funktion          
var myimg = $$('img.imgid');

myimg.each(function(item, index){
    alert(index+'img-alt' + " = " + item['id']);
});   
 
myimg.each(function(item, index){
  $(item).set({
    'events': {
      'click': function(){ alert('red'+index); },
      'mouseout': function(){ document.getElementById('red'+index).style.display = 'none' },
      'mouseover': function(){ document.getElementById('red'+index).style.display = 'block' },     
    },
    //Any other property uses Element:setProperty.
    'id': 'red2'+index
  });
alert(index+'img-neu' + " = " + item['id']);    
});    
     
$('testt').setStyles({'color':'red'}); 

$('ausblenden').set({  
    'events': {
        'click':function(){zu();}  
            }
           }); 


$('einblenden').set({  
    'events': {
        'click':function(){auf();}  
            }
           }); 

$('ausblenden').setStyle('display', 'none');

function auf(){
   $$('div#mehr-daten').setStyle('display', 'block');
   $('einblenden').setStyle('display', 'none');
   $('ausblenden').setStyle('display', 'block');
}

function zu(){
   $$('div#mehr-daten').setStyle('display', 'none');
   $('ausblenden').setStyle('display', 'none');
   $('einblenden').setStyle('display', 'block');
}

//ändern des div mit eindeutiger Nummer   
var myimage_team = $$('div.image_team');
myimage_team.each(function(item, index){
  $(item).set({
      'id': 'image_team'+index
  });
});    
 
//ändern des div mit eindeutiger Nummer   
var mytext_und_button = $$('div.text_und_button');
mytext_und_button.each(function(item, index){
  $(item).set({
      'id': 'text_und_button'+index
  });
  document.getElementById('text_und_button'+index).style.display = 'none'
});    

var mybutton_schliessen = $$('div.button_schliessen');
mybutton_schliessen.each(function(item, index){
  $(item).set({
      'id': 'button_schliessen'+index
  });
});        

var mybutton_schliessen_unten = $$('div.button_schliessen_unten');
mybutton_schliessen_unten.each(function(item, index){
  $(item).set({
      'id': 'button_schliessen_unten'+index
  });
});        

var mybutton_oeffnen= $$('div.button_oeffnen');
mybutton_oeffnen.each(function(item, index){
  $(item).set({
      'id': 'button_oeffnen'+index
  });
  document.getElementById('button_oeffnen'+index).style.display = 'block';
});         
     
//ändern des IMG Tags zuerst die Klasse dann die Funktion          
var mylinks = $$('a.link_mehr');