Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make functions that apply to all instances of a class?

    Currently, I have three sub-menus on my page, all of which are defined in the CSS like so (just the numbers differ):
    Code:
    #subMenu1 {
    	width: 890px;
    	height: 25px;
    	background-color: #50e0d4;}
    I am also using mootools, specifically the slider module (www.mootools.net).
    To make one menu slide in, and the others slide out, I have done this in the HTML:
    Code:
    <a href="#" onclick="getMenu1()">Menu 1!</a>
    <script>var Slider1 = new Fx.Slide('subMenu1', {duration: 500});
    var Slider2 = new Fx.Slide('subMenu2', {duration: 500});
    var Slider3 = new Fx.Slide('subMenu3', {duration: 500});</script>
    and this in the .js file:
    Code:
    function getMenu1() {
    Slider2.slideOut();
    Slider3.slideOut();
    setTimeout("Slider1.slideIn()", 600);
    return false;
    }
    I want to cut down on the code, but I dont know how. A friend of mine said to make a generic class and use $$('.mysubmenuclass') to create a generic slider function, but i have NO idea how to do that. Help?

  • #2
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    Am I correct in thinking MooTools is built on top of Prototype? If not then the following might need some changes, otherwise it will do what you want:
    Code:
    var Behaviour = { 
            rulesets: [], 
            add: function(rules) { 
                    Behaviour.rulesets.push(rules); 
            }, 
            go: function() { 
                    Behaviour.rulesets.each(function(ruleset) { 
                            $H(ruleset).each(function(pair) { 
                                    $$(pair.key).each(function(node) { 
                                            pair.value($(node)); 
                                    }); 
                            }); 
                    }); 
            }
    }
    it allows you to specify, in a similar way to CSS for styles, 'behaviour' to be applied to elements based on a selector.
    In your example, it would make sense to have some kind of global 'store' for sliders, makes it a bit more flexible should you, for example, add or remove menus in the future, something like:
    Code:
    var SliderStore = [];
    
    var rules = {
      '.menu': function(element) {
        SliderStore.push(new Fx.Slide(element,{duration:500});
        element.observe('click',function(e) {
          Event.stop(e); //to stop the default click-behaviour
          SliderStore.each(function(slider) {
            if(slider.element!=this) { //if it's not the slider attached to this particular element, then get rid of it, the .element property is a guess...but probably available?
              slider.slideOut();
            }
            else {
              setTimeout(function() { slider.slideIn(); },600);
            }
          });
        });
      }
    
    };
    Behaviour.add(myrules);
    
    Event.observe('window','load',function() {
        Behaviour.go();
    });
    If these sliders are the only things you're using, then what I've given might be over-kill, but it makes javascript event-handling quite a lot tidier. If I'm wrong about MooTools and Prototype, then the above will probably not work at all...
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •