// the HTML for that'd use it
//
// <div id="x_container">
// <a id="x_back_button"><img src="/images/left-arrow.png" /></a>
// <a id="x_forward_button"><img src="/images/right-arrow.png" /></a>
//
// <div class="x_widget">
// <p>content...1</p>
// </div>
//
// <div class="x_widget" style="display:none;">
// <p>content...2</p>
// </div>
//
// <div class="x_widget" style="display:none;">
// <p>content...3</p>
// </div>
// </div>
//
// <script type="text/javascript">
// new ElementSlider( 'x_container', '.x_widget', 'x_back_button', 'x_forward_button' );
// </script>
var ElementSlider = Class.create();
ElementSlider.prototype = {
initialize: function( container_element, item_element, back_button_element, forward_button_element ) {
this.container_element = container_element;
this.items = $( this.container_element ).select( item_element ).toArray();
this.back_button_element = back_button_element;
this.forward_button_element = forward_button_element;
this.current_item_index = 0;
this.observeBackButton();
this.observeForwardButton();
},
observeBackButton: function() {
Event.observe( this.back_button_element, 'click', this.moveBack.bindAsEventListener(this), false );
},
observeForwardButton: function() {
Event.observe( this.forward_button_element, 'click', this.moveForward.bindAsEventListener(this), false );
},
moveForward: function() {
if ( this.items[this.current_item_index] == this.items.last() ) {
this.current_item_index = 0;
} else {
this.current_item_index += 1;
}
this.resetItems();
},
moveBack: function() {
// if first, set to last
if ( this.items[this.current_item_index] == this.items.first() ) {
this.current_item_index = ( this.items.size() - 1 );
} else {
this.current_item_index = ( this.current_item_index - 1 );
}
this.resetItems();
},
resetItems: function() {
this.items.each( function( item ) { $( item ).hide(); })
this.items[this.current_item_index].show();
}
}
Refactorings
No refactoring yet !
r.healy.myopenid.com
February 6, 2009, February 06, 2009 10:00, permalink
No rating.
Login to rate!
More element based. Some changes to the HTML.
<a id="x_back_button">Back</a> <a id="x_forward_button">Forward</a> <ul id="x_container"> <li class="x_widget"> <p>content...1</p> </li> <li class="x_widget" style="display:none;"> <p>content...2</p> </li> <li class="x_widget" style="display:none;"> <p>content...3</p> </li> </ul>
var ElementSlider = Class.create();
ElementSlider.prototype = {
initialize: function( container_element, item_element, back_button_element, forward_button_element ) {
this.items = $( container_element ).select( item_element ).toArray();
this.el = this.items[0];
this.back_button_element = back_button_element;
this.forward_button_element = forward_button_element;
this.observeBackButton();
this.observeForwardButton();
},
observeBackButton: function() {
Event.observe( this.back_button_element, 'click', this.moveBack.bindAsEventListener(this), false);
},
observeForwardButton: function() {
Event.observe( this.forward_button_element, 'click', this.moveForward.bindAsEventListener(this), false );
},
moveBack: function(forward) {
this.el.hide();
this.el.previous() ? (this.el = this.el.previous()).show() : (this.el = this.items.last()).show();
},
moveForward: function() {
this.el.hide();
this.el.next() ? (this.el = this.el.next()).show() : (this.el = this.items.first()).show();
}
}
new ElementSlider( 'x_container', '.x_widget', 'x_back_button', 'x_forward_button' );
using this on the homepage of http://planetargon.com/