js 实现内容分页显示 博客分类: javascript CSSHTML
程序员文章站
2024-03-04 20:35:48
...
<script defer="defer" language="javascript" type="text/javascript">
<!--
var _offset = 0;
function _$id(_obj) {
return document.getElementById(_obj);
}
function _$Pages(_i) {
_curPage=_i;
_$id("Content").innerHTML=_contentArray[_i];
for (var i=0;i<_contentArray.length;i++)
{
if (i==_i)
_$id("soojs_"+(_i+1)).style.backgroundColor="#ff9900";
else
_$id("soojs_"+(i+1)).style.backgroundColor="";
}
}
var _contentArray;
var _curPage=0;
var _totalPage;
function _$prePage(){
_curPage--;
if(_curPage>=0){
_$Pages(parseInt(_curPage));
}
else{
_curPage=0;
_$Pages(parseInt(_curPage));
}
}
function _$nextPage(){
_curPage++;
if(_curPage<_totalPage){
_$Pages(parseInt(_curPage));
}
else{
_curPage=_totalPage-1;
}
}
$(function() {
var _s='';
var neirong=_$id("Content").innerHTML;
_contentArray=neirong.split("#page#");
if(_contentArray.length>1){
_totalPage=_contentArray.length;
_$id("Content").innerHTML=neirong.replace("#page#"," ");
_s+="<a href='#' onclick='javascript:_$prePage("+_curPage+")'>上一页</a>";
for (var i=0;i<_contentArray.length;i++) {
_s+=('<a href="#" onclick="javascript:_$Pages('+i+');" onfocus="this.blur()" title="Page '+(i+1)+'" id="soojs_'+(i+1)
+'">'+" "+(i+1)+" "+'</a> ');
}
_s+="<a href='#' onclick='javascript:_$nextPage("+_curPage+")'>下一页</a>";
_$id("Pages").innerHTML=_s;
_$Pages(0);
}
}
);
//-->
</script>
<style type="text/css">
#Content {
margin: 1px 1px 0px 1px;
_margin: 1px 1px 0px 1px; /* CSS Hack For IE6 */
text-align: left;
}
#Pages {
width: 400px;
height: 20px;
margin: 0px;
text-align: right;
}
#Pages a{
display:inline;
}
#Pages a:link{color:#000000}
#Pages a:hover{color:#FF0000}
#Pages a:active{color:#3300FF}
</style>
html:
<div id="Content">
<div id="Pages"></div>
</div>
--------------
使用很简单如果内容很长在分页的地方都添加#page#就ok
<!--
var _offset = 0;
function _$id(_obj) {
return document.getElementById(_obj);
}
function _$Pages(_i) {
_curPage=_i;
_$id("Content").innerHTML=_contentArray[_i];
for (var i=0;i<_contentArray.length;i++)
{
if (i==_i)
_$id("soojs_"+(_i+1)).style.backgroundColor="#ff9900";
else
_$id("soojs_"+(i+1)).style.backgroundColor="";
}
}
var _contentArray;
var _curPage=0;
var _totalPage;
function _$prePage(){
_curPage--;
if(_curPage>=0){
_$Pages(parseInt(_curPage));
}
else{
_curPage=0;
_$Pages(parseInt(_curPage));
}
}
function _$nextPage(){
_curPage++;
if(_curPage<_totalPage){
_$Pages(parseInt(_curPage));
}
else{
_curPage=_totalPage-1;
}
}
$(function() {
var _s='';
var neirong=_$id("Content").innerHTML;
_contentArray=neirong.split("#page#");
if(_contentArray.length>1){
_totalPage=_contentArray.length;
_$id("Content").innerHTML=neirong.replace("#page#"," ");
_s+="<a href='#' onclick='javascript:_$prePage("+_curPage+")'>上一页</a>";
for (var i=0;i<_contentArray.length;i++) {
_s+=('<a href="#" onclick="javascript:_$Pages('+i+');" onfocus="this.blur()" title="Page '+(i+1)+'" id="soojs_'+(i+1)
+'">'+" "+(i+1)+" "+'</a> ');
}
_s+="<a href='#' onclick='javascript:_$nextPage("+_curPage+")'>下一页</a>";
_$id("Pages").innerHTML=_s;
_$Pages(0);
}
}
);
//-->
</script>
<style type="text/css">
#Content {
margin: 1px 1px 0px 1px;
_margin: 1px 1px 0px 1px; /* CSS Hack For IE6 */
text-align: left;
}
#Pages {
width: 400px;
height: 20px;
margin: 0px;
text-align: right;
}
#Pages a{
display:inline;
}
#Pages a:link{color:#000000}
#Pages a:hover{color:#FF0000}
#Pages a:active{color:#3300FF}
</style>
html:
<div id="Content">
<div id="Pages"></div>
</div>
--------------
使用很简单如果内容很长在分页的地方都添加#page#就ok
下一篇: SQL复杂查询(四)
推荐阅读
-
js 实现内容分页显示 博客分类: javascript CSSHTML
-
js 实现内容分页显示 博客分类: javascript CSSHTML
-
JS/jQuery实现默认显示部分文字点击按钮显示全部内容_javascript技巧
-
js简单实现让文本框内容逐个字的显示出来_javascript技巧
-
js简单实现让文本框内容逐个字的显示出来_javascript技巧
-
js实现内容显示并使用json传输数据_javascript技巧
-
JS实现左右拖动改变内容显示区域大小的方法_javascript技巧
-
js实现内容显示并使用json传输数据_javascript技巧
-
JS实现左右拖动改变内容显示区域大小的方法_javascript技巧