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:


//修改原型对象




var Class = ...{




create: function() ...{




return function() ...{


this.initialize.apply(this, arguments);


}


}


}


//提供一个方法实现把属性和方法从 源头 到 目的




Object.extend = function(destination, source) ...{




for (property in source) ...{


destination[property] = source[property];


}


return destination;


}




//返回一个函数，返回的函数将使用原来函数的同样参数




Function.prototype.bind = function(object) ...{


var __method = this;




return function() ...{


return __method.apply(object, arguments);


}


}




//返回元素数组




function $() ...{


var elements = new Array();






for (var i = 0; i < arguments.length; i++) ...{


var element = arguments[i];


if (typeof element == 'string')


element = document.getElementById(element);




if (arguments.length == 1)


return element;




elements.push(element);


}




return elements;


}




//-------------------------


//取得元素数组通过classname




document.getElementsByClassName = function(className) ...{


var children = document.getElementsByTagName('*') || document.all;


var elements = new Array();






for (var i = 0; i < children.length; i++) ...{


var child = children[i];


var classNames = child.className.split(' ');




for (var j = 0; j < classNames.length; j++) ...{




if (classNames[j] == className) ...{


elements.push(child);


break;


}


}


}




return elements;


}




//-------------------------






if (!window.Element) ...{


var Element = new Object();


}




//扩展元素几个函数




Object.extend(Element, ...{




remove: function(element) ...{


element = $(element);


element.parentNode.removeChild(element);


},






hasClassName: function(element, className) ...{


element = $(element);


if (!element)


return;


var a = element.className.split(' ');




for (var i = 0; i < a.length; i++) ...{


if (a[i] == className)


return true;


}


return false;


},






addClassName: function(element, className) ...{


element = $(element);


Element.removeClassName(element, className);


element.className += ' ' + className;


},






removeClassName: function(element, className) ...{


element = $(element);


if (!element)


return;


var newClassName = '';


var a = element.className.split(' ');




for (var i = 0; i < a.length; i++) ...{




if (a[i] != className) ...{


if (i > 0)


newClassName += ' ';


newClassName += a[i];


}


}


element.className = newClassName;


},




// removes whitespace-only text node children




cleanWhitespace: function(element) ...{


element = $(element);




for (var i = 0; i < element.childNodes.length; i++) ...{


var node = element.childNodes[i];


if (node.nodeType == 3 && !/S/.test(node.nodeValue))


Element.remove(node);


}


}


});

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


//定义 base object


var fx = new Object();


//定义 函数




fx.Base = function()...{};


//函数原型 目的是实现动态效果过程，把其相关函数扩展的


// 需要的实现效果的类中




fx.Base.prototype = ...{


// 基本的参数设置




setOptions: function(options) ...{




this.options = ...{


duration: 500,


onComplete: ''


}




Object.extend(this.options, options || ...{});


},


//时间开始




go: function() ...{


this.duration = this.options.duration;


this.startTime = (new Date).getTime();


this.timer = setInterval (this.step.bind(this), 13);


},


// 绑定 timer 事件 计算时间 然后执行 increase 动作




step: function() ...{


var time = (new Date).getTime();


var Tpos = (time - this.startTime) / (this.duration);




if (time >= this.duration+this.startTime) ...{


this.now = this.to;


clearInterval (this.timer);


this.timer = null;


if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);


}




else ...{


this.now = ((-Math.cos(Tpos*Math.PI)/2) + 0.5) * (this.to-this.from) + this.from;


//this time-position, sinoidal transition thing is from script.aculo.us


}


this.increase();


},




//改变元素的长度




custom: function(from, to) ...{


if (this.timer != null) return;


this.from = from;


this.to = to;


this.go();


},


// 隐藏




hide: function() ...{


this.now = 0;


this.increase();


},


//重新计时




clearTimer: function() ...{


clearInterval(this.timer);


this.timer = null;


}


}




//stretchers


fx.Layout = Class.create();


//初始化元素的处理




fx.Layout.prototype = Object.extend(new fx.Base(), ...{




initialize: function(el, options) ...{


this.el = $(el);


this.el.style.overflow = "hidden";


this.el.iniWidth = this.el.offsetWidth;


this.el.iniHeight = this.el.offsetHeight;


this.setOptions(options);


}


});


// 上下的动态效果


fx.Height = Class.create();




Object.extend(Object.extend(fx.Height.prototype, fx.Layout.prototype), ...{




increase: function() ...{


this.el.style.height = this.now + "px";


},






toggle: function() ...{


if (this.el.offsetHeight > 0) this.custom(this.el.offsetHeight, 0);


else this.custom(0, this.el.scrollHeight);


}


});




fx.Width = Class.create();




Object.extend(Object.extend(fx.Width.prototype, fx.Layout.prototype), ...{




increase: function() ...{


this.el.style.width = this.now + "px";


},






toggle: function()...{


if (this.el.offsetWidth > 0) this.custom(this.el.offsetWidth, 0);


else this.custom(0, this.el.iniWidth);


}


});




//fader


fx.Opacity = Class.create();




fx.Opacity.prototype = Object.extend(new fx.Base(), ...{




initialize: function(el, options) ...{


this.el = $(el);


this.now = 1;


this.increase();


this.setOptions(options);


},






increase: function() ...{


if (this.now == 1) this.now = 0.9999;


if (this.now > 0 && this.el.style.visibility == "hidden") this.el.style.visibility = "visible";


if (this.now == 0) this.el.style.visibility = "hidden";


if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + this.now*100 + ")";


this.el.style.opacity = this.now;


},






toggle: function() ...{


if (this.now > 0) this.custom(1, 0);


else this.custom(0, 1);


}


});