基于Bootstrap仿淘宝分页控件实现代码


Posted in Javascript onNovember 07, 2016

大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破

一、淘宝分页控件了解

先上一张淘宝的分页图片:

基于Bootstrap仿淘宝分页控件实现代码

根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺的,还有一部分是拓展部分,这一部分是相当于增加一些功能来增强和改善用户体验的,但是在很多现成的分页控件是没有实现的(这个也是一个自己造轮子的理由之一)。但是依据我对淘宝分页控件的理解再结合工作上面的需求分析,我认为淘宝的分页控件要改成具有普适性的业务功能控件还需要有这些改动:

1、比如拓展部分感觉比较偏小了一点,以我个人的体验上来说不是挺好

2、由于淘宝的宝贝比较多,所以只需要显示到一百页就行了,但是在实际的项目中我们可能没有100页,所以我们需要显示到最后一页的页数就行了

3、由于拓展部分不是必须的,只是可以增强用户体验,但是有些时候页面给分页预留的位置不够,这个时候我们就可以通过设置来除去这一部分

二、基于bootstrap的仿淘宝分页控件输入参数设定

想一想,对于普通的分页控件,我们需要什么元素:pageNo(当前页),pageSize(每页渲染个数),count(总数),这几个控件是必不可少的,pageNo主要是用来标识要渲染第几页为当前页,pageSize和count主要是用来计算出要渲染的页数(pageCount),pageCount的实现逻辑如下:

var pageCount=0;
if(count%pageSize==0){
pageCount=count/pageSize;
}esle{
pageCount=count/pageSize+1;
}

这样我们就能保证了pageCount为我们所要渲染的最终的页数,除了这个基础配置还有一些其他的配置我认为也是需要增加的

1、增加对最后一个确定按钮的名称修改,这个可能在我们的业务中不叫确定而叫修改之类的名称,所以如果有一个可以修改的功能,那么也方便了业务的拓展(default:"确定")

2、主色调修改,我们知道像淘宝的分页控件采用的是橙黄色的主色调,然后如果是按照经典的bootstrap的配色方案来看,是采用浅蓝色的,所以这个也要支持修改(default:lightblue)

3、支持showNum的配置,showNum指的是当pageNo=1的时候要显示的页数,例如淘宝的分页控件显示的是1到5页外加一个省略号。所以showNum=5,表示显示5页;(default:6)

4、支持skipPart,这一部分指的就是分页控件的拓展部分,这部分我们应该要按照需求来决定是否显示(default:true)

* 括号内为参数的默认值

三、基于bootstrap仿淘宝插件设计思路

根据对淘宝网站的观察,以及对对其设计上面的思考,我认为大致上的插件设计思路如下:

基于Bootstrap仿淘宝分页控件实现代码

第一步,接收用户的传入参数

第二步,将用户的部分传入参数传递给一个分页算法,然后通过分页算法将一些最终要渲染的结果通过JSON的形式返回出来

第三步,对JSON数据进行渲染使其最终生成分页控件

这样的设计主要是符合软件工程的高内聚、低耦合的设计思想,通过这个设计即使分页算法的实现相对的困难,但是我们却把分页的渲染与算法的实现分离开来,有利于后期功能的拓展,提高了组件的可维护性。

四、分页算法的设计

其实这一块的分页算法页说不上设计,纯粹的就是模仿吧,模范淘宝的分页规则,在默认的情况下,我们会分成这样的四种情况(以淘宝为例)

1、pageNo为1-5页的时候,将pageNo的当前页改变为点击的页数

2、当pageNo为6,7页的时候,增加渲染1到当前页+1,例如选的是6页的话,那么我们就渲染1~7页

3、接着我们判断pageNo是否大于等于pageCount(当前页)-showNum,如果是的话,也就是说明到了最后的那几页了,那么我们这个时候就要直接渲染最后的showNum页,并把pageNo点亮

4、最后的一种情况:除了上面提到的这些情况,剩下的我们都是通过渲染pageNo的前2页和pagNo的后两页,还有就是渲染第一页和第二页。

接下来就来分享一下我在分页算法上面的设计:

//分页算法逻辑,主要对分页进行逻辑运算,不做渲染,返回值为JSON
function PageAlgorithm(pageNo,pageSize,count,showNum){
var data="";
if(pageNo==1){
data='{"algorithm":[{"text":"上一页","num":0,"status":"disabled"}';
}else{
data='{"algorithm":[{"text":"上一页","num":"'+(pageNo-1)+'","status":"abled"}';
}
//判断分页类型
if(count>showNum){
if(pageNo<=showNum+2){
//判断pageNo是否在要初始化显示的页码内
if(pageNo<=showNum){
for(var i=1;i<=showNum;i++){
if(pageNo==i){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
} 
}
if(pageNo==showNum){
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}else{
for(var i=1;i<=pageNo;i++){
if(i==pageNo){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
if(pageNo!=count){
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
//选中最后一页时,将省略号隐藏
if(pageNo!=count){
if(pageNo!=(count-1)){
data+=',{"text":"…","num":"more","status":""}';
}
}
}else if(pageNo>count-showNum){
data+=',{"text":"1","num":"1","status":"abled"}';
data+=',{"text":"2","num":"2","status":"abled"}';
data+=',{"text":"…","num":"more","status":"disabled"}';
for(var i=count-showNum+1;i<=count;i++){
if(pageNo==i){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
}
else{
data+=',{"text":"1","num":"1","status":"abled"}';
data+=',{"text":"2","num":"2","status":"abled"}';
data+=',{"text":"…","num":"more","status":"disabled"}';
for(var i=pageNo-2;i<=pageNo+2;i++){
if(i==pageNo){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
data+=',{"text":"…","num":"more","status":"disabled"}';
}
}else{ 
for(var i=1;i<=count;i++){
if(pageNo==i){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
}
if(pageNo==count){
data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"disabled"}]}';
}else{
data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"abled"}]}';
}
var json_return = JSON.parse(data);
return json_return;
}

注:不必关注里面的JSON最终要呈现的格式,主要的原因是这些参数最终是要传递到下一个方法中去渲染分页控件,而这些相当于是在两个方法中约定的,我们主要要关注的是怎样对分页控件进行类型上的区别,从而渲染出不同的JSON数据

五、jPage.js插件说明

这一款插件就是本次教程的一个最终的产物,这一款插件在实现方案上面是仿照淘宝的逻辑,但是由于公司的主营业务与淘宝的业务上面有些区别,所以样式风格不太一致。但是也是能够很好的满足一般业务上面常见的需求。

具体怎么使用,我们来举个例子

我们要得到这样的一个分页控件,总数据为70条,每页显示3条数据,并且要显示拓展部分,我们只需要如下这样去调用就行了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="jPage.js"></script>
<script type="text/javascript">
$("#test").page({count:70,pageSize:3,skipPart:true});
</script>
</body>
</html>

最终的效果如下:

基于Bootstrap仿淘宝分页控件实现代码

这个简单吧大家。接下来福利来了,这款插件是开源的,不用998,免费带回家(要的请往下看)。

六、插件下载

由于篇幅有限,所以插件的更多用法没法在文中体现,但是为了各位同学可以更好的学习使用这一款插件,在这里为大家提供了比较详细的文档说明。并且下载的版本相当于1.0版本。后期如果时间允许的话会对这款插件做一个持续的版本迭代。下载地址,如果觉得好的话,请为这个插件点赞。

以上所述是小编给大家介绍的基于Bootstrap仿淘宝分页控件实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 #Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 #Javascript
AngularJS实现Input格式化的方法
Nov 07 #Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 #Javascript
webpack常用配置项配置文件介绍
Nov 07 #Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 #Javascript
学习JavaScript图片预加载模块
Nov 07 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP分页详细讲解(有实例)
2013/10/30 PHP
php生成RSS订阅的方法
2015/02/13 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
自我评价中英文语句
2013/11/30 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
干部下基层实施方案
2014/03/14 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
西双版纳导游词
2015/02/03 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
redis数据一致性的实现示例
2022/03/18 Redis