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 ...
随机推荐
- soa服务治理-dubbo
dubbo官网:http://dubbo.io/Home-zh.htm 学习点: 1. 日志的配置
- 实战ASP.NET访问共享文件夹（含详细操作步骤）
博客园找找看(http://zzk.cnblogs.com)的索引文件占用空间太大,需要移至另外一台服务器,所以要解决"在ASP.NET中通过共享文件夹访问索引文件"的问题. 假设 ...
- js splice比较好用的方法
http://www.w3school.com.cn/jsref/jsref_splice.asp从w3c看到这个方法,感觉不错,记录一下.
- Java中集合框架体系
集合的体系结构: |--Collection(单列集合的根接口) |--List(子接口):元素是有序的,元素可以重复.因为该集合体系有索引. |--A ...
- cout 格式化的一些方法
cout格式化的方式有很多,和C中的printf相比较,在实现方式上更加容易理解. 1.计数进制. 1.十六进制:hex 2.八进制:oct 3.十进制:dec(默认) 在控制进制的时候,可以使用两种 ...
- python中的二维数组90度旋转
data=[[col for col in range(4)] for raw in range(4)] #创建一个二维数组 for n in data: print (n) print('\n') ...
- 【Android】策略模式封装百度地图路线规划模块
百度地图的Demo里有个路线规划的功能,但是,这个功能和Activity耦合性太高,所以需要单独抽离出路径规划功能,进行"解耦". 注:由于项目原因,本文只针对驾车路线规划进行封装 ...
- VMware虚拟机服务的vmware-hostd自动启动和停止
安装了虚拟机 任务管理器会出现vmware-hostd.exe 占用了80端口,导致xampp打不开,所以就想关闭vmware,解决方案如下: 开始——运行——services.msc,找到VM打头 ...
- 《HTML5权威指南》
<HTML5权威指南> HTML元素: html字符实体 html全局属性 html base标签 用元数据元素说明文档 标记文字(第八章) 标记文字.组织内容.文档分节 表格元素 表单元 ...
- document对象相关的几个常用的方法
方法 描述 var newP=createElement("p"); 创建了一个p标签,p也可替换为div,span等 var oldTxt=createTextNode(&qu ...