twbs-pagination分页插件的使用说明文档

文章标签: 帮助手册
  • :
  • 03-15 14:04
  • :
  • 34次
  • :
  • 0条
  • 1赞

简介一步一步的详细的教你如何把twbs-pagination分页插件应用到自己的网页里,及在使用twbs-pagination分页插件时的一些配置说明。l

基于jquery开发的twbs-pagination插件是一款使用起来非常容易和方便的网页分页插件,有需要此插件的朋友可以点下面的链接进行下载:

twbs-pagination分页插件的下载地址和官网地址

这里,站长一步一步的来教你如何把twbs-pagination插件应用到自己的网页当中:

第一步把插件的js文件引入到自己的网页里,当然要事先把jquery引入到自己的网页里,相信大家对这一步都不会有什么疑问,不过站长要介绍给大家的是,现在网上有很多免费的CDN加速,我们可以直接引入这些文件,这样可以节省一些我们自己网站服务器的资源:

<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>

第二步添加分页的CSS样式,如果您的网站使用的是bootstrap插件,那么可以直接使用bootstrap里的样式,而不需要自定义新的样式,为了大家更方便的掌握twbs-pagination插件的使用,站长自定义了分页的CSS样式:

<style type="text/css">
#PageCon {height:35px;text-align:center}
#PageShow ul{display:inline-block; margin:0 auto}
#PageShow li{ list-style:none;float:left}
#PageShow li a{color:#428bca;position:relative;padding:6px 12px;margin-left:-1px; line-height:1.6;background-color:#ffffff;border: 1px solid #dddddd;font-size:12pt}
#PageShow li.active a{z-index:2;color:#ffffff; cursor:default;background-color:#428bca;border-color:#428bca;}
#PageShow li.first a {border-bottom-left-radius:4px;border-top-left-radius:4px;}
#PageShow li.last a{border-top-right-radius:4px; border-bottom-right-radius: 4px;}
#PageShow .disabled a{color:#999999;cursor:not-allowed;background-color:#ffffff;border-color:#dddddd;}
</style>

第三步在网页里相应的位置里布置分页占位代码

<div id="PageCon"></div>
<Div id="PageShow" style="text-align:center"> 
<ul id="PageShowUL"></ul>              
</Div>

第四步加入执行分页动作的js代码

<script language="javascript">
$(function(){	
    $('#PageShowUL').twbsPagination({        
        totalPages:35,//总页数        
        visiblePages:7,//显示的页数        
        version:'1.1',//或1.0  1.1是自动根据当前页动态显示页码		
        first:"首页",		
        prev:"下一页",		
        next:"上一页",		
        last:"尾页",        
        onPageClick: function (event, page) {            
            $('#PageCon').text('第' + page+'页');        
        }    
    });		   
});
</script>

到这里,我们就已经完整的把twbs-pagintion分页插件加入到我们自己的网页里了,您可以点下面的链接查看在线使用的实例:

twbs-pagination分页插件使用实例演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-12 16:33:25