kissygalleryteam / page Goto Github PK

page(分页组件)

• 版本：1.0
• 教程：http://gallery.kissyui.com/page/1.0/guide/index.html
• demo：http://gallery.kissyui.com/page/1.0/demo/index.html

组件介绍

• 根据已知总页数，生成带页码的分页
• 未知总页数的情况下，可以显示‘上一页’、‘下一页’
• 支持用户自定义跳转页码
• 支持设置各种文案，包括‘上一页’、‘下一页’、‘共x页’等
• 支持设置当前页左右显示多少页，例如当前页是5，左右个显示2也，则出现的效果为 3 4 5 6 7连续页面
• 可以支持设置边缘显示多少页，例如当前页是8，共20页， 左右边缘个显示2页，则效果为 1 2 ... 7 8 9 ... 19 20

初始化

• 完整版分页

    <div id="page1"></div>
    <script>
        KISSY.use('gallery/page/1.0/index', function (S, page) {
            var pageObj = new page({
            	container: "#page1",
            	total_page: 11,
            	continuous_page: 5,
            	current_page: 6,
            	preview_show: true,
            	first_show: true,
            	next_show: true,
            	last_show: true,
            	edge_page: 2,
            	skip_show: true
             });
               
         });
    </script>
  

• 淘宝版分页（显示为：上一页 4 5 6 ... 下一页）

    <div id="page2"></div>
    <script type="text/javascript">
        KISSY.use('gallery/page/1.0/index', function (S, page) {
            var pageObj = new page({
           	    container: "#page2",
           	    total_page: 20,
           	    continuous_page: 5,
           	    current_page: 7,
           	    preview_show: true,    
           	    next_show: true,      
           	    edge_page: 0
           });
    	});
    </script>
  

• 仅有上一页、下一页

    <div id="page3"></div>
    <script type="text/javascript">
    	KISSY.use('gallery/page/1.0/index', function (S, page) {
    		new page({
    			container: "#page3",
    			total_page: 0,
    			preview_show: true,
    			next_show: true
    	    });
    
    	});
    </script>
  

• 添加自定义事件

    <div id="page4"></div>
    <script type="text/javascript">
    	KISSY.use('gallery/page/1.0/index', function (S, page) {
    	    var pageObj = new page({
    	        container: "#page4",
    	        total_page: 0,
    	        preview_show: true,
    	        next_show: true
    	     });
    	
             pageObj.on("page:skip", function(e){
                 alert(e.pageNum);
             });
    	
    	});
    </script>
  

Attibute

Events

Method