WEB前端组件思想【分页】
DEMO1:
很早就想写一些功能性的组件，无奈技术有限一点一点的边工作，边学。
近日工作中用到分页功能，当然由于加快业务进度，第一选择肯定是选择插件，但是实用性来说，还是有那么一点不适合。毕竟插件是通用的。
经过几日加班后回家再熬夜学习。稍有收获。
从最简单的写起：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
margin: 6px;
}
</style>
<script type="text/javascript">
//接之前的逻辑判断 如果 nownum 1了怎么办 变2了 最前也变成 -1 0
//必须再加判断 window.onload = function()
{
page({
id:"div1",
nowNum:5,
allNum:10,
callback:function(now,all){
alert("当前页"+now+"总共页"+all)
}
})
function page(opt)
{
if(!opt.id){
return false;
}
var obj = document.getElementById(opt.id);
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum ||5;
//必须判断回调是否存在；
var callback= opt.callback || function(){};
//写首页 上一页 大于6才能从中间开始向2边扩散
if (nowNum >4 && allNum >=6) {
var oA = document.createElement("a");
oA.href = "#"+1;
oA.innerHTML= "首页";
obj.appendChild(oA);
}
//上一页 大于等于2
if (nowNum >=2 ) {
var oA = document.createElement("a");
oA.href = "#"+(nowNum-1);
oA.innerHTML= "上一页";
obj.appendChild(oA);
} if ( allNum<=5) {
for (var i=1;i<=allNum;i++) {
var oA = document.createElement("a");
oA.href = "#"+i;
if (nowNum == i) {
oA.innerHTML = i;
}else{
oA.innerHTML = "["+i+"]";
}
obj.appendChild(oA);
} }else{
for (var i=1;i<=5;i++) {
var oA = document.createElement("a");
if(nowNum == 1 || nowNum == 2)
{
oA.href = "#"+i;
if(nowNum == i){
oA.innerHTML = i;
}else{
oA.innerHTML = "["+i+"]";
}
obj.appendChild(oA);
} //判断最后2页的值 找准规律 6 7 8 9 10
else if((allNum - nowNum) ==0 || (allNum - nowNum) ==1){
oA.href = "#"+ (allNum-5+i);
//重点分析 判断 最后2项 9的时候 10的时候
if((allNum - nowNum) ==0 && i ==5 ){
oA.innerHTML = (allNum -5 +i);
}else if((allNum - nowNum) ==1 && i ==4){
oA.innerHTML = (allNum -5 +i);
}
else{
oA.innerHTML = "["+(allNum-5+i)+"]";
}
obj.appendChild(oA); }
else{
oA.href = "#"+ (nowNum-3 + i);
if (nowNum == (nowNum-3 + i)) {
oA.innerHTML = (nowNum-3 + i);
}else{
oA.innerHTML = "["+(nowNum-3 + i)+"]";
}
}
obj.appendChild(oA); }
}
// 下一页
if ((allNum-nowNum)>=1) {
var oA = document.createElement("a");
oA.href = "#"+(nowNum+1);
oA.innerHTML= "下一页";
obj.appendChild(oA);
}
//尾页 为什么要大于6 如果只有5张就没必要
if ((allNum-nowNum)>=3 && allNum >=6) {
var oA = document.createElement("a");
oA.href = "#"+ allNum;
oA.innerHTML= "尾页";
obj.appendChild(oA);
}
callback(nowNum,allNum);
var aA = document.getElementsByTagName("a");
for (var i=0; i<aA.length;i++) {
aA[i].onclick=function(){
//alert(this.getAttribute("href").substring(1));
var nowNum = parseInt(this.getAttribute("href").substring(1));
obj.innerHTML=""; //清空整个之后重新生成
page({
id:opt.id,
nowNum:nowNum,
allNum:allNum,
callback:callback
})
//阻止默认事件
return false;
}
} }
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
稍微再加点料：
WEB前端组件思想【分页】的更多相关文章
- WEB前端组件思想【日历】
DEMO2: 思路:首先获取元素节点元素--->根据点击事件隐藏显示元素--->建立showdate方法(判断12月 则右边年份+1,月份1 )--->还要设置btn开关 防止多次重 ...
- java web 前端页面的分页逻辑
<div class="divBody"> <div class="divContent"> <!--上一页 --> < ...
- 前端web应用组件化（一） 徐飞
https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...
- web前端开发常用组件
web前端开发常用组件 1. 对话框(dialog):jbox(适合对话框等其它功能).colorbox(也很强大,可以弥补jbox图片轮播的落点), 这二者基本能搞定所有对话框的情况 2. ...
- web 前端常用组件【06】Upload 控件
因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...
- web 前端常用组件【05】ZTree
web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...
- Web前端性能优化教程04：压缩组件
本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
- 前端使用AngularJS的$resource,后端ASP.NET Web API，实现分页、过滤
在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...
随机推荐
- Java 并发 中断线程
Java 并发 中断线程 @author ixenos 对Runnable.run()方法的三种处置情况 1.在Runnable.run()方法的中间中断它 2.等待该方法到达对cancel标志的测试 ...
- asp.net如何把一个tostring类型转化为dateTime类型
Convert.ToDateTime(dr["consult_DealTime"].ToString()).ToString("yyyy-MM-dd"); co ...
- Uva 11889 Benefit （lcm与gcd）
题意:给你两个数,a,c,求出 lcm(a,b)==c 时的 b 的最小值 思路:我们知道一个性质 gcd(a,b)*lcm(a,b) = a*b 由此我们可以得到 b = gcd(a,b)*lcm( ...
- SQL总结之导入导出
(5)还原数据库[倒库] [数据泵模式]先要在D盘创建个目录,如D:/dbback 然后去plsql中创建目录sql命令:create directory dbback as 'D:\dbback'; ...
- Ubuntu下安装python相关数据处理
01. Ubuntu下安装ipython sudo apt-get install ipython 02. Ubuntu下安装pip $ sudo apt-get install python-pip ...
- 安卓---Tabhost实现页面局部刷新--父页子页之间的传值
TabHost的实现分为两种,一个是不继承TabActivity,一个是继承自TabActivity:当然了选用继承自TabActivity的话就相对容易一些,下面来看看分别是怎样来实现的吧. 我只写 ...
- Office下载地址
文件名cn_office_professional_plus_2016_x86_x64_dvd_6969182.isoSHA1277926A41B472EE38CA0B36ED8F2696356DCC ...
- linux driver module
本文将对Linux系统中的sysfs进行简单的分析,要分析sysfs就必须分析内核的driver-model(驱动模型),两者是紧密联系的.在分析过程中,本文将以platform总线和spi主控制器的 ...
- Python基础知识学习_Day4
一.函数 1.1函数特性 减少重复代码 使程序可扩展 使程序变得容易维护 1.2函数定义和使用 def 函数名(参数): ...... 函数体 ...... 返回值 函数定义主要特点如下: def:表 ...
- 面试题-Java Web-Servlet部分
1.什么是Servlet? Servlet是用来处理客户端请求并产生动态网页内容的Java类.Servlet主要是用来处理或者是存储HTML表单提交的数据,产生动态内容,在无状态的HTTP协议下管理状 ...