216 lines
5.1 KiB
Plaintext
216 lines
5.1 KiB
Plaintext
|
/**
|
|||
|
* Slider Pagination Concept
|
|||
|
* jquery.pagination.js v1.0.0
|
|||
|
* http://www.codrops.com
|
|||
|
*
|
|||
|
* Licensed under the MIT license.
|
|||
|
* http://www.opensource.org/licenses/mit-license.php
|
|||
|
*
|
|||
|
* Copyright 2012, Codrops
|
|||
|
* http://www.codrops.com
|
|||
|
*/
|
|||
|
;( function( $, window, undefined ) {
|
|||
|
|
|||
|
'use strict';
|
|||
|
|
|||
|
$.Slider = function( settings, element ) {
|
|||
|
this.$el = element;
|
|||
|
this.value = settings.value;
|
|||
|
this.total = settings.total;
|
|||
|
this.width = settings.width;
|
|||
|
this._create();
|
|||
|
};
|
|||
|
$.Slider.prototype = {
|
|||
|
_create : function() {
|
|||
|
|
|||
|
var self = this;
|
|||
|
this.slider = this.$el.slider( {
|
|||
|
value : this.value,
|
|||
|
min : 1,
|
|||
|
max : this.total,
|
|||
|
step : 1
|
|||
|
} );
|
|||
|
this.$value = $( '<span>' + this.value + '</span>' );
|
|||
|
this.getHandle().append( this.$value );
|
|||
|
|
|||
|
},
|
|||
|
setValue : function( value ) {
|
|||
|
this.value = value;
|
|||
|
this.$value.text( value );
|
|||
|
this.slider.slider( 'value', value );
|
|||
|
},
|
|||
|
getValue : function() {
|
|||
|
return this.value;
|
|||
|
},
|
|||
|
getHandle : function() {
|
|||
|
return this.$el.find( 'a.ui-slider-handle' );
|
|||
|
},
|
|||
|
getSlider : function() {
|
|||
|
return this.slider;
|
|||
|
},
|
|||
|
getSliderEl : function() {
|
|||
|
return this.$el;
|
|||
|
},
|
|||
|
next : function( callback ) {
|
|||
|
if( this.value < this.total ) {
|
|||
|
this.setValue( ++this.value );
|
|||
|
if( callback ) {
|
|||
|
callback.call( this, this.value );
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
previous : function( callback ) {
|
|||
|
if( this.value > 1 ) {
|
|||
|
this.setValue( --this.value );
|
|||
|
if( callback ) {
|
|||
|
callback.call( this, this.value );
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
$.Pagination = function( options, element ) {
|
|||
|
this.$el = $( element );
|
|||
|
this._init( options );
|
|||
|
};
|
|||
|
|
|||
|
// the options
|
|||
|
$.Pagination.defaults = {
|
|||
|
value : 1,
|
|||
|
total : 50,
|
|||
|
width : 200,
|
|||
|
onChange : function( value ) { return false; },
|
|||
|
onSlide : function( value ) { return false; }
|
|||
|
};
|
|||
|
|
|||
|
$.Pagination.prototype = {
|
|||
|
|
|||
|
_init : function( options ) {
|
|||
|
|
|||
|
// options
|
|||
|
this.options = $.extend( true, {}, $.Pagination.defaults, options );
|
|||
|
var transEndEventNames = {
|
|||
|
'WebkitTransition' : 'webkitTransitionEnd',
|
|||
|
'MozTransition' : 'transitionend',
|
|||
|
'OTransition' : 'oTransitionEnd',
|
|||
|
'msTransition' : 'MSTransitionEnd',
|
|||
|
'transition' : 'transitionend'
|
|||
|
};
|
|||
|
this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
|
|||
|
$.fn.applyStyle = Modernizr.csstransitions ? $.fn.css : $.fn.animate;
|
|||
|
this._layout();
|
|||
|
this._initEvents();
|
|||
|
|
|||
|
},
|
|||
|
_layout : function() {
|
|||
|
|
|||
|
// next and previous
|
|||
|
this.$navNext = this.$el.find( 'nav > a.sp-next' );
|
|||
|
this.$navPrev = this.$el.find( 'nav > a.sp-prev' );
|
|||
|
// slider
|
|||
|
var $slider = $( '<div class="sp-slider"></div>' ).appendTo( this.$el );
|
|||
|
this.slider = new $.Slider( { value : this.options.value, total : this.options.total, width : this.options.width }, $slider );
|
|||
|
// control if the slider is opened/closed
|
|||
|
this.isSliderOpened = false;
|
|||
|
|
|||
|
},
|
|||
|
_initEvents : function() {
|
|||
|
|
|||
|
var self = this;
|
|||
|
//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
|||
|
// this.slider.getHandle().on( 'click', function() {
|
|||
|
//
|
|||
|
// if( self.isSliderOpened ) {
|
|||
|
// return false;
|
|||
|
// }
|
|||
|
// self.isSliderOpened = true;
|
|||
|
// self.slider.getSliderEl().addClass( 'sp-slider-open' );
|
|||
|
// // expand slider wrapper
|
|||
|
// self.$el.stop().applyStyle( { width : self.options.width }, $.extend( true, [], { duration : '150ms' } ) );
|
|||
|
// // hide navigation
|
|||
|
// self.toggleNavigation( false );
|
|||
|
// return false;
|
|||
|
//
|
|||
|
// } );
|
|||
|
|
|||
|
this.slider.getSlider().on( {
|
|||
|
'slidestop' : function( event, ui ) {
|
|||
|
|
|||
|
if( !self.isSliderOpened ) {
|
|||
|
return false;
|
|||
|
}
|
|||
|
|
|||
|
var animcomplete = function() {
|
|||
|
|
|||
|
self.isSliderOpened = false;
|
|||
|
self.slider.getSliderEl().removeClass( 'sp-slider-open' );
|
|||
|
// show navigation
|
|||
|
self.toggleNavigation( true );
|
|||
|
|
|||
|
};
|
|||
|
self.$el.stop().applyStyle( { width : 0 }, $.extend( true, [], { duration : '150ms', complete : animcomplete } ) ).on( self.transEndEventName, function() {
|
|||
|
|
|||
|
$( this ).off( self.transEndEventName );
|
|||
|
animcomplete.call();
|
|||
|
|
|||
|
} );
|
|||
|
|
|||
|
self.options.onChange( ui.value );
|
|||
|
|
|||
|
},
|
|||
|
'slide' : function( event, ui ) {
|
|||
|
|
|||
|
if( !self.isSliderOpened ) {
|
|||
|
return false;
|
|||
|
}
|
|||
|
self.slider.setValue( ui.value );
|
|||
|
self.options.onSlide( ui.value );
|
|||
|
|
|||
|
}
|
|||
|
} );
|
|||
|
|
|||
|
this.$navNext.on( 'click', function() {
|
|||
|
|
|||
|
self.slider.next( function( value ) {
|
|||
|
self.options.onChange( value );
|
|||
|
} );
|
|||
|
return false;
|
|||
|
|
|||
|
} );
|
|||
|
this.$navPrev.on( 'click', function() {
|
|||
|
|
|||
|
self.slider.previous( function( value ) {
|
|||
|
self.options.onChange( value );
|
|||
|
} );
|
|||
|
return false;
|
|||
|
|
|||
|
} );
|
|||
|
|
|||
|
},
|
|||
|
toggleNavigation : function( toggle ) {
|
|||
|
|
|||
|
$.fn.render = toggle ? $.fn.show : $.fn.hide;
|
|||
|
this.$navNext.render();
|
|||
|
this.$navPrev.render();
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
$.fn.pagination = function( options ) {
|
|||
|
var instance = $.data( this, 'pagination' );
|
|||
|
if ( typeof options === 'string' ) {
|
|||
|
var args = Array.prototype.slice.call( arguments,1 );
|
|||
|
this.each(function() {
|
|||
|
instance[ options ].apply( instance, args );
|
|||
|
});
|
|||
|
}
|
|||
|
else {
|
|||
|
this.each(function() {
|
|||
|
instance ? instance._init() : instance = $.data( this, 'pagination', new $.Pagination( options, this ) );
|
|||
|
});
|
|||
|
}
|
|||
|
return instance;
|
|||
|
};
|
|||
|
|
|||
|
} )( jQuery, window );
|