实例索引

  1 function CreateList() {
  2     this.oWrap = document.createElement("div");
  3     this.copyright = document.createElement("div");
  4     this.initialize.apply(this, arguments);
  5     /**
  6         arguments就是构造函数接受的参数，构造函数调用时
  7         new CreateList（aData[]）传入的是一个数组
  8         数组的每一个项都是json对象
  9          json对象的格式为
 10             project:[
 11                     {
 12                         text:"测试文字"，                     
 13                     },
 14                     {
 15                         text:"测试文字"，
 16                         href:""
 17                     }
 18                 ]
 19         每一个project数组的项对应一个DL----（对应无序列表的ul）-----自定义列表dl---dt--dd
 20         
 21 
 22 
 23 
 24     */
 25     this.click.call(this)
 26 }
 27 CreateList.prototype = {//对CreateList的的函数进行定义
 28     initialize: function(aData) {        
 29         var oDl, oElem, project, i;
 30         while(aData[0]) {//解析arguments的数据，赋给各局部变量
 31             oDl = document.createElement("dl");
 32             project = aData[0].project;    
 33             for(i = 0; i < project.length; i++) {//遍历project数组
 34                 if(project[i].href) {
 35                 /*project数组中，有href的保存为"dd"，并用innerHTML加上标签<a href="project[i].href" target="_blank" 
 36                     target参数为_blank意思是打开新窗口
 37                 */
 38                     oElem = document.createElement("dd");
 39                     oElem.innerHTML = i + ") <a href=\"" + project[i].href + "\" target=\"_blank\">" + project[i].text + "</a>"
 40                 }
 41                 else {
 42                     /**
 43                         没有href属性时，保存为dt
 44                         并在dt里面添加project[i].text + " (" + (project.length - 1) + ")"    ！！
 45                         oElem.innerHTML = project[i].text + " (" + (project.length - 1) + ")"    
 46                     */
 47                     oElem = document.createElement("dt");
 48                     oElem.innerHTML = project[i].text + " (" + (project.length - 1) + ")"    
 49                 }
 50                 oDl.appendChild(oElem);//for循环内，每次创建好一个dt或者dd,就append进oDL
 51                 oDl.style.height = "31px";//将当前创建好的dl高度设置为31px
 52             }
 53             this.oWrap.appendChild(oDl);//for循环外,dl已经创建好了，将其加入外层DIV也就是oWrap
 54             aData.shift();//将arguments[0]，也就是传进的第一个大参数json数组的第一项删除
 55             //这样可以保证while(aDate[0])下一次循环时读取到的是最新的数据
 56         }
 57         this.oWrap.id = "wrap";
 58         this.copyright.id = "copyright";
 59         this.copyright.innerHTML = "\u539f\u751fJavaScript\u5b66\u4e60, QQ:21314130, By &mdash; Ferris 京ICP备10209901号";
 60         document.body.appendChild(this.oWrap);
 61         document.body.appendChild(this.copyright)
 62     },
 63     click: function() {
 64         var that = this;
 65         //console.log(this.tagName);
 66         this.oWrap.onclick = function(event) {
 67             //console.log(this.tagName);
 68 
 69             var oEv, oTarget, oParent, i;
 70             oEv = event || window.event;
 71             oTarget = oEv.target || oEv.srcElement;//当前点击的元素
 72             oParent = oTarget.parentElement || oTarget.parentNode;//当前点击元素的父元素
 73             oParent.height = function() {
 74                 var iHeight = 0;
 75                 for(i = 0;i < oParent.children.length; i++) iHeight += oParent.children[i].offsetHeight;
 76                 return iHeight
 77             }();//获取当前点击元素的父元素的height
 78 
 79 
 80             if(oTarget.tagName.toUpperCase() == "DT") {//当点击的是dt时执行以下代码，此时oParent是dl
 81                 //oTarget是dt,而dt的父级元素就是dl
 82                 var aSiblings = that.siblings(oParent), count, i;//获取dl所有的aSiblings，即aSiblings是所有dl元素的数组
 83                 for(count = i = 0; i < aSiblings.length; i++) {
 84                     //alert( oTarget.offsetHeight);
 85                     that.startMove(aSiblings[i], oTarget.offsetHeight, "buffer", function() {
 86 //将所有的aSiblings[]全部收拢，然后执行回调函数
 87                         console.log(this.tagName);
 88                         this.children[0].className = "";
 89 
 90                         if(++count == aSiblings.length) {//确保收拢之后执行
 91 
 92                             if(oParent.offsetHeight == oTarget.offsetHeight) {//如果dl的高度与dt的高度相同
 93                                 //则需要flex展开
 94                                 oTarget.className = "current";
 95                                 that.startMove(oParent, oParent.height, "flex")
 96                             }
 97                             else {//否则需要buffer收拢
 98                                 that.startMove(oParent, oTarget.offsetHeight, "buffer", function() {
 99                                     oTarget.className = ""    
100                                 })
101                             }    
102 
103 
104                         }    
105 
106                     })
107                 }
108             }//end if
109 
110 
111 
112         }//onclick end
113     },
114     startMove: function(obj, iTarget, type, callback) {
115         var that = this;
116         clearInterval(obj.timer);
117         obj.iSpeed = 0;
118         obj.timer = setInterval(function() {
119             that[type].call(that, obj, iTarget, callback)
120         }, 30)
121     },
122     buffer: function(obj, iTarget, callback) {
123         obj.iSpeed = (iTarget - obj.offsetHeight) / 5;
124         obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
125         obj.offsetHeight == iTarget ? (clearInterval(obj.timer), callback && callback.call(obj)) : obj.style.height = obj.offsetHeight + obj.iSpeed + "px"
126     },
127     flex: function(obj, iTarget, callback) {
128         obj.iSpeed += (iTarget - obj.offsetHeight) / 6;
129         obj.iSpeed *= 0.75;
130         if(Math.abs(iTarget - obj.offsetHeight) <= 1 && Math.abs(obj.iSpeed) <= 1) {
131             clearInterval(obj.timer);
132             obj.style.height = iTarget + "px";
133             callback && callback.call(obj)
134         }
135         else {
136             obj.style.height = obj.offsetHeight + obj.iSpeed + "px"
137         }
138     },
139     siblings: function(element) {//自己实现jquery的获取同级兄弟节点数组的函数
140         var aTmp = [],
141              oParent = element.parentElement || element.parentNode, 
142              i;
143         for(i = 0; i < oParent.children.length; i++)//如果当前element!=oParent.children[i]为真，则执行&&后的push函数
144              element != oParent.children[i] && aTmp.push(oParent.children[i]);
145         return aTmp
146     }
147 };

　　oDiv.onclick=function (e){

　　　　var ev=e||window.event;
　　　　var oTarget=ev.srcElement||ev.target;
}

this.initialize.apply(this, arguments);//等价于this.initialize(arguments[0]);

while(aDate[0]){

　　　　........
　　　　aData.shift();
}

    startMove: function(obj, iTarget, type, callback) {
        var that = this;
        clearInterval(obj.timer);
        obj.iSpeed = 0;
        obj.timer = setInterval(function() {
            that[type].call(that, obj, iTarget, callback)
        }, 30)
    },
    buffer: function(obj, iTarget, callback) {
        obj.iSpeed = (iTarget - obj.offsetHeight) / 5;
        obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
        obj.offsetHeight == iTarget ? (clearInterval(obj.timer), callback && callback.call(obj)) : obj.style.height = obj.offsetHeight + obj.iSpeed + "px"
    },
    flex: function(obj, iTarget, callback) {
        obj.iSpeed += (iTarget - obj.offsetHeight) / 6;
        obj.iSpeed *= 0.75;
        if(Math.abs(iTarget - obj.offsetHeight) <= 1 && Math.abs(obj.iSpeed) <= 1) {
            clearInterval(obj.timer);
            obj.style.height = iTarget + "px";
            callback && callback.call(obj)
        }
        else {
            obj.style.height = obj.offsetHeight + obj.iSpeed + "px"
        }
    },