mooTools 모든 클래스 바인딩하기

Question

mooTools 사용에 익숙하지 않아 Prototype JS와 비슷합니다. 누구든지 이것을 모든 수업에 묶는 법을 말해 줄 수 있습니까?

// This grabs all the classes 
var mousy = $$('.hf-item-images'); 

// I don't think this is correct to apply this scroller to all the above classes 
var scroll = new Scroller(mousy, {area: 100, velocity: 1}); 

// Mousemove 
mousy.addEvent('mouseover', scroll.start.bind(scroll)); 
mousy.addEvent('mouseout', scroll.stop.bind(scroll)); 

Answer 1

당신은이 문제에 대해 더 스마트하게해야합니다. nnnn 항목을 반복하면 수신자 부담이 커질 수 있습니다. 각각에 이벤트 쌍을 첨부합니다. 그래서 같은

주어진 마크 업 :

<div id="container"> 
    <div class="hf-item-images">...</div> 
    <div class="hf-item-images">...</div> 
</div> 

당신은 부모에 물건을 위임 만 나중에 그것을 재사용, 필요한 요소 스크롤러 인스턴스를 인스턴스화 할 수 있습니다. 스크롤러 생성자가 하나의 요소를 exepts -`: [스크롤러 (HTTP : // Mootools의 = 새로운 스크롤러 (겁, {1 지역 : 100, 속도})`VAR 스크롤 :

var container = document.id('container'), 
    settings = { 
     area: 100, 
     velocity: 1 
    }; 

container.addEvents({ 
    'mouseover:relay(.hf-item-images)': function(e, el){ 
     var scroll = el.retrieve('scroller'); 
     if (!scroll){ 
      // create instance the first mouseenter and store for later 
      scroll = new Scroller(el, settings); 
      el.store('scroller', scroll); 
     } 
     scroll.start(); 
    }, 
    'mouseout:relay(.hf-item-images)': function(e, el){ 
     el.retrieve('scroller').stop(); 
    } 
});