extras.js

来自「对java中如何使用Ajax技术」· JavaScript 代码 · 共 149 行

/*
	Copyright (c) 2004-2006, The Dojo Foundation
	All Rights Reserved.

	Licensed under the Academic Free License version 2.1 or above OR the
	modified BSD license. For more information on Dojo licensing, see:

		http://dojotoolkit.org/community/licensing.shtml
*/

dojo.provide("dojo.lfx.extras");

dojo.require("dojo.lfx.html");
dojo.require("dojo.lfx.Animation");

dojo.lfx.html.fadeWipeIn = function(/*DOMNode[]*/ nodes, /*int?*/ duration, /*Function?*/ easing, /*Function?*/ callback){
	// summary: Returns an animation that will fade "nodes" from its current
	//			opacity to fully opaque while wiping it in.
	// nodes: An array of DOMNodes or one DOMNode.
	// duration: Duration of the animation in milliseconds.
	// easing: An easing function.
	// callback: Function to run at the end of the animation.
	nodes = dojo.lfx.html._byId(nodes);
	var anim = dojo.lfx.combine(
		dojo.lfx.fadeIn(nodes, duration, easing),
		dojo.lfx.wipeIn(nodes, duration, easing)
	);
	
	if(callback){
		anim.connect("onEnd", function(){
			callback(nodes, anim);
		});
	}
	
	return anim; // dojo.lfx.Combine
}

dojo.lfx.html.fadeWipeOut = function(/*DOMNode[]*/ nodes, /*int?*/ duration, /*Function?*/ easing, /*Function?*/ callback){
	// summary: Returns an animation that will fade "nodes" from its current
	//			opacity to fully transparent while wiping it out.
	// nodes: An array of DOMNodes or one DOMNode.
	// duration: Duration of the animation in milliseconds.
	// easing: An easing function.
	// callback: Function to run at the end of the animation.
	nodes = dojo.lfx.html._byId(nodes);
	var anim = dojo.lfx.combine(
		dojo.lfx.fadeOut(nodes, duration, easing),
		dojo.lfx.wipeOut(nodes, duration, easing)
	);
	
	if(callback){
		/* callback: Function
		   pId: f */
		anim.connect("onEnd", function(){
			callback(nodes, anim);
		});
	}

	return anim; // dojo.lfx.Combine
}

dojo.lfx.html.scale = function(/*DOMNode[]*/nodes,
							   /*int*/ percentage,
							   /*bool?*/ scaleContent,
							   /*bool?*/ fromCenter,
							   /*int?*/ duration,
							   /*Function?*/ easing,
							   /*Function?*/ callback){
	// summary: Returns an animation that will scale "nodes" by "percentage".
	// nodes: An array of DOMNodes or one DOMNode.
	// percentage: A whole number representing the percentage to scale "nodes".
	// scaleContent: If true, will scale the contents of "nodes".
	// fromCenter: If true, will scale "nodes" from its center rather than the
	//			   lower right corner.
	// duration: Duration of the animation in milliseconds.
	// easing: An easing function.
	// callback: Function to run at the end of the animation.
	nodes = dojo.lfx.html._byId(nodes);
	var anims = [];

	dojo.lang.forEach(nodes, function(node){
		var outer = dojo.html.getMarginBox(node);

		var actualPct = percentage/100.0;
		var props = [
			{	property: "width",
				start: outer.width,
				end: outer.width * actualPct
			},
			{	property: "height",
				start: outer.height,
				end: outer.height * actualPct
			}];
		
		if(scaleContent){
			var fontSize = dojo.html.getStyle(node, 'font-size');
			var fontSizeType = null;
			if(!fontSize){
				fontSize = parseFloat('100%');
				fontSizeType = '%';
			}else{
				dojo.lang.some(['em','px','%'], function(item, index, arr){
					if(fontSize.indexOf(item)>0){
						fontSize = parseFloat(fontSize);
						fontSizeType = item;
						return true;
					}
				});
			}
			props.push({
				property: "font-size",
				start: fontSize,
				end: fontSize * actualPct,
				units: fontSizeType });
		}
		
		if(fromCenter){
			var positioning = dojo.html.getStyle(node, "position");
			var originalTop = node.offsetTop;
			var originalLeft = node.offsetLeft;
			var endTop = ((outer.height * actualPct) - outer.height)/2;
			var endLeft = ((outer.width * actualPct) - outer.width)/2;
			props.push({
				property: "top",
				start: originalTop,
				end: (positioning == "absolute" ? originalTop - endTop : (-1*endTop))
			});
			props.push({
				property: "left",
				start: originalLeft,
				end: (positioning == "absolute" ? originalLeft - endLeft : (-1*endLeft))
			});
		}
		
		var anim = dojo.lfx.propertyAnimation(node, props, duration, easing);
		if(callback){
			anim.connect("onEnd", function(){
				callback(node, anim);
			});
		}

		anims.push(anim);
	});
	
	return dojo.lfx.combine(anims); // dojo.lfx.Combine
}

dojo.lang.mixin(dojo.lfx, dojo.lfx.html);