jquery-ui实现拖动分页或键盘上下键驱动分页效果代码-html代码-BFW代码库

jquery-ui实现拖动分页或键盘上下键驱动分页效果代码

代码语言：html

所属分类：拖放

代码描述：jquery-ui实现拖动分页或键盘上下键驱动分页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <style>
        .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('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;
}
.pagePip {
        width:1px;
        height:3px;
        background:black;
        position:absolute;
        bottom:-10px;
        opacity:0.4;
        box-shadow:-1px 0 0 #ffffff;
}
.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%,#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;
}
}body {
        min-height:400px;
        padding-top:20px;
        background:linear-gradient(#f5f5f5 0%,#dde4e9 100%);
        font-family:oxygen;
}
.........完整代码请登录后点击上方下载按钮下载查看