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-hori.........完整代码请登录后点击上方下载按钮下载查看