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 ...
随机推荐
- List去重
因为用到list,要去除重复数据,尝试了几种方法.记录于此... 测试数据: List<string> li1 = new List<string> { "8&quo ...
- xtrabackup在线备份及还原
xtrabackup下载https://www.percona.com/downloads/XtraBackup/LATEST/xtrabackup文档https://www.percona.com/ ...
- B树、B-树、B+树、B*树详解
注:本文为个人学习摘录,原文地址:http://www.blogjava.net/supercrsky/articles/185167.html B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿 ...
- 从A页面跳转到B页面，从B页面按浏览器自带按钮返回到A页面并且刷新页面--手机操作浏览器自带返回并自带刷新
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Git创建空白新分支
向分支提交一个初始的空commit,保证完全复位. 创建并切换新分支 git branch <new_branch> git checkout <new_branch> git ...
- android studio 将library导出为jar 亲测成功
本人使用的是helloChart这个开源项目,其主要用于图表,来自git 地址为:https://github.com/lecho/hellocharts-android 下载命令为 git clon ...
- AndroidAsyncHttp 临时修复 JsonHttpResponseHandler 避免死循环
由于 AndroidAsyncHttp 1.4.4 的 JsonHttpResponseHandler 存在死循环的 BUG,1.4.5 版本发布不知道要何时,所以只能临时替换该类来修复这个错误. ...
- AC自动机(AC automation)
字典树+KMP 参考自: http://www.cppblog.com/mythit/archive/2009/04/21/80633.html ; //字典大小 //定义结点 struct node ...
- ligerUI实现分页
在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后, ...
- 关于Java配置文件properties的学习
在Java早期的开发中,常用*.properties文件存储一些配置信息.其文件中的信息主要是以key=value的方式进行存储,在早期受到广泛的应用.而后随着xml使用的广泛,其位置渐渐被取代,不过 ...