<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type=
"text/javascript"
src=
"jquery.js"
></script>
<style type=
"text/css"
>
body {
margin:0; padding:0; font-size:12px; color:gray;
}
.container {
height:200px; background:#F2F2F2; border-radius:6px;
-webkit-border-radius:6px; -moz-border-radius:6px; border:6px solid #D5D5D5;
}
.wrapper {
width:90%; margin:0px auto;
}
.pageContainer {
margin:0 auto; height:30px; position:relative; width:100%;
}
.page {
width:30px; height:30px; background:#494949; border-radius:30px; margin-left:5px;
-webkit-border-radius:30px; -moz-border-radius:30px; line-height:30px; font-size:15px;
display:block; text-align:center; color:#fff; float:left; cursor:pointer; float:left;
margin-top:5px;
}
.page:hover {
background:#42CFFD; font-weight:bolder;
}
.page.active {
background:#0864C0;
}
</style>
<script type=
"text/javascript"
>
(
function
(){
$.fn.pageCreate =
function
(url, allPage, currentPage, pageTarget){
if
(isNaN(allPage) || allPage < 1 || isNaN(currentPage) || currentPage < 1 || $.trim(url) ==
""
) {
return
;
}
var
html = [],
self = $(this),
pageTarget = pageTarget?
""
:
""
prevPage = currentPage > 1 ? currentPage - 1 : 0,
nextPage = currentPage < allPage ? currentPage + 1 : 0
left =
'<a target="'
+pageTarget+
'" class="page" href="'
+url+
'1"><<</a><a target="'
+pageTarget+
'" href="'
+(prevPage==0?"javascript:void(0)
":url+prevPage)+'"
class
=
"page"
><</a>',
right =
'<a target="'
+pageTarget+
'" href="'
+(nextPage==allPage?"javascript:void(0)
":url+prevPage)+'"
class
=
"page"
>></a><a target=
"'+pageTarget+'"
class
=
"page"
href=
"'+url+allPage+'"
>>></a>';
html.push(
'<div class="pageContainer">'
);
html.push(left);
for
(
var
i=currentPage; i<=allPage; i++) {
html.push(
'<a href="'
+url+i+
'" target="'
+pageTarget+
'" class="page '
+(i==currentPage?"active
":"
")+'"
>'+i+
'</a>'
);
}
html.push(right);
html.push(
'</div>'
);
self.html(html.join(
''
));
};
})();
$(document).ready(
function
(){
$(
'#pageContainer'
).pageCreate(
"http://localhost/?page="
, 5, 3,
'_blank'
);
});
</script>
</head>
<body>
<div
class
=
"wrapper"
>
<div
class
=
"container"
id=
"pageContainer"
>
</div>
</div>
</body>
</html>