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前端组件思想【分页】的更多相关文章

  1. WEB前端组件思想【日历】

    DEMO2: 思路:首先获取元素节点元素--->根据点击事件隐藏显示元素--->建立showdate方法(判断12月 则右边年份+1,月份1 )--->还要设置btn开关 防止多次重 ...

  2. java web 前端页面的分页逻辑

    <div class="divBody"> <div class="divContent"> <!--上一页 --> < ...

  3. 前端web应用组件化（一） 徐飞

    https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...

  4. web前端开发常用组件

    web前端开发常用组件 1. 对话框(dialog):jbox(适合对话框等其它功能).colorbox(也很强大,可以弥补jbox图片轮播的落点),      这二者基本能搞定所有对话框的情况 2. ...

  5. web 前端常用组件【06】Upload 控件

    因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...

  6. web 前端常用组件【05】ZTree

    web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...

  7. Web前端性能优化教程04：压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

  8. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  9. 前端使用AngularJS的$resource,后端ASP.NET Web API，实现分页、过滤

    在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...

随机推荐

  1. DBCP连接池的使用

    1.新建工程 2.导入commons-dbcp commons-logging commons-pool这三个包 3.创建dbcpconfig.properties的文件 实例如下 #连接设置 dri ...

  2. C#重写url

    string url = Request.Url.LocalPath; Context.RewritePath(url + "?id=1111&name=gdwy"); 或 ...

  3. Openjudge-NOI题库-数根

    题目描述 Description 数根可以通过把一个数的各个位上的数字加起来得到.如果得到的数是一位数,那么这个数就是数根.如果结果是两位数或者包括更多位的数字,那么再把这些数字加起来.如此进行下去, ...

  4. cookie会话技术

    会话技术 B/S请求是无状态无记忆的,脚本与脚本之间是没有联系的,导致不能进行连续的业务逻辑 Cookie技术:将会话数据保存在浏览器端 原理:服务器向浏览器发送指令,用来管理存储在浏览器端的cook ...

  5. 【转】判断URL是否能够访问

    import urllib2 def file_exists(url): request = urllib2.Request(url) request.get_method = lambda : 'H ...

  6. （转帖）oracle sql 语句优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  7. svg图片转换为WEB字体图标

    今天我学会了使用字体制作网站   icomoon.io 制作web文本图标.跟我一起学习吧! (1)字体制作网站   icomoon.io   点击 icomoon APP  --->  imp ...

  8. 用maven在eclipse用spring建javaweb工程（一）

    一,步骤   只标注重点步骤: 新建工程选择Maven Project next---next---选择web工程 next---命名如下: 点击finish创建完成. 二,index.jsp和pom ...

  9. Java Socket编程基础(1)

    参考资料: <Java网络编程精解> 孙卫琴 一.socket通信简介 什么是socket,简单来说,在linux系统上,进程与进程之间的通信称为IPC,在同一台计算机中,进程与进程之间通 ...

  10. 聚类算法K-Means, K-Medoids, GMM, Spectral clustering,Ncut

    原文请戳:http://blog.csdn.net/abcjennifer/article/details/8170687 聚类算法是ML中一个重要分支,一般采用unsupervised learni ...