HTML5 响应式可访问分页界面实验

Responsive, Accessible, Alternate Pagination experiment

pagination

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1479
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(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 = $('<span class="pagePip"/>').css({
                left: '' + (100 / pips) * i + '%'
            });

$pagination.append(s);

}

var minPip = $('<span class="pageMinPip">' + min + '</span>');
        var maxPip = $('<span class="pageMaxPip">' + max + '</span>');
        $pagination.prepend(minPip, maxPip);

};
    sliderPips(pagesMin, pagesMax);

function sliderLabel() {
        $('.pagination .ui-slider-handle').append(
            '<span class="pageNumber">Page <span>' +
            $('.pagination .pageSlider').slider('value') +
            '</span></span>');
    };
    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));

});
});

编译

CSS

@import url("http://fonts.googleapis.com/css?family=Oxygen:400,700");
.pageForm {
    display: block;
    margin-top: 14px;
}
.pageInput,
.pageButton {
    padding: 0px 10px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    border: 1px solid #bbb;
    display: inline-block;
    vertical-align: middle;
}
.pageInput {
    width: 28px;
    height: 28px;
    box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.1);
}
.pageLabel {
    position: absolute;
    left: -9999em;
}
.pageButton {
    background: linear-gradient(#f46652 0%, #dd5846 100%);
    border-color: #dd5846;
    color: white;
}
.pageSkip {
    display: inline-block;
    background: transparent url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-32.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('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-32.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;
}
.pagePip {
    width: 1px;
    height: 3px;
    background: black;
    position: absolute;
    bottom: -10px;
    opacity: 0.4;
    box-shadow: -1px 0 0 #fff;
}
.pageMaxPip,
.pageMinPip {
    font-size: 12px;
    color: #777;
    position: absolute;
    bottom: -30px;
    width: 20px;
}
.pageMaxPip {
    right: -10px;
}
.pageMinPip {
    left: -10px;
}
.pagination {
    width: 80%;
    margin: 50px auto;
    text-align: center;
}
.pageSlider {
    display: inline-block;
}
.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%, #ccc 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;
    }
}
body {
    min-height: 400px;
    padding-top: 20px;
    background: linear-gradient(#f5f5f5 0%, #dde4e9 100%);
    font-family: oxygen;
}
h1,
h3 {
    width: 80%;
    color: #555;
    margin: 0 auto;
    text-align: center;
}
h1 {
    font-size: 26px;
}
h3 {
    color: #777;
    font-size: 18px;
    font-weight: normal;
}
p {
    text-align: center;
    font-size: 14px;
    color: #111;
    margin-top: 50px;
}
#pageSliderDescription {
    position: absolute;
    left: -999em;
    display: inline-block;
    width: 0;
    height: 0;
}

HTML

<h1>Responsive, Accessible, Alternate Pagination experiment.</h1>
<h3>I'm attempting to make a more interesting and user-friendly pagination</h3>
<p>Drag or use Arrow Keys to set the desired page, then click 'Go' or press 'Enter' (CTRL + Arrow Keys skip by 10.)</p>

<div id="pageSliderDescription">
        Pagination: "Arrow" keys to move between pages, "Enter" to go to selected page. (ctrl+arrow skips 10).</div>
    <div class="pageSlider long"></div>

<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>

</form>
</section>
<script src='https://code.jquery.com/ui/1.10.1/jquery-ui.js'></script>

Responsive, Accessible, Alternate Pagination experiment

pagination

编辑器支持Emmet

快捷键

Responsive, Accessible, Alternate Pagination experiment

pagination

SVG有趣的贪吃蛇分页动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：