<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> page插件演示</ title>
< style>
* {
margin : 0;
padding : 0;
}
#containet {
display : table;
border : 2px solid #ff0000;
padding : 20px;
margin : 0 auto;
border-radius : 4px;
background : cornsilk;
}
#pageMain li {
list-style : none;
line-height : 40px;
}
#pageBox {
padding : 10px 0 0 0;
}
#pageBox span {
display : inline-block;
width : 60px;
height : 30px;
line-height : 30px;
text-align : center;
color : #fff;
background : #08a586;
border : 1px solid;
border-radius : 6px;
font-size : 14px;
cursor : pointer;
}
#pageNav {
display : inline-block;
padding : 0 8px;
}
#pageNav a {
display : inline-block;
width : 30px;
height : 30px;
line-height : 30px;
text-align : center;
color : #3a87ad;
margin : 0 6px;
border-radius : 4px;
text-decoration : none;
}
#pageNav a.active,
#pageNav a:hover {
background : #3a87ad;
color : #EFEFEF;
}
#prev:hover {
cursor : pointer;
}
#next:hover {
cursor : pointer;
}
</ style>
</ head>
< body>
< div id = " containet" >
< ul id = " pageMain" >
< li> 这是内容标题 第1</ li>
< li> 这是内容标题 第2</ li>
< li> 这是内容标题 第3</ li>
< li> 这是内容标题 第4</ li>
< li> 这是内容标题 第5</ li>
< li> 这是内容标题 第6</ li>
< li> 这是内容标题 第7</ li>
< li> 这是内容标题 第8</ li>
< li> 这是内容标题 第9</ li>
< li> 这是内容标题 第10</ li>
< li> 这是内容标题 第11</ li>
< li> 这是内容标题 第12</ li>
< li> 这是内容标题 第13</ li>
< li> 这是内容标题 第14</ li>
< li> 这是内容标题 第15</ li>
< li> 这是内容标题 第16</ li>
</ ul>
< div id = " pageBox" >
< span id = " prev" > 上一页</ span>
< ul id = " pageNav" > </ ul>
< span id = " next" > 下一页</ span>
</ div>
</ div>
< script src = " http://libs.baidu.com/jquery /1.10.2/jquery .min.js" > </ script>
< script type = " text/javascript " > javascript">
$ ( function ( ) {
tabPage ( {
pageMain : '#pageMain' ,
pageNav : '#pageNav' ,
pagePrev : '#prev' ,
pageNext : '#next' ,
curNum : 7 ,
activeClass : 'active' ,
ini : 0
} ) ;
function tabPage ( tabPage ) {
var pageMain = $ ( tabPage. pageMain) ;
var pageNav = $ ( tabPage. pageNav) ;
var pagePrev = $ ( tabPage. pagePrev) ;
var pageNext = $ ( tabPage. pageNext) ;
var curNum = tabPage. curNum;
var len = Math. ceil ( pageMain. find ( "li" ) . length / curNum) ;
console. log ( len) ;
var pageList = '' ;
var iNum = 0 ;
for ( var i = 0 ; i < len; i++ ) {
pageList += '<a href="javascript :;">' + ( i + 1 ) + '</a>' ;
}
pageNav. html ( pageList) ;
pageNav. find ( "a:first" ) . addClass ( tabPage. activeClass) ;
pageNav. find ( "a" ) . each ( function ( ) {
$ ( this ) . click ( function ( ) {
pageNav. find ( "a" ) . removeClass ( tabPage. activeClass) ;
$ ( this ) . addClass ( tabPage. activeClass) ;
iNum = $ ( this ) . index ( ) ;
$ ( pageMain) . find ( "li" ) . hide ( ) ;
for ( var i = ( $ ( this ) . html ( ) - 1 ) * curNum; i < ( $ ( this ) . html ( ) ) * curNum; i++ ) {
$ ( pageMain) . find ( "li" ) . eq ( i) . show ( )
}
} ) ;
} )
$ ( pageMain) . find ( "li" ) . hide ( ) ;
for ( var i = 0 ; i < curNum; i++ ) {
$ ( pageMain) . find ( "li" ) . eq ( i) . show ( )
}
pageNext. click ( function ( ) {
$ ( pageMain) . find ( "li" ) . hide ( ) ;
if ( iNum == len - 1 ) {
alert ( '已经是最后一页' ) ;
for ( var i = ( len - 1 ) * curNum; i < len * curNum; i++ ) {
$ ( pageMain) . find ( "li" ) . eq ( i) . show ( )
}
return false ;
} else {
pageNav. find ( "a" ) . removeClass ( tabPage. activeClass) ;
iNum++ ;
pageNav. find ( "a" ) . eq ( iNum) . addClass ( tabPage. activeClass) ;
}
for ( var i = iNum * curNum; i < ( iNum + 1 ) * curNum; i++ ) {
$ ( pageMain) . find ( "li" ) . eq ( i) . show ( )
}
} ) ;
pagePrev. click ( function ( ) {
$ ( pageMain) . find ( "li" ) . hide ( ) ;
if ( iNum == 0 ) {
alert ( '当前是第一页' ) ;
for ( var i = 0 ; i < curNum; i++ ) {
$ ( pageMain) . find ( "li" ) . eq ( i) . show ( )
}
return false ;
} else {
pageNav. find ( "a" ) . removeClass ( tabPage. activeClass) ;
iNum-- ;
pageNav. find ( "a" ) . eq ( iNum) . addClass ( tabPage. activeClass) ;
}
for ( var i = iNum * curNum; i < ( iNum + 1 ) * curNum; i++ ) {
$ ( pageMain) . find ( "li" ) . eq ( i) . show ( )
}
} )
}
} )
</ script>
</ body>
</ html>