主要学习jQuery自定义控件的封装方法
一个自定义控件一般放在一个文件夹中，包含js和css文件，其名称和文件夹名称一致。
先上分页控件的效果图：
再上具体代码：
分页控件的js文件：
/*************************************************
@author YouLiping
@description 自定义分页控件
@date 2021-09-11
*************************************************/
(function ($) {
$.fn.YlpPage = function (options) {
//默认设置
var settings={
limit: 10, //每页显示的条数
limits: [10,20,30,40,50], //每页条数的选择项
groups:5, //连续出现的页码个数
count: 0, //数据记录总数
prev:'<', //上一页的显示内容
next:'>', //下一页的显示内容
onChange: function () {
return false; }
}
var opts = $.extend({
}, settings, options);
//总页数=记录数/每页记录数 (向上取整)
opts.totalPages = Math.ceil((opts.count - 0) / opts.limit);
creatYlpPageContainer($(this), opts);
createPageItem(1,$(this),opts);
setYlpPageJumpListener($(this),opts);
}
//创建容器
creatYlpPageContainer = function(obj , opts){
var YlpPage=$("<div></div>").attr("id",obj.attr("id")+"_YlpPage").addClass("YlpPage").appendTo(obj);
//左边显示记录条数
var YlpPageCountDiv=$("<div></div>").text("共"+opts.count+"条").attr("id",obj.attr("id")+"_YlpPageCount").addClass("YlpPageCountDiv");
YlpPageCountDiv.appendTo(YlpPage);
//中间页码容器
var YlpPageContainerDiv=$("<div></div>").attr("id",obj.attr("id")+"_YlpPageContainer").addClass("YlpPageContrainerDiv");
YlpPageContainerDiv.appendTo(YlpPage);
//右边跳转模块
var YlpPageJumpDiv=$("<div></div>").attr("id",obj.attr("id")+"_YlpPageJump").addClass("YlpPageJumpDiv");
YlpPageJumpDiv.appendTo(YlpPage);
//每页显示记录数的选择项
var YlpPageSelectElm=$("<select></select>");
for(i=0;i<opts.limits.length;i++){
$("<option value="+opts.limits[i]+">"+opts.limits[i]+" 条/页</option>").appendTo(YlpPageSelectElm);
}
YlpPageSelectElm.appendTo(YlpPageJumpDiv);
//输入框
$("<input type='text'></input>").appendTo(YlpPageJumpDiv);
//跳转按钮
$("<button>跳转</button>").appendTo(YlpPageJumpDiv);
}
//创建页码
createPageItem = function ( currentPage , obj , opts){
//清空原有容器
var PageContainerElm=$("#"+obj.attr("id")+"_YlpPageContainer");
PageContainerElm.empty();
//上一页
$("<a href='javascript:;'>"+opts.prev+"</a>").addClass("YlpPage-prev").appendTo(PageContainerElm);
//console.info("总的页数："+opts.totalPages+" 当前页码："+currentPage+" 显示页数为："+opts.groups);
//总页数 < 显示页数
if(opts.totalPages<=opts.groups){
for(i=1;i<=opts.totalPages;i++){
if(i == currentPage){
$("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").addClass("active").appendTo(PageContainerElm);
}else{
$("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").appendTo(PageContainerElm);
}
}
}else{
//总页数 > 显示页数
//前groups页
if(currentPage<opts.groups){
for(i=1;i<=opts.groups;i++){
if(i == currentPage){
$("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").addClass("active").appendTo(PageContainerElm);
}else{
$("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").appendTo(PageContainerElm);
}
}
if(opts.totalPages-opts.groups>1){
$("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);
}
$("<a href='javascript:;'></a>").addClass("YlpPageItem").text(opts.totalPages).appendTo(PageContainerElm);
}
//中间页
else if(currentPage>=opts.groups && currentPage<=(opts.totalPages-opts.groups+1)){
$("<a href='javascript:;'></a>").addClass("YlpPageItem").text(1).appendTo(PageContainerElm);
$("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);
for(i=1;i<=opts.groups;i++){
if((currentPage+i-Math.ceil(opts.groups/2)) == currentPage){
$("<a href='javascript:;'></a>").text(currentPage+i-Math.ceil(opts.groups/2)).addClass("YlpPageItem").addClass("active").appendTo(PageContainerElm);
}else{
$("<a href='javascript:;'></a>").text(currentPage+i-Math.ceil(opts.groups/2)).addClass("YlpPageItem").appendTo(PageContainerElm);
}
}
$("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);
$("<a href='javascript:;'></a>").addClass("YlpPageItem").text(opts.totalPages).appendTo(PageContainerElm);
}
//后groups页
else{
$("<a href='javascript:;'></a>").addClass("YlpPageItem").text(1).appendTo(PageContainerElm);
if(opts.totalPages-opts.groups>1){
$("<a href='javascript:;' style='cursor: default;'>...</a>").appendTo(PageContainerElm);
}
for( i=opts.totalPages-opts.groups+1;i<=opts.totalPages;i++ ){
if(i == currentPage){
$("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").addClass("active").addClass("active").appendTo(PageContainerElm);
}else{
$("<a href='javascript:;'></a>").text(i).addClass("YlpPageItem").appendTo(PageContainerElm);
}
}
}
}
//下一页
$("<a href='javascript:;'>"+opts.next+"</a>").addClass("YlpPage-next").appendTo(PageContainerElm);
setYlpPageListener(obj, opts);
}
//绑定页码的一些点击事件
setYlpPageListener = function (obj , opts){
//点击上一页
$("#"+obj.attr("id")+"_YlpPageContainer .YlpPage-prev").bind("click",function(){
console.info("点击上一页");
var currentPage=$("#"+obj.attr("id")+"_YlpPageContainer .active").text()-0-1;
if(currentPage>=1){
createPageItem(currentPage , obj , opts);
}
})
//点击下一页
$("#"+obj.attr("id")+"_YlpPageContainer .YlpPage-next").bind("click",function(){
console.info("点击下一页");
var currentPage=$("#"+obj.attr("id")+"_YlpPageContainer .active").text()-0+1;
if(currentPage<=opts.totalPages){
createPageItem(currentPage , obj , opts);
}
})
//点击页码
$("#"+obj.attr("id")+"_YlpPageContainer .YlpPageItem").bind("click",function(){
console.info("当前点击页为："+$(this).text());
var currentPage=$(this).text()-0;
createPageItem(currentPage , obj , opts);
})
}
//注意：跳转事件不要放在setYlpPageListener里一起监听，而是全局调用一次即可
//否则会出现幂次方地调用，运算消耗upupup
setYlpPageJumpListener = function( obj , opts){
//更改每页条数的选择项
$("#"+obj.attr("id")+"_YlpPageJump select").bind("change",function(){
//console.info("当前值为："+$(this).val());
opts.limit=$(this).val()-0;//更新每页显示条数
opts.totalPages = Math.ceil((opts.count - 0) / opts.limit);//更新总页数
createPageItem(1,obj,opts);
})
//点击跳转按钮
$("#"+obj.attr("id")+"_YlpPageJump button").bind("click",function(){
var targetPage=$("#"+obj.attr("id")+"_YlpPageJump input").val();
//console.info("要跳转的页码为："+targetPage);
var patt=/^[1-9]\d*$/;
if(patt.test(targetPage)){
if(targetPage<opts.totalPages){
createPageItem(targetPage-0,obj,opts);
}else{
createPageItem(opts.totalPages,obj,opts);
$("#"+obj.attr("id")+"_YlpPageJump input").val(opts.totalPages);
}
}
})
}
})(jQuery);
对应的css文件内容：
.YlpPage{
margin: 10px 0;
font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
/* ---------------------左边显示记录总数的------------------- */
.YlpPageCountDiv{
display: inline-block;
margin-right: 10px;
margin-bottom: 5px;
padding: 0;
border: none;
}
/* ------------------------页码容器------------------------- */
.YlpPageContrainerDiv{
display: inline-block;
margin-right: 10px;
margin-bottom: 5px;
}
.YlpPageContrainerDiv a{
border: 1px solid #eee;
text-decoration: none;
padding: 5px 14px;
height: 28px;
line-height: 28px;
color: #333;
font-size: 14px;
background-color: #fff;
}
/* 鼠标悬浮在页码上 */
.YlpPageItem:hover{
/* color: #2841f1; */
background-color: #eee;
}
/* 页码选中样式 */
.YlpPageItem.active{
background-color: #5c7fdc;
border:1px solid #5c7fdc;
color: #fff;
}
/* ---------------------右边页码跳转----------------------- */
.YlpPageJumpDiv{
display: inline-block;
margin-bottom: 5px;
}
.YlpPageJumpDiv select{
height: 28px;
line-height: 28px;
padding: 4px;
border-radius: 2px;
cursor: pointer;
margin-right: 8px;
border: 1px solid #eee;
}
.YlpPageJumpDiv input{
width: 40px;
margin: 0 10px;
padding: 2px 5px;
text-align: center;
height: 20px;
border: 1px solid #eee;
}
.YlpPageJumpDiv button{
padding: 0 10px;
cursor: pointer;
height: 28px;
line-height: 28px;
border-radius: 2px;
vertical-align: top;
background-color: #fff;
border: 1px solid #eee;
}
对应的调用示例：test.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>分页控件</title>
<link href="YlpPager.css" rel="stylesheet" />
<script src="jquery-1.9.1.min.js"></script>
<script src="YlpPager.js"></script>
</head>
<body>
<div style="margin:80px 0">
<p>Demo1:</p>
<div id="demo1" ></div>
</div>
<div>
<p>Demo2:</p>
<div id="demo2" style="margin-bottom: 80px"></div>
</div>
<script>
$().ready(function () {
//Demo1
var paras = {
limits:[10,15,20,25], //一页显示数据的选择项
groups:5, //一行显示15个页
count: 145 //一共有多少条记录
}
$("#demo1").YlpPage(paras);
//Demo2:
var paras = {
limit: 10, //一页有10条数据
limits:[10,20,30,40,50], //一页显示数据的选择项
groups:7, //一行显示15个页
count: 1023, //一共有多少条记录
prev:'上一页', //自定义上一页的显示内容
next:'下一页' //自定义下一页的显示内容
}
$("#demo2").YlpPage(paras);
});
</script>
</body>
</html>