Classe mootools pour Slider

[ced1870]

j'ai fait une petite classe mootools que je viens partager ici. Elle permet simplement de faire coulisser un conteneur dans un autre avec 2 boutons.

http://jsfiddle.net/ced1870/FRPgY/

Voici le code de la classe

var stylesSliderCK = new Class({
    options: {
        innerBlocksClass: 'stylescontrolcontinnerfloat',
        leftButtonClass: 'slideLeftButton',
        rightButtonClass: 'slideRightButton'
    },

    initialize: function(el, options) {
        var el = document.id(el); if (!el) return;
        this.setOptions(options);
        this.leftButton = el.getParent().getElement('.'+this.options.leftButtonClass); if (!this.leftButton) return;
        this.rightButton = el.getParent().getElement('.'+this.options.rightButtonClass); if (!this.rightButton) return;
        this.innerBlocks = el.getElements('.'+this.options.innerBlocksClass); if (!this.innerBlocks) return;
        
        el.setProperty('width',250*this.innerBlocks.length);

        this.rightButton.addEvent('click', function(event) {
            event = new Event(event).stop();
            if (-el.getProperty('width') < el.getProperty('margin-left')-750) {
                el.tween('margin-left', el.getProperty('margin-left')-250);
                el.setProperty('margin-left',el.getProperty('margin-left')-250);
            }
        });
        
        this.leftButton.addEvent('click', function(event) {
            event = new Event(event).stop();
            if (el.getProperty('margin-left') < 0) {
                el.tween('margin-left', parseInt(el.getProperty('margin-left'))+250);
                el.setProperty('margin-left',parseInt(el.getProperty('margin-left'))+250);
            }
        });
    }
});
stylesSliderCK.implement(new Options);




new stylesSliderCK('scrolltest'); 

Extrait HTML

<div id="css3controlgeneralcont">
                                                        <div class="slideLeftButton">Click to slide left</div>
                                                        <div class="slideRightButton">Click to slide right</div>
                                                        <div class="stylescontrolcontinner" id="scrolltest">
                                                            <div class="stylescontrolcontinnerfloat">

Extrait CSS :

#css3controlgeneralcont {
    height: 330px;
    width: 770px;
    overflow: hidden;
    float: left;
    margin : 10px;

    position: absolute;
    border: 1px solid #fff;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}

.stylescontrolcontinner {
    height: 330px;
}

.stylescontrolcontinnerfloat {
    float: left;
    width: 250px;
    height: 330px;
}

Voilà, si ça peut servir

[cavo789]

Re : Classe mootools pour Slider

Merci pour le partage monsieur

Pas d'utilité immédiate...

Comme je l'ai déjà mentionné à Ghazal, j'adore les partage jsfiddle parce que cela permet directement de voir à quoi sert le source et de jouer avec.

[ced1870]

Re : Classe mootools pour Slider

Comme je l'ai déjà mentionné à Ghazal, j'adore les partage jsfiddle parce que cela permet directement de voir à quoi sert le source et de jouer avec.

tout à fait, c'est un outil fantastique !
j'imagine que ma classe ne sert pas forcément, mais le jour où tu voudras ajouter un slider pour une interface dans ton composant tu seras p'tet content de récupérer un bout de code

[jovdev]

Re : Classe mootools pour Slider

Merci Ced,

C'est sympa le partage

++, Joël

[ced1870]

Re : Classe mootools pour Slider

Merci Ced,

C'est sympa le partage

++, Joël

yep, c'est un truc tout con mais ça marche bien