jQuery可以拖动滑动条快速跳转分页插件

jQuery可拖动分页插件是一款具有滑动条，可以拖动滑动条快速跳转到任意页面，另外你也可以点击翻页图标来实现翻页，非常方便和实用。$(document).ready( function() { var pagesMax = 30; var pagesMin = 1; var startPage = 7; var url = "http://sc.chinaz.com/jiaoben/"; $('.pagination .pageSlider').slider({ value: startPage, max: pagesMax, min: pagesMin, animate: true, : function( event, ui ) { $('.pagination .pageSlider .ui-slider-handle').attr({ "aria-valuenow": startPage, "aria-valuetext": "Page " + startPage, "role": "slider", "aria-valuemin": pagesMin, "aria-valuemax": pagesMax, "aria-describedby": "pageSliderDescription" }); $('.pagination .pageInput').val( startPage ); } }).on( 'slide', function(event,ui) { // let user skip 10 pages with keyboard ;) if( event.metaKey || event.ctrlKey ) { if( ui.value > $(this).slider('value') ) { if( ui.value+9 < pagesMax ) { ui.value+=9; } else { ui.value=pagesMax } $(this).slider('value',ui.value); } else { if( ui.value-9 > pagesMin ) { ui.value-=9; } else { ui.value=pagesMin } $(this).slider('value',ui.value); } event.preventDefault(); } $('.pagination .pageNumber span').text( ui.value ); $('.pagination .pageInput').val( ui.value ); }).on('slidechange', function(event, ui) { $('.pagination .pageNumber') .attr('role','alert') .find('span') .text( ui.value ); $('.pagination .pageInput').val( ui.value ); $('.pagination .pageSlider .ui-slider-handle').attr({ "aria-valuenow": ui.value, "aria-valuetext": "Page " + ui.value }); });$('.pagination .pageSlider .ui-slider-handle').on( 'keyup' , function(e) { if( e.which == 13 ) { var curPage = $('.pagination .pageSlider').slider('value'); alert( 'we would now send you to: ' + url.replace( /{{.}}/ , curPage )); } });$('.pagination .pageInput').on( 'change' , function(e) { $('.pagination .pageSlider').slider( 'value', $(this).val() );}); var tmr; $('.pageSkip').on('click', function(e) { e.preventDefault(); var $this = $(this); if( $this.hasClass('pageNext') ) { var curPage = $('.pagination .pageSlider').slider('value')+1; } else if( $this.hasClass('pagePrev') ) { var curPage = $('.pagination .pageSlider').slider('value')-1; } $('.pagination .pageSlider').slider('value',curPage); clearTimeout(tmr); tmr = setTimeout( function() { alert( 'we would now send you to: ' + url.replace( /{{.}}/ , curPage )); },1000); }); function sliderPips( min, max ) { var pips = max-min; var $pagination = $('.pagination .pageSlider'); for( i=0; i<=pips; i++ ) { var s = $('').css({ left: '' + (100/pips)*i + '%' }); $pagination.append( s ); } var minPip = $(''+min+''); var maxPip = $(''+max+''); $pagination.prepend( minPip, maxPip ); };sliderPips( pagesMin, pagesMax ); function sliderLabel() { $('.pagination .ui-slider-handle').append( 'Page ' + $('.pagination .pageSlider').slider('value') + '');};sliderLabel(); $('.pagination .pageButton').on('click', function(e) { e.preventDefault(); var curPage = $('.pagination .pageSlider').slider('value'); alert( 'we would now send you to: ' + url.replace( /{{.}}/ , curPage )); }); });

在线演示        积分下载        6毛下载        砍两刀下载