原生js分页器插件
window.page = function page(ele, para) {
this.ele = document.querySelector(ele); this.options = {
count: 100,
pageSize: 8,
showPage: 5,
prevContent:"<上一页",
nextContent:">下一页",
currentPage:1,
callBack:function () { }
}
this.extend(para);
this.currentPage = this.options.currentPage;
this.totalPage = Math.ceil(this.options.count / this.options.pageSize);
this.sideNum = Math.floor(this.options.showPage / 2);
this.create();
} page.prototype.extend = function(para) {
for(var i in para) {
this.options[i] = para[i];
}
} page.prototype.create = function() {
var that = this; this.prev = document.createElement("div");
this.prev.className = "prev";
this.prev.innerHTML = this.options.prevContent;
this.ele.appendChild(this.prev); this.content = document.createElement("ul");
this.content.className = "middle"; this.ele.appendChild(this.content); this.next = document.createElement("div");
this.next.className = "next";
this.next.innerHTML = this.options.nextContent;
this.ele.appendChild(this.next);
this.createPage();
//上一页的点击事件
this.prev.onclick = function() {
that.currentPage--;
if(that.currentPage < 1) {
that.currentPage = 1;
}
if(this.className == "prev"){
that.createPage();
}
}
//下一页的点击事件
this.next.onclick = function() {
that.currentPage++;
if(that.currentPage > that.totalPage) {
that.currentPage = that.totalPage;
}
if(this.className=="next"){
that.createPage();
} }
} page.prototype.createPage = function() {
var that = this; that.options.callBack(that.currentPage,that.options.pageSize);
this.content.innerHTML = "";
var offsetSize = this.getOffetSize();
this.prev.className = "prev";
this.next.className = "next";
if(that.currentPage == 1){
//第一个
this.prev.className = "prev disabled";
}
if(that.currentPage >= this.totalPage){
this.next.className = "next disabled";
} for(var i = offsetSize.start; i <= offsetSize.end; i++) {
var li = document.createElement("li");
li.innerHTML = i;
if(i == that.currentPage) {
li.className = "active";
}
this.content.appendChild(li);
li.onclick = function() {
that.currentPage = +this.innerHTML;
that.createPage();
}
}
} page.prototype.getOffetSize = function() {
var start = 1;
var end = this.options.showPage;
if(this.currentPage >= this.totalPage){
this.currentPage = this.totalPage;
}
if(this.totalPage < this.options.showPage) {
return {
start: 1,
end: this.totalPage
}
}
start = this.currentPage - this.sideNum;
end = this.currentPage + this.sideNum;
if(start < 1) {
start = 1;
end = this.options.showPage;
}
if(end > this.totalPage) {
end = this.totalPage;
start = this.totalPage - 2 * this.sideNum;
}
return {
start: start,
end: end
}
}
function newPage(opt) {
var pageCom = new page(".page", {
count: opt.count,
currentPage:opt.currentPage,
pageSize: pageSize,
showPage: 5,
prevContent: "<上一页",
nextContent: ">下一页",
callBack:function (index,size) {
console.log(index,size); }
});
}
._page{
width: 100%;
height: 30px;
padding:20px 0;
margin-top: 30px;
margin-bottom: 40px;
text-align: right;
} ._page .prev,
._page .next {
display: inline-block;
width: 80px;
height: 30px;
background: #3385ff;
line-height: 30px;
text-align: center;
color: #fff;
vertical-align: middle;
cursor: pointer;
}
._page .disabled{
cursor: not-allowed;
background: #ccc;
} ._page .next {
margin-left: 4px;
} ._page .middle {
list-style: none;
display: inline-block;
vertical-align: middle;
} ._page .middle li {
width: 30px;
height: 30px;
background: #666;
line-height: 30px;
text-align: center;
color: #fff;
margin-left: 4px;
float: left;
} ._page .middle li.active {
background: limegreen;
}
原生js分页器插件的更多相关文章
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
- js分页器插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- (三)原生JS实现 - 插件 - 弹出层
创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...
- 原生js封装插件
https://www.jianshu.com/p/937c6003851a object-fit: cover:https://www.jianshu.com/p/a2ce70fa9584 flex ...
- 原生js实现单屏滚动
类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- Qt之模型/视图(委托)
概念 不同于模型 - 视图 - 控制器模式,模型/视图设计不包括用于管理与用户交互的一个完全独立的组件.一般情况,视图负责将模型数据呈现给用户以及处理用户输入.为了输入更加具有灵活性,则由委托来执行交 ...
- python datetime库使用和时间加减计算
datetime库使用 一.操作当前时间 1.获取当前时间 >>> import datetime >>> print datetime.datetime.now( ...
- python3.6+pycharm+robotframework 环境搭建
参考文档:https://www.cnblogs.com/chenyuebai/p/8359577.html, https://www.cnblogs.com/jiyanjiao-702521/p/9 ...
- error: cannot connect to daemon解决办法
本文链接:https://blog.csdn.net/ipinki1218/article/details/80704806运行adb shell时出现error: cannot connect to ...
- How can I get a Netty server to reload a TLS certificate when it is renewed?
java - How can I get a Netty server to reload a TLS certificate when it is renewed? - Stack Overflow ...
- Java 13新特性
switch表达式 switch表达式是Java 12开始就提供的预览特性,到了Java 13仍然没有被转正.此特性可以把switch的执行结果组合到复合表达式中进行运算. import java.t ...
- 004-nginx简介、安装配置【源码安装和mac安装】、基本使用
一.概述 1.1.Nginx是什么 Nginx是一款轻量级的Web服务器,也是一款轻量级的反向代理服务器[常用]. 1.2.Nginx能干什么 Nginx能干的事情很多,这里简要罗列一些: 1:直接支 ...
- 安装git和关联gitlab拉取代码步骤
1.双击 “Git-2.9.2-64-bit.exe”文件,一路next安装git程序 2.为github帐号添加SSH keys 3.使用git clone命令从GitLab上同步代码库时,如果使用 ...
- ContextCleaner ——Spark 应用程序的垃圾回收器
ContextCleaner是一个Spark服务,负责在应用程序范围内清除 shuffles, RDDs, broadcasts, accumulators和checkpointed RDDs,目的是 ...
- DB2学习笔记备忘 2018.5.9
DB2安装的时候选择了和系统用户一致的选项,然后登陆的时候,连接的时候输入的就是计算机用户的用户名和密码. 1.3 DB2数据库体系结构 系统 一个系统表示DB2的一个安装.在一个由很多及其组成的网络 ...