jquery+css3打造一款ajax分页插件(自写)
发布时间:2020-12-14 23:15:32 所属栏目:资源 来源:网络整理
导读:最近公司的项目将好多分页改成了ajax的前台分页 以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果 如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现 css3的动画本来就是帮我们取代js中这部分动画代码的 使js更纯粹地去实现逻
最近公司的项目将好多分页改成了ajax的前台分页 支持IE6+,但没有动画效果 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var kpage; $(function () { tocount(); }); function tocount() { //初始化 $.ajax({ url: "/Service/DBCount",type: "post",success: function (e) { kpage = $("#divPage").page({ dataCount: e,pageChange: topage }); } }); } function topage(i,s) { //数据查询 $("#divInfo").html("加载中..."); $.ajax({ url: "/Service/List",data: { PageSize: s,PageIndex: i },success: function (r) { $("#tList").html(r); $("#divInfo").html(""); },error: function () { $("#divInfo").html("加载失败...<a href='javascript:reload();'>重试</href>"); } }); } function reload() { kpage.reload(); } </script> 具体jquery.kun_page.js: /* jquery.kun_page.js lxk 2014.06.16 www.cnblogs.com/wingkun --------------------------------- 参数config: dataCount:数据总数 pageSize:页数据条数 maxButton:页码按钮数目 showCustom:是否能手动输入页码 pageChange:页变更事件 参数:(i,s,c) i:pageIndex,当前页 s:pageSize,页数据条数 c:pageCount,总页数 */ (function($){ $.fn.page = function (config) { if (this.length != 1) { throw "k_page:如有多个page请调用多次!"; } var defaults = { dataCount: 1,pageSize: 10,maxButton: 6,showCustom: true,pageChange: null } config = $.extend(defaults,config); if (config.maxButton <= 1) config.maxButton = 2; if (config.pageSize < 1) config.pageSize = 1; //按钮数目需偶数 if (config.maxButton % 2 != 0) config.maxButton++; var pageIndex = 1,pageCount,move_kf; //初始化页数 function initcount() { pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1; } initcount(); var prev = " 样式kun_page.css: /* kun_page.css lxk 2014.06.16 www.cnblogs.com/wingkun */ .kun_page {font-size: 12px;line-height:23px;font-family:"Microsoft YaHei";} .kun_page .k_p_page{position:relative;} .kun_page div {float: left;margin: 3px;border: solid 1px #ccc;cursor: pointer;color: #333;min-width:12px;text-align:center;padding:0px 5px;} .kun_page em {display: block;float: left;margin: 2px;} .kun_page .k_p_current {background: #ccc;color: #fff;-webkit-animation:scroll_b 300ms;animation:scroll_b 300ms;} .kun_page .k_cl {clear: both;float: none;border: none;margin: 0px;padding: 0px;width:0px;height:0px;} .kun_page .k_custom {display: block;float: left;margin: 3px 3px 3px 20px;} .kun_page .k_ipt {width: 30px;height: 21px;border: solid 1px #ccc;text-align: center;vertical-align:middle;} .kun_page .k_m{ opacity: 0; width: 1%; height: 1%;top:0px;left:0px; display:block; position: absolute; } .kun_page .sc_l{background: -webkit-gradient(linear,0 100%,100% 100%,from(#CCCCCC),to(#645F5F)); -webkit-transform:translate(-50px);-webkit-animation:scroll_k_l 300ms linear; background: -moz-linear-gradient(left,#CCCCCC 0%,#645F5F 100%); background: -ms-linear-gradient(left,#645F5F 100%); transform:translate(-50px);animation:scroll_k_l 300ms linear; } .kun_page .sc_r{background: -webkit-gradient(linear,from(#645F5F),to(#CCCCCC)); -webkit-transform:translate(50px); -webkit-animation:scroll_k_r 300ms linear; background: -moz-linear-gradient(left,#645F5F 0%,#CCCCCC 100%); background: -ms-linear-gradient(left,#645F5F 100%); transform:translate(50px); animation:scroll_k_r 300ms linear; } /* animation */ @-webkit-keyframes scroll_k_l{ 0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;} 99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;} 100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;} } @-webkit-keyframes scroll_k_r{ 0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;} 99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;} 100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;} } @keyframes scroll_k_l{ 0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;} 99%{transform:translate(-20px);opacity:0;width:200%;height:100%;} 100%{transform:translate(-20px);opacity:0;width:1%;height:1%;} } @keyframes scroll_k_r{ 0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;} 99%{transform:translate(20px);opacity:0;width:200%;height:100%;} 100%{transform:translate(20px);opacity:0;width:1%;height:1%;} } @-webkit-keyframes scroll_b{ 0%,99%{background: #fff;color: #000;} 100%{background: #ccc;color: #fff;} } @keyframes scroll_b{ 0%,99%{background: #fff;color: #000;} 100%{background: #ccc;color: #fff;} } 样式和动画都可以自己修改(好吧,动画效果很朴素,闹哪样,明明想了很久好吗) pageChange事件里面也没有过多的其他处理,比如我们公司前后台处理json就有一套方案,ajax提交的参数也有处理 所以若有需求,完全可以在我的代码上再封装一层 另外插件内公开的方法暂只有几个,可视情况增加 代码下载(后台查询代码需要自己写一个):这里 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 使用PowerShell创建IIS7 Web应用程序,并将SSL设置为“Requi
- HTML – 使用CSS进行布局(或者我应该放弃并使用表格?)
- jquery实现的鼠标拖动排序Li或Table
- domain-name-system – 如何将IP请求转发到特定端口
- 微信小程序 仿美团分类菜单 swiper分类菜单
- domain-name-system – 我可以使用windows dns自动更新在DN
- html – ERROR errors.GrailsExceptionResolver – Concurr
- 跳过HTML表格
- 小程序同构方案 kbone 分析与适配
- monitoring – 通过nsclient Web服务器运行自定义脚本/ exe