WebCssDesign

Avec l’arrivée de la technologie Ajax, nous voyons arrivée de nouvelles fonctionnalités et effets assez intéressant. L’un de ses effets et le slide ou le scroll d’informations. L’exemple que je vais vous présenter utilise le framework Mootools mais il est aussi disponible sous d’autres framework (exemple: scriptaculous).

Il faut donc avant de commencer récupérer le script Mootools disponible à cette adresse http://mootools.net/download

Créer un fichier jwscroller.js dont le contenu sera:

var jwscroller = null;
/*
Script: jwscroller.js
Builds a scroll effect to slide
Author: Luca Scarpa,
Project page: http://www.joomlaworks.gr
Copyright (c) 2006 - 2007 JoomlaWorks.gr - http://www.joomlaworks.gr
Arguments:
options - optional, an object containing options.
*/

var JWscroller = new Class({
initialize: function(container, options){
this.container = $(container);
if(!this.container.hasClass(’hasJWscroller’)){
this.container.addClass(’hasJWscroller’);
this.slides = [];
this.buttons = [];
this.options = Object.extend({
slidesSelector: “.jwscroller-content”,
buttonsSelector: “.jwscroller-link”,
wrapperSelector: “jwscroller-wrapper”,
nextSelector: “jwscroller-next”,
prevSelector: “jwscroller-prev”,
rotateAction: “click”,
transitionDuration: 500,
startIndex: 0,
buttonOffClass: ‘off’,
buttonOnClass: ’selected’,
wait: false
}, options || {});
this.currentSlide = -1;
this.slides = this.container.getElements(this.options.slidesSelector);
this.buttons = this.container.getElements(this.options.buttonsSelector);
this.createScroll(this.options.rotateAction);
return this;
} else return false;
},

/*
Property: createScroll
*Private internal function; do not call directly.*
create scroll effect and add action to all link

Arguments:
action - action to give to link
*/

createScroll: function(action){
this.scroll = new Fx.Scroll(this.options.wrapperSelector, { wait: this.options.wait, duration: this.options.transitionDuration});

// Add action to link slide
this.buttons.each(function(el,index){
$(el).addEvent(action, function(event) {
event = new Event(event).stop();
this.selected(index);
}.bind(this));
}, this);

// Add action to next link
//$(this.options.nextSelector).addEvent(action, function(event) { this.next(event); }.bind(this));
// Add action to prev link
//$(this.options.prevSelector).addEvent(action, function(event) { this.prev(event); }.bind(this));

this.selected(this.options.startIndex);

},

/*
Property: next
*Private internal function; do not call directly.*
Progresses to the next slide. */
next: function(event){
event = new Event(event).stop();

current = this.currentSlide;
next = (current+1 >= this.slides.length) ? 0 : current+1;
this.selected(next);
},

/*
Property: prev
*Private internal function; do not call directly.*
Progresses to the prev slide. */
prev: function(event){
event = new Event(event).stop();

current = this.currentSlide;
prev = (current-1 < 0) ? this.slides.length-1 : current-1;
this.selected(prev);
},

/*
Property: selected
*Private internal function; do not call directly.*
Select the slide and add it class */
selected: function(slideIndex){
if(slideIndex!=this.currentSlide){
this.buttons.each(function(el,index){
if(index == slideIndex && index != this.currentSlide){ //show
$(this.buttons[index]).removeClass(this.options.buttonOffClass).addClass(this.options.buttonOnClass);
} else {
$(this.buttons[index]).removeClass(this.options.buttonOnClass).addClass(this.options.buttonOffClass);
}
}, this);
this.currentSlide = slideIndex;
this.scroll.toElement(this.slides[slideIndex]);
}
}

});

//laisser le copyright merci.

Ensuite insérer dans la partie head de votre page:

<script type=”text/javascript” src=”js/mootools.js”></script>

script type=”text/javascript” src=”scripts/jwscroller.js”></script>
<script type=”text/javascript”>
Window.addEvent(’domready’, function() {
jwscroller = new JWscroller($(’jwscroller’),{
transitionDuration: 1000,
rotateAction: ‘click’
});

});
</script>

Ensuite dans la partie body:

<div id=”jwscroller”>
<div id=”jwscroller-bar”>
<ul>
<li class=”jwscroller-link”><a><span>Lien 1</span></a></li>
<li class=”jwscroller-link”><a><span>Lien 2</span></a></li>
<li class=”jwscroller-link”><a><span>Lien 3</span></a></li>
</ul>
</div>
<div id=”jwscroller-wrapper”>
<div id=”jwscroller-inner”>
<div class=”jwscroller-content”>
<p>Contenu partie 1</p>
</div>
<div class=”jwscroller-content”>
<p>Contenu partie 2</p>
</div>
<div class=”jwscroller-content”>
<p>Contenu partie 3</p>
</div>
</div>
</div>
</div>

et le tour est joué. Si vous voulez un exemple concret avec en prime une version horizontale et verticale rendez vous à cette adresse: http://www.monsportgagnant.com/

Popularité : 33% [?]

Catégories: Ajax
Tags: Ajax, Css, design, javascript