圆月山庄资源网 Design By www.vgjia.com
本文实例讲述了jQuery实现的分页插件。分享给大家供大家参考,具体如下:
呈现
html文件
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="/UploadFiles/2021-04-02/引入一个jquery文件,这里就不提供了">css文件
@charset "UTF-8"; /*分页所在的div*/ .devidePage{ margin-top:300px; margin-left: 400px; height: 50px; width: 800px; /* background: gray; */ } /*显示页数的div*/ .pages{ float:left; margin-left:2px; height:50px; width:50px; background: #EEEEEE; text-align:center; line-height:50px; cursor:pointer; } /*首页*/ .theFirstPage{ float:left; margin-left:2px; height:50px; width:50px; background: #EEEEEE; text-align:center; line-height:50px; cursor:pointer; } /*末页*/ .theLastPage{ float:left; margin-left:2px; height:50px; width:50px; background: #EEEEEE; text-align:center; line-height:50px; cursor:pointer; } /*上一页*/ .prePage{ float:left; margin-left:2px; height:50px; width:50px; background: #EEEEEE; text-align:center; line-height:50px; cursor:pointer; } /*下一页*/ .nextPage{ float:left; margin-left:2px; height:50px; width:50px; background: #EEEEEE; text-align:center; line-height:50px; cursor:pointer; } /*当前页数*/ .currentPage{ float:left; margin-left:2px; height:50px; width:100px; background: #EEEEEE; text-align:center; line-height:50px; } /*总页数*/ .pageNums{ float:left; margin-left:2px; height:50px; width:100px; background: #EEEEEE; text-align:center; line-height:50px; } /*输入页数*/ .jump{ float:left; margin-left:2px; height:48px; width:50px; border:0.5px solid #EEEEEE; } /*跳转*/ .jumpClick{ float:left; margin-left:2px; height:50px; width:50px; background: #EEEEEE; text-align:center; line-height:50px; cursor:pointer; }js文件
/** * 侠 2018-8-15 */ function loadAll() { var theFirstPage = "<div class=\"theFirstPage\" οnclick=\"theFirstPage()\">首页</div>"; var prePage = "<div class=\"prePage\" οnclick=\"prePage()\">上一页</div>"; var pagess = "<div id=\"page_1\" class=\"pages\" οnclick=\"changePage(this.id)\">1</div>" + "<div id=\"page_2\" class=\"pages\" οnclick=\"changePage(this.id)\">2</div>" + "<div id=\"page_3\" class=\"pages\" οnclick=\"changePage(this.id)\">3</div>" + "<div id=\"page_4\" class=\"pages\" οnclick=\"changePage(this.id)\">4</div>" + "<div id=\"page_5\" class=\"pages\" οnclick=\"changePage(this.id)\">5</div>"; var nextPage = "<div class=\"nextPage\" οnclick=\"nextPage()\">下一页</div>"; var theLastPage = "<div class=\"theLastPage\" οnclick=\"theLastPage()\">末页</div>"; var currentPages = "<div id=\"currentPage\" class=\"currentPage\">第1页</div>"; var pageNums = "<div id=\"pageNums\" class=\"pageNums\">共" + pages + "页</div>"; var jump = "<input id=\"jump\" type=\"text\" class=\"jump\" " +"οnkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\"" +" οnblur=\"this.v();\">"; var jumpClick = "<div class=\"jumpClick\" οnclick=\"jump()\">跳转</div>"; $("#pages").html(theFirstPage + prePage + pagess + nextPage + theLastPage + currentPages + pageNums + jump + jumpClick); } loadAll(); function defultBackground() { $("#page_1").css("background", "#66b2ff"); //配置选中颜色 } defultBackground(); function changeBackground() { $(".pages").css("background", "#EEEEEE"); //配置默认颜色 for (var i = 0; i < 5; i++) { if ($("#page_" + (i + 1)).text() == $("#currentPage").text().split("第")[1] .split("页")[0]) { $("#page_" + (i + 1)).css("background", "#66b2ff"); //配置选中颜色 break; } } } function theFirstPage(){ $('#currentPage').html("第" + 1 + "页"); $("#page_1").html(1); $("#page_2").html(2); $("#page_3").html(3); $("#page_4").html(4); $("#page_5").html(5); changeBackground(); getData(getCurrentPageNum()); } function theLastPage(){ $('#currentPage').html("第" + pages + "页"); $("#page_1").html(pages-4); $("#page_2").html(pages-3); $("#page_3").html(pages-2); $("#page_4").html(pages-1); $("#page_5").html(pages); changeBackground(); getData(getCurrentPageNum()); } function changePage(id) { var pagenum = parseInt($("#" + id).text()) - 1; $('#currentPage').html("第" + $("#" + id).text() + "页"); if ((id.split("_")[1] == 1) && (parseInt($("#" + id).text()) > 1)) { $("#page_1").html(parseInt($("#page_1").text()) - 1); $("#page_2").html(parseInt($("#page_2").text()) - 1); $("#page_3").html(parseInt($("#page_3").text()) - 1); $("#page_4").html(parseInt($("#page_4").text()) - 1); $("#page_5").html(parseInt($("#page_5").text()) - 1); } if ((id.split("_")[1] == 5) && (parseInt($("#" + id).text()) < pages)) { $("#page_1").html(parseInt($("#page_1").text()) + 1); $("#page_2").html(parseInt($("#page_2").text()) + 1); $("#page_3").html(parseInt($("#page_3").text()) + 1); $("#page_4").html(parseInt($("#page_4").text()) + 1); $("#page_5").html(parseInt($("#page_5").text()) + 1); } changeBackground(); getData(getCurrentPageNum()); } function prePage() { var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0]; var currentPageNum = parseInt(currentPageNumStr); if (currentPageNum > 1) { var toPageNum = currentPageNum - 1; $("#currentPage").html("第" + toPageNum + "页"); if ((currentPageNum > 1) && ($("#page_1").text() != 1)) { $("#page_1").html(parseInt($("#page_1").text()) - 1); $("#page_2").html(parseInt($("#page_2").text()) - 1); $("#page_3").html(parseInt($("#page_3").text()) - 1); $("#page_4").html(parseInt($("#page_4").text()) - 1); $("#page_5").html(parseInt($("#page_5").text()) - 1); } changeBackground(); getData(getCurrentPageNum()); } else { } } function nextPage() { var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0]; var currentPageNum = parseInt(currentPageNumStr); if (currentPageNum < pages) { var toPageNum = currentPageNum + 1; $("#currentPage").html("第" + toPageNum + "页"); if (currentPageNum >= 5 && ($("#page_5").text() != pages)) { $("#page_1").html(parseInt($("#page_1").text()) + 1); $("#page_2").html(parseInt($("#page_2").text()) + 1); $("#page_3").html(parseInt($("#page_3").text()) + 1); $("#page_4").html(parseInt($("#page_4").text()) + 1); $("#page_5").html(parseInt($("#page_5").text()) + 1); } changeBackground(); getData(getCurrentPageNum()); } else { } } function jump() { var numstr = $("#jump").val(); var num = parseInt(numstr); if ((num < 1) || (num > pages)) { alert("输入不合法"); $("#jump").val(1); } else { $("#currentPage").html("第" + num + "页"); if (num >= 5) { $("#page_5").html(num); $("#page_4").html(num - 1); $("#page_3").html(num - 2); $("#page_2").html(num - 3); $("#page_1").html(num - 4); } else { if (num = 4) { $("#page_5").html(num + 1); $("#page_4").html(num); $("#page_3").html(num - 1); $("#page_2").html(num - 2); $("#page_1").html(num - 3); } if (num = 3) { $("#page_5").html(num + 2); $("#page_4").html(num + 1); $("#page_3").html(num); $("#page_2").html(num - 1); $("#page_1").html(num - 2); } if (num = 2) { $("#page_5").html(num + 3); $("#page_4").html(num + 2); $("#page_3").html(num + 1); $("#page_2").html(num); $("#page_1").html(num - 1); } if (num = 1) { $("#page_5").html(num + 4); $("#page_4").html(num + 3); $("#page_3").html(num + 2); $("#page_2").html(num + 1); $("#page_1").html(num); } } changeBackground(); getData(getCurrentPageNum()); } } function getCurrentPageNum(){ return parseInt( $("#currentPage").text().split("第")[1].split("页")[0] ); }更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
标签:
jQuery,分页插件
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]