翻页插件 jquery
//css
<style>
* {
padding:;
margin:;
list-style: none;
}
.wrapper {
width: 100%;
cursor: pointer;
}
.wrapper > li, .wrapper > span{
display: inline-block;
border: 1px solid black;
margin-right: 10px;
padding: 5px;
}
.tabNumber.active{
background-color: aqua;
color: #fff;
}
</style>
//html
<ul class="wrapper"></ul>
<script src='jquery.js'></script>
<script src='turnPage.js'></script>
<script> $('.wrapper').turnPage({ curPage: 5, allPage: 10, changePage(page) { console.log(page) } }) </script>
//turnPage.js(function ($) {
function turnPage(options) {
this.wrap = options.wrap //父级元素
this.curPage = options.curPage //当前页
this.allPage = options.allPage //总页数
this.fillHtml()
this.bindEvent()
this.changePage = options.changePage //回调函数
}
turnPage.prototype.fillHtml = function () {
//清空父元素内所有子元素
$(this.wrap).empty()
//添加上一页
if (this.curPage > 1) {
$(this.wrap).append('<li class="prev-page">上一页</li>')
}
//添加第一页
if (this.curPage - 2 > 1) {
$(this.wrap).append('<li class="tabNumber">1</li>')
}
if (this.curPage - 2 > 2) {
$(this.wrap).append('<span>...</span>')
}
for (var i = this.curPage - 2;i < this.curPage + 2; i ++) {
if (i > 0 && i <= this.allPage) {
if (i === this.curPage) {
$(this.wrap).append('<li class="tabNumber active">'+ i +'</li>')
} else {
$(this.wrap).append('<li class="tabNumber">'+ i +'</li>')
} }
}
if (this.curPage + 1 < this.allPage) {
$(this.wrap).append('<span >...</span>')
}
if (this.curPage + 2 < this.allPage) {
$(this.wrap).append('<li class="next-page">下一页</li>')
}
}
turnPage.prototype.bindEvent = function () {
var self = this
$('.prev-page', this.wrap).click(function () {
if (self.curPage > 1) {
self.curPage--
self.change()
}
})
$('.next-page',this.wrap).click(function () {
if(self.curPage < self.allPage) {
self.curPage++
self.change()
}
})
$('.tabNumber', this.wrap).click(function (e) {
self.curPage = parseInt($(this).text())
self.change()
})
}
turnPage.prototype.change = function () {
this.fillHtml()
this.bindEvent()
this.changePage(this.curPage)
}
$.fn.extend({
turnPage: function (options) {
options.wrap = this
new turnPage(options)
return this
}
})
})(window.jQuery)
效果图: 样式比较简单
翻页插件 jquery的更多相关文章
- 移动端翻页插件dropload.js(支持Zepto和jQuery)
一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服 ...
- jQuery支持mobile的全屏水平横向翻页效果
这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...
- jQuery中turn.js(翻页效果)学习笔记
Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...
- 翻书插件:bookblock.js
BookBlock 是一个 jQuery插件,用来制作带有翻页效果的小书册.可以用任何形式的内容,比如图像或文本.插件会在翻页时利用变形模拟手工翻页,并产生重叠的阴影以达到更逼真的效果. 基本页面 & ...
- 6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
- 10款无限滚动自动翻页jquery插件
2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...
- 15个最佳jQuery的翻页书效果的例子
在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
随机推荐
- 每天进步一点点------ISE 12.4的FPGA设计基本流程
基于ISE 12.4的FPGA设计基本流程 ISE是使用XILINX的FPGA的必备的设计工具,它可以完成FPGA开发的全部流程,包括设计输入.仿真.综合.布局布线.生成BIT文件.配置以及在线调试等 ...
- 苹果公司以注重客户隐私闻名世界,但为什么Siri泄露了我的秘密?
编辑 | 于斌 出品 | 于见(mpyujian) 苹果的Siri因为其作为智能语音助手,方便人们打电话.发信息等功能,被人们所喜爱,但是最近,Siri好像有一些问题,让我们怀疑这位"小伙伴 ...
- 【c++】零基础的自修课 01-开发工具的安装(code::blocks)
1/开发工具的下载地址: ·(选用 visual studio开发工具,有区分mac和windows版本)https://visualstudio.microsoft.com/zh-hans/down ...
- docker-api的使用(java)
通过docker-api来执行docker相关的操作. 配置 可以在docker启动文件docker.service中加入如下 vi /lib/systemd/system/docker.serv ...
- CentOS7 卸载Firefox
先进入管理员模式 执行: yum remove firefox 然后用whereis 查看,却发现还是有: [root@localhost ~]# whereis firefox firefox: / ...
- 转 C#中哈希表(HashTable)的用法详解
看了一遍有关哈希表的文字,作者总结的真是不错 .收藏起来 1. 哈希表(HashTable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提 ...
- JAXB--obj2xml&xml2obj
参考: https://www.cnblogs.com/mumuxinfei/p/8948299.html 去掉 xsi:type="echoBody" xmlns:xsi=&q ...
- 1.学习一下Angularjs的promisee
1.首先来了解一下promisee: 在谈论Promise之前我们要了解一下一些额外的知识:我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任 ...
- 有源汇有上下界最大流 (ZQU1591)
题意:现在的网络有一个源点s和汇点t,求出一个流使得源点的总流出量等于汇点的总流入量,其他的点满足流量守恒,而且每条边的流量满足上界和下界限制. 思路:要满足每一个点的流量守恒,我们可以尝试像无源汇上 ...
- [LEETCODE] 初级算法/数组 1.1删除排序数组中的重复项
题目: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. ...