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. kali2.0 + LAMP

    0x01 更新源 leafpad /etc/apt/sources.list #中科大kali源 deb http://mirrors.ustc.edu.cn/kali sana main non-f ...

  2. JavaEE XML XSL转换（XSLT）

    XSL转换(XSLT) @author ixenos 定义: XSL转换机制可以指定将XML文档转换为其他格式的规则,例如,txt纯文本.XHTML或其他任何XML格式. 用途: XSLT通常用来将某 ...

  3. C# 连接 Access 数据库

    c#连接Access 数据库需要System.Data, System.Data.OleDb using System.Data using System.Data.OleDb public OleD ...

  4. Xcode打包framework脚本

    参考文章: http://www.jianshu.com/p/1cb4c4fe5481 https://gist.github.com/cromandini/1a9c4aeab27ca84f5d79 ...

  5. 关于++i和i++

    这个东西我忘了好几次了,啊啊啊,难道是没真正理解吗<script> window.onload=function(){ var i=0; var a=++i; alert(a); }< ...

  6. 前端技术——WebFont与Sprite

    一.WebFont web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体. 我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在word中使用了黑体字 ...

  7. LoadLibraryW 参数问题

    error C2664: "LoadLibraryW": 不能将参数1 从"const char [8]"转换为"LPCWSTR" 右击工程 ...

  8. 制作Ubuntu14.04的Openstack镜像

    下载好Ubuntu官方镜像安装文件:不要使用desktop版,在virtualbox和vm上都安装报错,因为不需要桌面,所有没去管了. 第一步.准备好如下文件: 1.ubuntu-14.04.4-se ...

  9. hdu1032

    #include <iostream> using namespace std; int main() { int a,b,t,i,max; while(cin >> a &g ...

  10. C语言温度

    #include <stdio.h> #include <stdlib.h> /* run this program using the console pauser or a ...