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 ...
随机推荐
- 第10章 使用MySQL数据库
1.在数据库中插入数据:INSERT语句: 如://插入一整行: insert into customers values (NULL,'-','-','-'), - ; //插入一行中指定的列内容: ...
- 三界商城 ajax调用城市接口,竟然需要登录,调用的接口需要登录,如果不登录 重定向到登录
现象 商家入驻 填写信息的 ajax请求没有数据 network->name-headers 返回302 发现调用的接口,需要登录,否则重定向登录 //初始化用户信息查询 public func ...
- C# SessionHelper
using System.Web; using System.Web.SessionState; namespace Utils { /// <summary> /// Session帮助 ...
- macos上安装wget命令
首先从Apple Store下载Xcode,然后安装Xcode,接着安装Homebrew包管理,类似于Ubuntu下的apt-get: 终端下输入ruby -e "$(curl -fsSL ...
- Beego学习笔记——开始
beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...
- shell实现四则运算简单方法
在刚刚学习写shell 批处理时候,进行逻辑运算中,少不了需要进行基础的:四则运算,这里说说在linux shell 里面简单的实现方法.1.简单方法$ b=$((5*5+5-3/2)) $ echo ...
- 【转】python删除文件里包含关键词的行
import shutil with open('/path/to/file', 'r') as f: with open('/path/to/file.new', 'w') as g: for li ...
- CodeForces 672D Robin Hood
思维. 当$k$趋向于正无穷时,答案会呈现出两种情况,不是$0$就是$1$.我们可以先判断掉答案为$1$和$0$的情况,剩下的情况都需要计算. 需要计算的就是,将最小的几个数总共加$k$次,最小值最大 ...
- 在sublime_text3中实现项目的跳转
作为学习前端的小白,选择了sublime_text3作为学习的编译器.学习的过程是艰辛的,但也是快乐的.遇到自己不会的,有时候会折腾好几个小时,在实现预期效果的时候,那种兴奋真的难以言述. 今天,在学 ...
- Egret 学习之 入口函数 及开始编写程序（三）
1,Egret的程序入口: C和java是以一个main函数作为入口,但egret类似于ActionScript 是以一个文档类作为入口,确切的说是以这个文档类的构造函数作为入口: 2,文档类的构造函 ...