jquery扩展代码少的分页bar
直接上图,上代码了,代码量少,不解释那么多了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
//生成Pager,{ pageNum: 5, total: 132, pageSize:10, viewSize: 10, click: function(pn){ } };
$.fn.pager = function (ops) {
ops = $.extend({ pageNum: 1, total: 100, pageSize: 10, viewSize: 9, click: function (pn) { } }, ops);
var pt = parseInt(ops.total / ops.pageSize + (ops.total % ops.pageSize == 0 ? 0 : 1));
var arr = ['<a class="first" href="javascript:;">首页</a>'];
var left = parseInt(ops.pageNum > (ops.viewSize / 2) ? (ops.viewSize / 2) : ops.pageNum);
var start = ops.pageNum - left <= 0 ? 1 : ops.pageNum - left;
for (var i = start; i <= start + ops.viewSize && i <= pt; i++)
arr.push('<a class="' + (i == ops.pageNum ? 'current' : '') + '" href="javascript:;">' + i + '</a>');
arr.push('<a class="last" href="javascript:;">末页</a>');
$(this).html(arr.join(''));
$(this).find('a').click(function () {
var pn = $(this).text();
pn = pn == '首页' ? 1 : pn;
pn = pn == '末页' ? pt : pn;
ops.click(parseInt(pn));
});
return ops;
} onload = function () {
var ops = $('.pager').pager({
pageNum: 1, total: 163, pageSize: 10, viewSize: 9, click: function (pn) {
ops.pageNum = pn;
$('.pager').pager(ops);
}
});
}
</script>
<style>
.pager {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 1px solid #dddddd;
border-radius: 3px;
display: inline-block;
clear: both;
} .pager a, .pager span {
font-size: 14px;
color: #428bca;
border-right: 1px solid #dddddd;
padding: 4px 9px;
float: left;
text-decoration: none;
} .pager span {
color: #fff;
background: #428bca;
} .pager a:hover {
color: #2a6496;
background: #f2f2f2;
} .pager a.last {
border-right: 0;
} .pager a.current{
color:#333;
}
</style>
</head>
<body>
<div>asd</div>
<div style="text-align:center">
<div class="pager"></div>
</div>
<div>asd</div>
</body>
</html>
jquery扩展代码少的分页bar的更多相关文章
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍
原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...
- Jquery扩展-手把手带你体验
Jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下.当然扩展离不开Jquery几个基础方法 1:$.extend() 2:$.fn.func ...
- jquery扩展 $.fn
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...
随机推荐
- Selenium的自我总结1
搞了一段时间的Selenium Web的自动化,针对项目要搭建了一套适合项目的测试框架(Selenium[POM/DataDriver]+TestNG+Ant+Jenkins).在最开始看Seleni ...
- [转载]Memory Limits for Windows and Windows Server Releases
Memory Limits for Windows and Windows Server Releases This topic describes the memory limits for sup ...
- Windows 聆听 简单使用体验
1. 点击windows 按键 输入语音 按照操作 选择语音 并且读出那一段话. 2. 可以将windows 语音识别 添加到开始面板 3. 使用时 点击 该图标,然后点击麦克风按钮 聆听效果如图示 ...
- Angular require(抄别的)
require参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为:?如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数.^如果添加了^前缀,指令会在上游的指 ...
- hdu 4685(强连通分量+二分图)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4685 题意:n个王子和m个公主,王子只能和他喜欢的公主结婚,公主可以和所有的王子结婚,输出所有王子可能 ...
- SQL ROUND函数的使用
SQL ROUND函数的使用 SQL ROUND函数是对数据进行制定精度的取值. 第一个参数是取值的数据,第二个参数是精度,第三个参数是数据取值模式(四舍五入还是截断),其中第三个参数是可选参数, ...
- NCO
NCO 摘自百度百科 (数字振荡器) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . 数字控制振荡器(NCO,numerically controlled oscillator)是 ...
- python---str和repr
在 Python 中要将某一类型的变量或者常量转换为字符串对象通常有两种方法,即 str() 或者 repr() . 区别与使用 函数str() 用于将值转化为适于人阅读的形式,而repr() 转化为 ...
- BZOJ3091城市旅行——LCT区间信息合并
题目描述 输入 输出 样例输入 4 5 1 3 2 5 1 2 1 3 2 4 4 2 4 1 2 4 2 3 4 3 1 4 1 4 1 4 样例输出 16/3 6/1 提示 对于所有数据满足 1& ...
- Redis之发布订阅
一 什么是发布订阅 发布订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都将得到通知 Redis 发布订阅(pub/sub)是一种消息通信模式: ...