Page分页组件 灵活配置 采用面向对象开发 适用于AJAX无刷新分页加载
分页
开发时间:2015-07-12 11:28:16
文档说明 (本组件采用JS面向对象方式开发,代码简洁,适用于各种ajax无刷新)demo地址:http://www.seosiwei.com/zujian/copot/demo/Page.htmldemo下载地址:http://www.seosiwei.com/
参考手册
开始
文档
下载
<!DOCTYPE HTML>    
<html>    
<head>    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
	<meta name="description" content="Dialog 组件 mask 插件示例">    
	<title>Page 分页插件</title>    
	<link rel="stylesheet" type="text/css" href="../css/Page.css">    
	<script type="text/javascript" src="../js/common/jquery-1.8.3.min.js"></script>    
	<script type="text/javascript" src="../js/method/Page.js"></script>    
</head>    
<body>    
	<div class="copot">    
		<div id="copot-page"></div>    
	</div>    
</body>    
<script>    
$(function(){
	new Page({
		parent:$("#copot-page"),
		nowPage:7,
		pageSize:10,
		totalCount:100,
		setting: {
			defaultPage:7, 
			firstPageText:"HOME",
			prevPageText:"PREV",
			nextPageText:"NEXT",
			lastPageText:"LAST"
		},
		callback:function(nowPage,totalPage){
			alert("当前"+nowPage+"页--总共有"+totalPage+"页")
		}
	});
});  
</script>    
</html>
Page 分页插件

zdu 武汉seo web前端工程师 -微创意

文档说明 (本组件采用JS面向对象方式开发,代码简洁,适用于各种ajax无刷新zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

一:引入CSSzdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

1.Page.css   //验证表单必须的样式  (必须)
zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

二:引入JSzdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

  1. jquery.js     //必须  1.7版本以上 (必须)zdu 武汉seo web前端工程师 -微创意

  2. Page.js  //组件核心js文件        (必须)zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

三:定义一个外部分页容器zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

<div id="copot-page"></div>


zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

四:初始化分页插件zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

$(function(){
	new Page({
		parent:$("#copot-page"),
		nowPage:7,
		pageSize:10,
		totalCount:100,
		callback:function(nowPage,totalPage){
			alert("当前"+nowPage+"页--总共有"+totalPage+"页")
		}
	});
});


参数说明:zdu 武汉seo web前端工程师 -微创意

------------------------------------------------------------------------------zdu 武汉seo web前端工程师 -微创意

*parent (必填)zdu 武汉seo web前端工程师 -微创意

zdu 武汉seo web前端工程师 -微创意

分页插件的容器
zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

----------------------------------------------------------------------------------------------
zdu 武汉seo web前端工程师 -微创意

*nowPage (必填)zdu 武汉seo web前端工程师 -微创意

当前的具体页数 
zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

------------------------------------------------------------------------------------------------------------zdu 武汉seo web前端工程师 -微创意

*totlaPage (必填)zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

总共的分页数zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

------------------------------------------------------------------------------------------------------------zdu 武汉seo web前端工程师 -微创意

*callback (必填)zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

zdu 武汉seo web前端工程师 -微创意

点击每个分页成功后执行的函数zdu 武汉seo web前端工程师 -微创意

  这里写自己的核心代码,回调函数返回了2个参数供你使用(足够了)zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

-------------------------------------------------------------------------------------------------------------
*setting (选填)zdu 武汉seo web前端工程师 -微创意

zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

附加的设置属性 格式为 (不设置则为默认显示样式)zdu 武汉seo web前端工程师 -微创意

zdu 武汉seo web前端工程师 -微创意

setting: {
    defaultPage:7,             
    firstPageText:"HOME",
    prevPageText:"上一页",
    nextPageText:"下一页",
    lastPageText:"尾页"
},

    defaultPage  //默认显示可点击分页的个数
zdu 武汉seo web前端工程师 -微创意

    firstPageText //首页自己定义的文字  (例如:HOME)zdu 武汉seo web前端工程师 -微创意

    prevPageText  //上一页自己定义的字 (例如:PREV)zdu 武汉seo web前端工程师 -微创意

    nextPageText  //下一页自己定义的字 (例如:NEXT)zdu 武汉seo web前端工程师 -微创意

    lastPageText  //尾页自己定义的字   (例如:LAST)zdu 武汉seo web前端工程师 -微创意

----------------------------------------------------------------------------------------------------------------

zdu 武汉seo web前端工程师 -微创意

初始化参数案例:zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

$(function(){
	new Page({
		parent:$("#copot-page"),
		nowPage:7,
		pageSize:10,
		totalCount:100,
		setting: {
			defaultPage:7, 
			firstPageText:"HOME",
			prevPageText:"PREV",
			nextPageText:"NEXT",
			lastPageText:"LAST"
		},
		callback:function(nowPage,totalPage){
			alert("当前"+nowPage+"页--总共有"+totalPage+"页")
		}
	});
});


zdu 武汉seo web前端工程师 -微创意

如需详细的使用 请参照demo文档zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意


zdu 武汉seo web前端工程师 -微创意

分页版本:1.01
源码 demo演示