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. [CSS3备忘] transform animation 等

    一些CSS不经常用就会忘记,好吧,现在整理再学习一下,也留做备忘,方便以后查看... perspective的理解: 1.数值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻(比如看电影,越 ...

  2. python——爬虫

    网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...

  3. System.Data.DbType和数据库映射关系

    有如下类型的映射对照: System.Data.SqlClient.SqlDbType  System.Data.OleDb.OleDbType System.Data.Odbc.OdbcType S ...

  4. Linux scp命令

    语法 scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P p ...

  5. Spark编程模型及RDD操作

    转载自:http://blog.csdn.net/liuwenbo0920/article/details/45243775 1. Spark中的基本概念 在Spark中,有下面的基本概念.Appli ...

  6. php注册数模式

    在前两篇单例模式和工厂模式后,终于迎来了最后一个基础的设计模式--注册树模式. 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.之所以我在这里矫情一下它的名称,是因为我感觉注册树这个名称更 ...

  7. StringBuffer使用append提示String concatenation as argument to 'StringBuffer.append()' call

    昨天发现一个IDE提示: String concatenation as argument to 'StringBuffer.append()' call less... (Ctrl+F1) Repo ...

  8. Let's DO IT !

    今天开始逐步自学计算机图形学. 慢慢成长.

  9. onkeyup事件只能输入数字，字母，下划线

    <input type="text" onkeyup="value=value.replace(/[\W]/g,'')"/>

  10. 域名注册商namesilo价格便宜，赠送whois保护，最新优惠码：geekradio

    注册域名,不懂事的中国人一般去国内奸商万网注册,价格贵,域名管理风险大,甚至注册.cn域名,花钱还吃亏.精明一点的中国人选godaddy,namecheap,gandi这类国外域名注册商,价格不贵,你 ...