www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

CSS3可滑动跳转的分页插件制作教程

2019-05-24 07:55 来源:未知

今日作者要向我们享受一款很非常的CSS3分页插件,那款分页插件不只有可以点击分页按键来兑现分页,而且能够滑动滑杆来贯彻自由页面包车型地铁跳转,看看都分外酷,很吻合部分性情化的村办网址使用,当然,那款分页插件也顺应ajax翻页,效果都挺不错的。先来看看效果图:

Web前端 1

什么样,还挺酷的吗。

本来你也得以在此间查看插件的DEMO演示。

接下去大家来分享一下源码的落到实处思路,这里运用了jQuery UI框架,这么酷的滑杆是靠它达成的,不然,写的疲劳。。

首先是HTML代码:

<div class="pageSlider long"></div>        <form class="pageForm" action="#">          <label class="pageLabel" for="pageInput">          Page number you'd like to go to. (Max of 30)        </label>           <a         class="pagePrev pageSkip"         href="#?page=6"         title="Previous Page (6)">Previous Page</a>          <input id="pageInput" class="pageInput"         type="text" maxlength="3" placeholder="#">          <a         class="pageNext pageSkip"         href="#?page=8"         title="Next Page (8)">Next Page</a>          <button class="pageButton"         title="Go to chosen page of results">Go</button>        </form>

此地我们看看,先是定义了滑杆的区域,然后是七个分页开关,可以向前翻和向后翻,最终是3个大四页跳转的页码输入框和1个开关。

别看这些滑杆相当漂亮貌,会很难落实,其实采取jQuery UI这几个东西特别轻松。

接下去看看CSS代码:

前后翻页按键:

.pageSkip {    display: inline-block;    background: transparent url('css/monotone_arrow_left_small.png') no-repeat -10px -10px;    text-indent: -999em;    background-size: 40px;    opacity: 0.7;    vertical-align: middle;    width: 20px;    height: 20px;  }  .pageNext {    background-image: url('css/monotone_arrow_right.png');  }

很不满,利用了两张箭头图片作为背景,可是,效果也还足以。

下一场是输入框:

.pageNumber {    position: relative;    top: -38px;    left: 50%;    font-size: 12px;    color: #333;    width: 60px;    display: block;    text-align: center;    margin-left: -17px;    background: white;    padding: 5px 10px;    border-radius: 3px;    box-shadow: 0 0 5px rgba(151, 38, 20, 0.15);  }  .pageNumber:after {    content: " ";    display: block;    position: absolute;    width: 0;    height: 0;    top: 24px;    border: 6px solid transparent;    border-top-color: white;  }

Web前端,然后是滑杆的背景,利用了CSS三线性渐变属性:

.ui-slider-horizontal {    width: 60%;    height: 6px;    top: 0px;    margin: 0px 10px 2px;    border-radius: 6px;    position: relative;    display: inline-block;    background: #F46652;    background-image: repeating-linear-gradient(28deg, transparent, transparent 10px, #dd5846 10px, #dd5846 20px);    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);  }  .ui-slider-horizontal:before {    content: " ";    position: absolute;    width: auto;    height: 16px;    top: -5px;    left: -4px;    right: -4px;    border-radius: 10px;    z-index: -1;    background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.8) 90%);  }  .ui-slider.long .ui-slider-handle {    height: 12px;    width: 30px;    background: #f1f1f1;    display: block;    position: absolute;    border-radius: 50px;    margin-top: -3px;    margin-left: -15px;    text-decoration: none;    background: #f5f5f5;    background: linear-gradient(#f5f5f5 0%, #cccccc 100%);    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35), 0 0 2px 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.2), 0 7px 5px rgba(0, 0, 0, 0.1), 0 11px 10px rgba(0, 0, 0, 0.1);  }  .ui-slider.long .ui-slider-handle::before,  .ui-slider.long .ui-slider-handle::after {    content: " ";    width: 2px;    height: 40%;    position: absolute;    background: transparent;    border-radius: 0px;    box-shadow: -1px 0px 0px rgba(255, 255, 255, 0.8), 1px 0px 0px rgba(255, 255, 255, 0.8), 2px 0 0 rgba(0, 0, 0, 0.3), 1px 0 0 rgba(0, 0, 0, 0.3) inset;  }  .ui-slider.long .ui-slider-handle::before {    left: 10px;    top: 30%;  }  .ui-slider.long .ui-slider-handle::after {    right: 12px;    top: 30%;  }  @media (max-width: 550px) {    .pagination {      width: auto;    }    .pageForm {      display: block;      margin-top: 20px;    }    .pageInput {      margin: 0;    }    .pageSlider {      width: 260px;      margin: 0 15px;    }  }

最后是js,那是用来完成翻页逻辑的,来看看:

$(document).ready( function() {              var pagesMax = 30;    var pagesMin = 1;    var startPage = 7;    var url = "http://yoursite.com/results?page={{1}}";        $('.pagination .pageSlider').slider({        value: startPage, max: pagesMax, min: pagesMin,      animate: true,            create: 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 ));        });        });

代码自个儿开始展览看呢,其它,和那款分页插件类似的还有一款能够jQuery分页插件 带滑动条分页,也许有滑杆的,只是私有以为没那款酷,呵呵。

终极,把源代码打包一份,下载地址>>


TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:CSS3可滑动跳转的分页插件制作教程