Discuz!x3.2 jquery.paginate实现Diy分类代码 - 无限星辰工作室-客户无限互联网动力之源

<html>
<head>
<script type="text/javascript"src="jquery.paginate.js"/></script>
<script type="text/javascript"src="jquery.paginate.min.js"/></script>
<style type="text/css">
.pagination {
float:right;
clear: both;
border:1px solid #CDCDCD;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
margin-top:30px;
}
.pagination a {
display:block;
float:left;
height:40px;
width:40px;
background-color:rgb(0,50,75);
color:#555555;
text-align:center;
text-decoration:none;
font-family:microsoftyahei; /* ATTN: need a better font stack */
font-weight:bold;
font-size:32px;
line-height: 32px;
outline:none;
vertical-align:middle;
background:#F3F3F3; /* Old browsers */
background:-moz-linear-gradient(top, #F3F3F3 0%,#D3D3D3 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3F3F3),color-stop(100%,#D3D3D3)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #F3F3F30%,#D3D3D3 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #F3F3F30%,#D3D3D3 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #F3F3F30%,#D3D3D3 100%); /* IE10+ */
background:linear-gradient(top, #F3F3F3 0%,#D3D3D3100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3F3F3',endColorstr='#D3D3D3',GradientType=0 ); /* IE6-9 */
}
.pagination a:hover, .pagination a:focus,.pagination a:active {
background:#CECECE; /* Old browsers */
background:-moz-linear-gradient(top, #E4E4E4 0%,#CECECE 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#E4E4E4),color-stop(100%,#CECECE)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #E4E4E40%,#CECECE 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #E4E4E40%,#CECECE 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #E4E4E40%,#CECECE 100%); /* IE10+ */
background:linear-gradient(top, #E4E4E4 0%,#CECECE100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4',endColorstr='#CECECE',GradientType=0 ); /* IE6-9 */
}
.pagination a.disabled, .paginationa.disabled:hover, .pagination a.disabled:focus, .pagination a.disabled:active {
background:#F3F3F3; /* Old browsers */
background:-moz-linear-gradient(top, #F3F3F3 0%,#D3D3D3 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3F3F3),color-stop(100%,#D3D3D3)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #F3F3F30%,#D3D3D3 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #F3F3F30%,#D3D3D3 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #F3F3F30%,#D3D3D3 100%); /* IE10+ */
background:linear-gradient(top, #F3F3F3 0%,#D3D3D3100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3F3F3',endColorstr='#D3D3D3',GradientType=0 ); /* IE6-9 */
color:#A8A8A8;
}
.pagination a:first-child {
border-radius:2px 0 0 2px;
-moz-border-radius:2px 0 0 2px;
-webkit-border-radius:2px 0 0 2px;
}
.pagination a:last-child {
border-radius:0 2px 2px 0;
-moz-border-radius:0 2px 2px 0;
-webkit-border-radius:0 2px 2px 0;
}
.pagination a {
border-right:1px solid #CDCDCD;
border-left:1px solid #CDCDCD;
}
.pagination a:first-child {
border:none;
}
.pagination a:last-child {
border:none;
}
.pagination input {
border:none;
float:left;
text-align:center;
font-size: 20px;
height:40px;
outline:none;
vertical-align:middle;
width:240px;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="module cl xld"id="listitems" style="display:block;">
[loop]
<dl class="cl"style="padding:15px 0;">
<ddclass="m"><a href="{url}"{target}><imgsrc="{pic}" width="{picwidth}"height="{picheight}" alt="{title}" /></dd>
<dt><astyle="font-size: 20px; color: #54c693;" href="{url}"title="{title}"{target}>{title}</a></dt>
<dd><a style="font-size: 16px; line-height: 28px;text-decoration:none;">{summary}</a></dd>
<dd><em>{dateline}</em></dd>
</dl>
<div style="border-bottom:2pxdotted #eee; "></div>
[/loop]
</div>
<div id="listitems-pagination"class="pagination" style="display:none;">
<a id="listitems-previous"href="#" class="previous"><</a>
<input type="text"readonly="readonly" data-max-page=""id="listitems-input" />
<a id="listitems-next"href="#" class="next">></a>
</div>
<scripttype="text/javascript">
jQuery(document).ready(function() {
jQuery('#listitems').paginate({itemsPerPage:11});
});
</script>
</body>
</html>

复制代码