`
ayue222
  • 浏览: 49470 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

YUI 3.0应用初探

阅读更多
很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这2天没事,终于静下心来细细体验了下他的彪悍之处。实例中的一些code引用的taobao赤拔的成果,请赤拔大神表追究俺滴版权~ >_<

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YUI 3.0 应用初探</title>
<style>
.yui-overlay-content {border:10px solid;border-color:rgba(128, 128, 128, 0.5);*border:6px solid #7f7f7f;font-size:12px;font-family:Tahoma;-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}

.yui-overlay-content .yui-widget-hd {font-weight:normal;color:white;height:19px;vertical-align:middle;text-align:left;padding:2px 2px 2px 4px;border:0px;background-color:steelblue;}
.yui-overlay-content .yui-widget-hd .title{float:left;}
.yui-overlay-content .yui-widget-hd .close{float:right;cursor:mouse}

.yui-overlay-content .yui-widget-bd {text-align:left;padding:10px;border:0px solid #0000aa;background-color:#fff;}
.yui-overlay-content .yui-widget-ft {padding:2px;background:white;}
.yui-widget-ft div{text-align:center;}
.yui-widget-ft .okbtn{margin:10px 0;}
</style>
</head>
<body>
	<input type="button" value="鼠标叁擊事件" id="clickA"/>
	<input type="button" value="閉包測試" id="clickC"/>
	<ul>   
		<li>這是第1条记录哦~</li>   
		<li>這是第2条记录哦~</li>   
		<li>這是第3条记录哦~</li>   
		<li>這是第4条记录哦~</li>   
		<li>這是第5条记录哦~</li>   
		<li>這是第6条记录哦~</li>   
	</ul>
</body>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
	YUI.namespace('KTest');
	YUI.add('KBox', function (Y) {
		Y.KBox = function(){
			this.init.apply(this,arguments);
		};
		Y.KBox.overlays = [];
		Y.KBox.prototype = {
			init:function(opt){
				var that = this;
				that.buildParam(opt);
				that.overlay = new Y.Overlay({
					contentBox: "kContent",
					height:that.height,
					width:that.width,
					zIndex:1000,
					visible:false,
					shim:(Y.UA.ie>0)?!that.anim:true,
					centered:true,
					headerContent: that.head,
					bodyContent: that.body,
					footerContent:that.foot
				});
				Y.KBox.overlays.push(that.overlay);
				that.bringToTop();
				that.overlay._posNode.on('mousedown',function(e){
					var widget = Y.Widget.getByNode(e.target);
					if (widget && widget instanceof Y.Overlay) {
						that.bringToTop();
					}
					Y.KBox._xy = widget._posNode.getXY();
				});
				that.overlay._posNode.on('mouseup',function(e){
					var widget = Y.Widget.getByNode(e.target);
					if (widget && widget instanceof Y.Overlay) {
						var _xy =  widget._posNode.getXY();
						if(_xy[0] != Y.KBox._xy[0] || _xy[1] != Y.KBox._xy[1]){
							that.afterDrag(widget);
						}
					}
				});
				if(that.anim){
					var AP = function(cfg){
						AP.superclass.constructor.apply(this, arguments);
					};
					AP.NS = 'fx';
					AP.NAME = 'animPlugin';
					AP.ATTRS = {
						duration:{
							value:0.2
						},
						animVisible:{
							valueFn:function(){
								var host = this.get("host");
								var boundingBox = host.get("boundingBox");
								var anim = new Y.Anim({
									node: boundingBox,
									to: { opacity: 1 },
									duration: this.get("duration")
								});
								if (!host.get("visible")) {
									boundingBox.setStyle("opacity", 0);
								}
								anim.on("destroy", function() {
									if (Y.UA.ie) {
										this.get("node").setStyle("opacity", 1);
									} else {
										this.get("node").setStyle("opacity", "");
									}
								});
								return anim;
							}
						},
						animHidden : {
							valueFn : function() {
								return new Y.Anim({
									node: this.get("host").get("boundingBox"),
									to: { opacity: 0 },
									duration: this.get("duration")
								});
							}
						}
					};
					Y.extend(AP,Y.Plugin.Base,{
						initializer : function(config) {
							this._bindAnimVisible();
							this._bindAnimHidden();
							this.after("animVisibleChange", this._bindAnimVisible);
							this.after("animHiddenChange", this._bindAnimHidden);
							this.doBefore("_uiSetVisible", this._uiAnimSetVisible);
						},
						destructor : function() {
							this.get("animVisible").destroy();
							this.get("animHidden").destroy();
						},
						_uiAnimSetVisible : function(val) {
							if (this.get("host").get("rendered")) {
								if (val) {
									this.get("animHidden").stop();
									this.get("animVisible").run();
								} else {
									this.get("animVisible").stop();
									this.get("animHidden").run();
								}
								return new Y.Do.Prevent("AnimPlugin prevented default show/hide");
							}
						},
						_uiSetVisible : function(val) {
							var host = this.get("host");
							var hiddenClass = host.getClassName("hidden");
							if (!val) {
								host.get("boundingBox").addClass(hiddenClass);
							} else {
								host.get("boundingBox").removeClass(hiddenClass);
							}
						},
						/* Sets up call to invoke original visibility handling when the animVisible animation is started */
						_bindAnimVisible : function() {
							var animVisible = this.get("animVisible");
							// Setup original visibility handling (for show) before starting to animate
							animVisible.on("start", Y.bind(function() {
								this._uiSetVisible(true);
							}, this));
						},
						/* Sets up call to invoke original visibility handling when the animHidden animation is complete */
						_bindAnimHidden : function() {
							var animHidden = this.get("animHidden");

							// Setup original visibility handling (for hide) after completing animation
							animHidden.after("end", Y.bind(function() {
								this._uiSetVisible(false);
							}, this));
						}
					});//extend over
					that.overlay.plug(AP,{duration:Number(that.duration)});
				}
				return this;
			},
			bringToTop:function(){
				var that = this;
				if(Y.KBox.overlays.length == 1)return;
				var topIndex = 0;
				for(var i = 0;i<Y.KBox.overlays.length;i++){
					var t = Number(Y.KBox.overlays[i].get('zIndex'));
					if(t > topIndex)topIndex = t;
				}
				that.overlay.set('zIndex',topIndex+1);
				return this;
			},
			render:function(opt){
				var that = this;
				that.parseParam(opt);
				that.overlay.render("#overlay-align");
				if(that.shownImmediately)that.overlay.set('visible',true);
				if(that.fixed){
					if(/6/i.test(Y.UA.ie)){
						that.overlay._posNode.setStyle('position','absolute');
					}else{
						var __x = that.overlay.get('x');
						var __y = that.overlay.get('y');
						var _R = that.overlay._posNode.get('region');
						if(that.height == 'auto'){
							__y -= Number(_R.height/2);
						}
						if(that.width == 'auto'){
							if(Y.UA.ie < 7 && Y.UA.ie > 0 ){//hack for ie6 when width was auto
								//that.overlay._posNode.query('div.yui-widget-bd').setStyle('width','100%');
								that.overlay.set('width',that.overlay._posNode.query('div.yui-widget-bd').get('region').width);
							}
							if(Y.UA.ie >= 7  ){//hack for ie7 when width was auto
								that.overlay._posNode.query('div.yui-widget-bd').setStyle('width','100%');
								that.overlay.set('width',that.overlay._posNode.query('div.yui-widget-bd').get('region').width);
							}
							__x -= Number(that.overlay._posNode.get('region').width/2);
						}
						that.overlay.move([__x,__y]);
						__y -= Y.get('docscrollY').get('scrollTop');
						__x -= Y.get('docscrollX').get('scrollLeft');
						that.overlay.move([__x,__y]);
						that.overlay._posNode.setStyle('position','fixed');
					}
				}
				if(that.x)that.overlay.set('x',Number(that.x));
				if(that.y)that.overlay.set('x',Number(that.y));
				if(that.draggable){
					that.overlay.headerNode.setStyle('cursor','move');
					if(!that.overlay._posNode.dd){
						that.overlay._posNode.plug(Y.Plugin.Drag);
						that.overlay._posNode.dd.addHandle('.yui-widget-hd');
					}
				}
				setTimeout(function(){
					if(that.overlay._posNode.getStyle('opacity') == 1 && that.overlay._posNode.getStyle('visibility') != 'hidden'){
						that.onload(that);
						Y.log('onload()');
						return;
					}
					setTimeout(arguments.callee,25);
				},0);
				if(that.modal){
					that.addMask();
				}
				return this;
			},
			removeArray:function(v,a){
				for(var i=0,m=a.length;i<m;i++){
					if(a[i]==v){
						a.splice(i,1);
						break;
					}
				}
			},
			close:function(){
				var that = this;
				that.beforeUnload(that);
				that.overlay.hide();
				setTimeout(function(){
					if(that.overlay._posNode.getStyle('opacity') == 0 || that.overlay._posNode.getStyle('visibility') == 'hidden'){
						box.removeArray(that.overlay,Y.KBox.overlays);
						that.overlay._posNode.remove();
						that.removeMask();
						that = null;
						Y.log('close()');
						return;
					}
					setTimeout(arguments.callee,25);
				},0);
				return this;
			},
			hide:function(){
				var that = this;
				that.overlay.hide();
				setTimeout(function(){
					if(that.overlay._posNode.getStyle('opacity') == 0 || that.overlay._posNode.getStyle('visibility') == 'hidden'){
						that.afterHide(that);
						return;
					}
					setTimeout(arguments.callee,25);
				},0);
				return this;
			},
			show:function(){
				var that = this;
				that.overlay.show();
				setTimeout(function(){
					if(that.overlay._posNode.getStyle('opacity') == 1 && that.overlay._posNode.getStyle('visibility') != 'hidden'){
						that.afterShow(that);
						return;
					}
					setTimeout(arguments.callee,25);
				},0);
				return this;
			},
			buildParam:function(o){
				var o = o || {};
				this.head = (typeof o.head == 'undefined'||o.head == null)?'':o.head;
				this.body= (typeof o.body== 'undefined'||o.body == null)?'':o.body;
				this.foot= (typeof o.foot== 'undefined'|| o.foot ==null)?'':o.foot;
				this.anim = (typeof o.anim == 'undefined'||o.anim == null)?true:o.anim;
				this.draggable = (typeof o.draggable == 'undefined'||o.draggable == null)?true:o.draggable;
				this.fixed= (typeof o.fixed == 'undefined'||o.fixed == null)?true:o.fixed;
				this.shownImmediately = (typeof o.shownImmediately == 'undefined'||o.shownImmediately == null)?true:o.shownImmediately;
				this.modal= (typeof o.modal == 'undefined'||o.modal == null)?false:o.modal;
				this.x= (typeof o.x == 'undefined'||o.x == null)?false:o.x;
				this.y= (typeof o.y == 'undefined'||o.y == null)?false:o.y;
				this.width = (typeof o.width == 'undefined'||o.width == null)?'300px':o.width;
				this.height = (typeof o.height == 'undefined'||o.height == null)?'200px':o.height;
				this.clickToFront= (typeof o.clickToFront == 'undefined'||o.clickToFront == null)?'':o.clickToFront;
				this.behaviours = (typeof o.behaviours == 'undefined'||o.behaviours == null)?'':o.behaviours;
				this.afterDrop= (typeof o.afterDrop == 'undefined'||o.afterDrop == null)?new Function:o.afterDrop;
				this.afterHide = (typeof o.afterHide == 'undefined'||o.afterHide == null)?new Function:o.afterHide;
				this.afterDrag= (typeof o.afterDrag == 'undefined'||o.afterDrag == null)?new Function:o.afterDrag;
				this.afterShow = (typeof o.afterShow== 'undefined'|| o.afterShow == null)?new Function:o.afterShow;
				this.beforeUnload = (typeof o.beforeUnload== 'undefined'||o.beforeUnload == null)?new Function:o.beforeUnload;
				this.afterUnload = (typeof o.afterUnload== 'undefined'||o.afterUnload == null)?new Function:o.afterUnload;
				this.onload = (typeof o.onload== 'undefined'||o.onload == null)?new Function:o.onload;//load ok后的回调,参数为layout._posNode
				this.duration = (typeof o.duration == 'undefined'||o.duration == null)?0.3:o.duration;
				return this;
			},
			parseParam:function(opt){
				var opt = opt || {};
				for(var i in opt){
					this[i] = opt[i];
				}
				return this;
			},
			addMask:function(){
				var that = this;
				if(Y.one('#t-shade-tmp'))return this;
				var node = Y.Node.create('<div id="t-shade-tmp" style=" height: 20000px; z-index: 999;background-color:#000;left:0;position:absolute;top:0;width:100%;"></div>');
				node.setStyle('opacity','0.7');
				Y.one("html").setStyle('overflow','hidden');
				Y.one('body').append(node);
				node.setStyle('display','block');
				return this;
			},
			removeMask:function(){
				var that = this;
				if(Y.KBox.overlays.length == 0 && Y.one('#t-shade-tmp')){
					Y.one('#t-shade-tmp').remove();
					Y.one("html").setStyle('overflow','');
				}
				return this;
			}
		};
		Y.KBox.alert = function(msg,callback,opt){
			if(typeof msg == 'undefined'||msg==null)var msg = '';
			if(typeof callback == 'undefined'||callback == null)var callback = new Function;
			if(typeof opt == 'undefined'||opt == null)var opt = {};
			var title = (typeof opt.title == 'undefined'||opt.title == null)?'提示':opt.title;
			var closeable = (typeof opt.closeable == 'undefined'||opt.closeable == null)?true:opt.closeable;
			var closeText = (typeof opt.closeText == 'undefined'||opt.closeText == null)?'[x]':opt.closeText;
			var btnText = (typeof opt.btnText == 'undefined'||opt.btnText == null)?'ok':opt.btnText;
			var closestr = closeable?'<a class="close closebtn">'+closeText+'</a>':'';
			var headstr = '<span class="title">'+title+'</span>'+closestr;
			opt.head = headstr;
			opt.body = msg;
			opt.foot = '<div><button class="okbtn">'+btnText+'</div>';
			opt.onload = function(box){
				var node = box.overlay._posNode;
				node.query('.okbtn').on('click',function(e){
					e.halt();
					callback(box);
					box.close();
				});
				node.query('.closebtn').setStyle('cursor','pointer');
				node.query('.closebtn').on('click',function(e){
					e.halt();
					box.close();
				});
			};
			var box = new Y.KBox(opt);
			return box.render();
		};
	}, '1.0.00',{requires: ['node','event','dump','overlay','dd-plugin','anim','plugin']});

	YUI.add('k-test', function(Y) {
     	KTest={
     		showClose:function(dModule){
				function a(){
				   var i=0;
				   function b(){
			     	  box = Y.KBox.alert(++i,null,{
							modal:true,btnText:'关闭',title:'闭包应用'
					  });
				   }
				   return b;
				}
				var c = a();
				Y.on('click',c,dModule);
     		},
     		bindUL:function(dModule){
     			var doSomething=function(e){
     				var ele=e.target._node;
     				switch(e.type){
     					case 'mouseover':
     						this.setStyle('backgroundColor','#cdcdcd');
     						break;
     					case 'mouseout':
     						this.setStyle('backgroundColor','#fff');
     						break;
     					case 'click':
     						e.halt();
 							Y.all(dModule).each(function(el,i){
 								if(el._node==ele){
									box = Y.KBox.alert("這是第 "+(i+1)+" 条记录",null,{
										modal:true,btnText:'关闭',title:'闭包应用'
									});
 								}
 							});
     						break;
     				}
     			}
     			Y.on('mouseover',doSomething,dModule);
     			Y.on('mouseout',doSomething,dModule);
     			Y.on('click',doSomething,dModule);
     		},
	     	threeClick:function(dModule){
		    	var tripleClickFactory = function(id,interval){
		    		this.el = Y.get(id);
		    		this.status = false;
		    		this.trp = [];
		     		this.interval = interval||100;
			     };
			     Y.augment(tripleClickFactory, Y.Event.Target);
			     var tripleClick = new tripleClickFactory('#iid',800);
			     tripleClick.subscribe('tpClick', function(a){
			     	  box = Y.KBox.alert('三次点击的两个间隔分别为:'+a[0]+'和'+a[1]+'毫秒',null,{
										modal:true,btnText:'关闭',title:'鼠标三击事件'
					  });
				 });
			      var tripleClickEvent = function(e){
				       tripleClick.trp.push((new Date()).getTime());
				        if(tripleClick.trp.length < 3){return;}
				        if(tripleClick.trp.length > 3){
				          var a = [];
				            for(var i = 1;i<= 3;i++){
				               a[i-1] = tripleClick.trp[ i ];
				            }
				            delete tripleClick.trp;
				            tripleClick.trp = a;
				        }
				        var s1 = tripleClick.trp[2] - tripleClick.trp[1];
				        var s2 = tripleClick.trp[1] - tripleClick.trp[0];
				        if(Number(s1)<=tripleClick.interval && Number(s2) <=tripleClick.interval){
				            tripleClick.fire('tpClick',[s1,s2]);
				            tripleClick.trp = [];
				        }
			      };
			      Y.on('click',tripleClickEvent,dModule);
			      if(Y.UA.ie != 0){
			        	Y.on('dblclick',tripleClickEvent,dModule);
			      }
			 }
		}
	}, '1.0.00',{requires: ['node']});
     YUI().use('KBox','k-test', function(Y) {
     	box=null;
		KTest.showClose('#clickC');
		KTest.bindUL('ul li');
		KTest.threeClick('#clickA');
	});
/*	YUI({modules:{
        'study': {
            fullpath: "study.js",
            requires: ['node','event','dump','overlay','dd-plugin','anim','plugin']
        }
    }}).use */
</script>
</html>


PS:因为这里不便从外部引入JS文件,所以只能使用内联方式coding了。。。杯具~
分享到:
评论
1 楼 hanxiao84322 2011-11-10  
强大啊,虽然没有完全看明白。

相关推荐

    asp.net 结合YUI 3.0小示例

    ASP.NET 结合 YUI 3.0 是一种创建动态、交互性强的Web应用程序的方法。在本文中,我们将探讨如何在ASP.NET项目中整合Yahoo User Interface (YUI)库的3.0版本,以实现级联下拉列表的效果,这是一种常见的Ajax应用场景...

    yahoo3.0 YUI Examples

    UI Library (YUI) 3.0版本的一个实例集合,旨在帮助开发者理解和应用这一强大的JavaScript和CSS框架。YUI是一个开源的前端开发工具集,用于构建高性能、可扩展的Web应用程序。这个压缩包很可能是包含了一系列的代码...

    Ext3.0 动态数据 Chart 初探

    Ext3.0动态数据Chart初探 在Web开发中,数据可视化是不可或缺的一部分,它能够帮助用户更好地理解和分析数据。Ext JS是一个强大的JavaScript库,专为构建富客户端应用程序设计,其图表组件(Chart)功能强大,支持...

    Struts2+JSON+YUI组合应用之二构建RichClient

    Struts2、JSON和YUI是开发Web应用程序时常用的三个技术。它们的组合可以创建功能丰富、用户体验良好的富客户端(Rich Client)应用。下面将详细解释这三个技术以及如何结合使用来构建这样的应用。 **Struts2**:...

    ext3.0+Spket自动提示

    EXT3.0是一个JavaScript组件库,它提供了一套完整的用户界面解决方案,适用于构建富互联网应用程序(RIA)。而Spket则是Eclipse IDE的一个插件,专为JavaScript、AJAX、Dojo、YUI等前端框架提供代码提示和智能感知...

    yui3-master.zip

    本文将围绕“yui3-master.zip”这个压缩包,深入探讨YUI3的核心概念、结构和实际应用。 1. **模块化设计** YUI3采用了模块化的设计理念,每个功能都被封装为独立的模块,开发者可以根据需要按需加载,降低了整体...

    yui 资源包

    在3.9.0 r2这个版本中,YUI提供了丰富的组件和工具,帮助开发者创建高效、可维护且用户体验优良的Web应用。 一、YUI的核心特性 1. **模块化**:YUI采用AMD(Asynchronous Module Definition)模块加载机制,允许...

    yui.rar 例子

    总结来说,“yui.rar 例子”为我们揭示了YUI在实际项目中的应用,从简单的布局到模块化的代码组织,再到丰富的组件库和强大的调试工具,都体现了YUI的强大功能和易用性。学习并掌握YUI,不仅可以提高开发效率,还能...

    YUI3.6文档及示例

    在这个文档及示例的压缩包中,你将找到关于YUI3.6的详细信息,包括API文档和实践示例,这将有助于你深入理解和应用YUI。 YUI3.6主要包含以下几个核心部分: 1. **模块系统**:YUI3引入了模块化设计,允许开发者按...

    yui_2.5.2 类库

    YUI广泛应用于大型网站和应用,如雅虎自身的产品,以及许多其他企业的项目。它可以用于创建富互联网应用(RIA)、响应式布局、移动应用等,提供了强大的功能支持。 6. **与其他库的比较** YUI与jQuery、Prototype...

    YUI-EXT使用详解

    YUI-EXT提供了许多高级组件,如表格、菜单、窗口、表单、布局管理器等,极大地丰富了YUI的功能,使得开发者能够更加便捷地创建具有复杂交互性的Web应用。 YUI本身是一个开源的JavaScript库,由Yahoo开发,旨在简化...

    YUI3.7.3 最新版本 带API

    YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的...通过下载并研究这个版本,你可以深入了解YUI的工作原理和最佳实践,从而更好地应用于实际项目中。

    yui_2.9.0前端UI

    是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具: YUI Compressor ...

    YAHOO yui2.7 文档+ 代码+例子

    通过文档,开发者可以快速上手,并理解如何将YUI应用到实际项目中。同时,示例代码有助于直观地展示各个功能的实际效果,帮助开发者更好地理解和运用YUI。 **4. 跨浏览器兼容性** YUI致力于提供广泛的浏览器支持,...

    yui_3.0.0(雅虎官方)

    YUI 3.0.0广泛应用于企业级Web应用、大型网站、富互联网应用(RIA)、移动应用开发等领域。其组件化的特性使得开发者可以根据项目需求灵活组合和扩展功能,提高开发效率。 ### 学习路径 学习YUI 3.0.0,首先需要...

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。...这份汉语版的YUI使用文档对于中国开发者来说,无疑是一个宝贵的资源,可以帮助他们更好地理解和应用YUI库。

    一些关于YUI的资源

    9. **兼容性**:YUI致力于跨浏览器兼容性,支持包括IE、Firefox、Chrome、Safari和Opera在内的主流浏览器,确保应用在不同平台上的一致性表现。 10. **社区支持**:作为开源项目,YUI拥有活跃的社区,开发者可以在...

    【YUI组件】基于YUI的表单验证器

    YUI是一个开源的JavaScript库,它包含了丰富的工具和组件,用于创建交互式、高性能的Web应用。这个表单验证器是YUI库中的一个关键部分,用于确保用户在提交表单时输入的数据符合预设的规则和格式,从而提高数据质量...

    yuicompressor-2.4.8.jar

    本文将深入探讨yuicompressor的功能、原理及其在Idea中的应用,帮助你掌握这一前端优化神器。 首先,让我们了解什么是yuicompressor。yuicompressor是由Yahoo!公司开发的一款开源的JavaScript和CSS压缩工具,它能够...

Global site tag (gtag.js) - Google Analytics