背景:
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:
好,接下来看看轻量级动态库moo.fx.js的实现:
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);
- }
- }
- });
- //定义 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);
- }
- });