codeigniter 看一看 (1) 帮助的做法

背景：
   1 为了进步学习php的一些用法和架构(php 是现在工作的一部分)
   2 通过看看php的做法，看是否.Net的一些做法 能相互利用

关于什么是 codeigniter: http://codeigniter.com/

首先看看codeigniter帮助的做法，页面的初始化 隐藏 header
   header  点击不同的内容，指向不同的html  重复隐藏header，
  content
   footer

其实就是使用了一个动态效果，
 使用了 moo.fx.js http://moofx.mad4milk.net/  一个轻量级的基于prototype简化版做的动态效果库，来看下其如何实现的,先看眼 prototype.lite.js:

1. //修改原型对象   
2. var Class = ...{   
3.   create: function() ...{   
4.     return function() ...{   
5.       this.initialize.apply(this, arguments);   
6.     }   
7.   }   
8. }   
9. //提供一个方法实现把属性和方法从 源头 到 目的   
10. Object.extend = function(destination, source) ...{   
11.   for (property in source) ...{   
12.     destination[property] = source[property];   
13.   }   
14.   return destination;   
15. }   
16.   
17. //返回一个函数，返回的函数将使用原来函数的同样参数   
18. Function.prototype.bind = function(object) ...{   
19.   var __method = this;   
20.   return function() ...{   
21.     return __method.apply(object, arguments);   
22.   }   
23. }   
24.   
25. //返回元素数组    
26. function $() ...{   
27.   var elements = new Array();   
28.   
29.   for (var i = 0; i < arguments.length; i++) ...{   
30.     var element = arguments[i];   
31.     if (typeof element == 'string')   
32.       element = document.getElementById(element);   
33.   
34.     if (arguments.length == 1)   
35.       return element;   
36.   
37.     elements.push(element);   
38.   }   
39.   
40.   return elements;   
41. }   
42.   
43. //-------------------------   
44. //取得元素数组通过classname   
45. document.getElementsByClassName = function(className) ...{   
46.   var children = document.getElementsByTagName('*') || document.all;   
47.   var elements = new Array();   
48.   
49.   for (var i = 0; i < children.length; i++) ...{   
50.     var child = children[i];   
51.     var classNames = child.className.split(' ');   
52.     for (var j = 0; j < classNames.length; j++) ...{   
53.       if (classNames[j] == className) ...{   
54.         elements.push(child);   
55.         break;   
56.       }   
57.     }   
58.   }   
59.   
60.   return elements;   
61. }   
62.   
63. //-------------------------   
64.   
65. if (!window.Element) ...{   
66.   var Element = new Object();   
67. }   
68.   
69. //扩展元素几个函数   
70. Object.extend(Element, ...{   
71.   remove: function(element) ...{   
72.     element = $(element);   
73.     element.parentNode.removeChild(element);   
74.   },   
75.   
76.   hasClassName: function(element, className) ...{   
77.     element = $(element);   
78.     if (!element)   
79.       return;   
80.     var a = element.className.split(' ');   
81.     for (var i = 0; i < a.length; i++) ...{   
82.       if (a[i] == className)   
83.         return true;   
84.     }   
85.     return false;   
86.   },   
87.   
88.   addClassName: function(element, className) ...{   
89.     element = $(element);   
90.     Element.removeClassName(element, className);   
91.     element.className += ' ' + className;   
92.   },   
93.   
94.   removeClassName: function(element, className) ...{   
95.     element = $(element);   
96.     if (!element)   
97.       return;   
98.     var newClassName = '';   
99.     var a = element.className.split(' ');   
100.     for (var i = 0; i < a.length; i++) ...{   
101.       if (a[i] != className) ...{   
102.         if (i > 0)   
103.           newClassName += ' ';   
104.         newClassName += a[i];   
105.       }   
106.     }   
107.     element.className = newClassName;   
108.   },   
109.   
110.   // removes whitespace-only text node children   
111.   cleanWhitespace: function(element) ...{   
112.     element = $(element);   
113.     for (var i = 0; i < element.childNodes.length; i++) ...{   
114.       var node = element.childNodes[i];   
115.       if (node.nodeType == 3 && !/S/.test(node.nodeValue))   
116.         Element.remove(node);   
117.     }   
118.   }   
119. });  

好，接下来看看轻量级动态库moo.fx.js的实现：

1. //定义 base object   
2. var fx = new Object();   
3. //定义 函数   
4. fx.Base = function()...{};   
5. //函数原型  目的是实现动态效果过程，把其相关函数扩展的   
6. // 需要的实现效果的类中   
7. fx.Base.prototype = ...{   
8.    // 基本的参数设置   
9.     setOptions: function(options) ...{   
10.     this.options = ...{   
11.         duration: 500,   
12.         onComplete: ''  
13.     }   
14.     Object.extend(this.options, options || ...{});   
15.     },   
16.    //时间开始   
17.     go: function() ...{   
18.         this.duration = this.options.duration;   
19.         this.startTime = (new Date).getTime();   
20.         this.timer = setInterval (this.step.bind(this), 13);   
21.     },   
22.    // 绑定 timer 事件 计算时间 然后执行 increase 动作   
23.     step: function() ...{   
24.         var time  = (new Date).getTime();   
25.         var Tpos   = (time - this.startTime) / (this.duration);   
26.         if (time >= this.duration+this.startTime) ...{   
27.             this.now = this.to;   
28.             clearInterval (this.timer);   
29.             this.timer = null;   
30.             if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);   
31.         }   
32.         else ...{   
33.             this.now = ((-Math.cos(Tpos*Math.PI)/2) + 0.5) * (this.to-this.from) + this.from;   
34.             //this time-position, sinoidal transition thing is from script.aculo.us   
35.         }   
36.         this.increase();   
37.     },   
38.   
39.    //改变元素的长度   
40.     custom: function(from, to) ...{   
41.         if (this.timer != null) return;   
42.         this.from = from;   
43.         this.to = to;   
44.         this.go();   
45.     },   
46.    // 隐藏   
47.     hide: function() ...{   
48.         this.now = 0;   
49.         this.increase();   
50.     },   
51.    //重新计时   
52.     clearTimer: function() ...{   
53.         clearInterval(this.timer);   
54.         this.timer = null;   
55.     }   
56. }   
57.   
58. //stretchers   
59. fx.Layout = Class.create();   
60. //初始化元素的处理   
61. fx.Layout.prototype = Object.extend(new fx.Base(), ...{   
62.     initialize: function(el, options) ...{   
63.         this.el = $(el);   
64.         this.el.style.overflow = "hidden";   
65.         this.el.iniWidth = this.el.offsetWidth;   
66.         this.el.iniHeight = this.el.offsetHeight;   
67.         this.setOptions(options);   
68.     }   
69. });   
70. // 上下的动态效果   
71. fx.Height = Class.create();   
72. Object.extend(Object.extend(fx.Height.prototype, fx.Layout.prototype), ...{   
73.     increase: function() ...{   
74.         this.el.style.height = this.now + "px";   
75.     },   
76.   
77.     toggle: function() ...{   
78.         if (this.el.offsetHeight > 0) this.custom(this.el.offsetHeight, 0);   
79.         else this.custom(0, this.el.scrollHeight);   
80.     }   
81. });   
82.   
83. fx.Width = Class.create();   
84. Object.extend(Object.extend(fx.Width.prototype, fx.Layout.prototype), ...{   
85.     increase: function() ...{   
86.         this.el.style.width = this.now + "px";   
87.     },   
88.   
89.     toggle: function()...{   
90.         if (this.el.offsetWidth > 0) this.custom(this.el.offsetWidth, 0);   
91.         else this.custom(0, this.el.iniWidth);   
92.     }   
93. });   
94.   
95. //fader   
96. fx.Opacity = Class.create();   
97. fx.Opacity.prototype = Object.extend(new fx.Base(), ...{   
98.     initialize: function(el, options) ...{   
99.         this.el = $(el);   
100.         this.now = 1;   
101.         this.increase();   
102.         this.setOptions(options);   
103.     },   
104.   
105.     increase: function() ...{   
106.         if (this.now == 1) this.now = 0.9999;   
107.         if (this.now > 0 && this.el.style.visibility == "hidden") this.el.style.visibility = "visible";   
108.         if (this.now == 0) this.el.style.visibility = "hidden";   
109.         if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + this.now*100 + ")";   
110.         this.el.style.opacity = this.now;   
111.     },   
112.   
113.     toggle: function() ...{   
114.         if (this.now > 0) this.custom(1, 0);   
115.         else this.custom(0, 1);   
116.     }   
117. });