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

YUI 3.0应用初探

YUIIEwebkitUPprototype
阅读更多
很惭愧。。。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了。。。杯具~
分享到：
| JS iframe跨域自适应内容高度
评论
1 楼 hanxiao84322 2011-11-10  
强大啊，虽然没有完全看明白。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    yahoo3.0 YUI　Ｅxamples

    注意，这仅仅是Examples. 下面的是，大家不要下错了。 spring2.0中文参考手册.pdf http://d.download.csdn.net/down/333491/negro12

    asp.net 结合YUI 3.0小示例

    公司最近做了个WEB项目，网上这方面的东西也很少的，没办法就自己摸索了。 用到了Ajax这一段时间研究了一下它的用法，故来解释一下。

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

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

    YUI 入门教程YUI 入门教程YUI 入门教程

    YUI教程YUI 入门教程YUI 入门教程YUI 入门教程

    yui_2.9.0前端UI

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

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    Ext JS 3.0 正式版

    Ext JS 3.0 正式版发布 - 产生影响力 让超过40万开发人员的工作更智能，而不是更辛苦。更快地交付成果： * 提供了参照DWR后与后台的通讯包Direct，支持具有明显的REST风格的CRUD服务 * 一系列的新的组件和例子，...

    yui3-master.zip

    yui3-master.zip

    extJS-3.0完整包

    ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。...

    js 压缩YUI

    雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了

    yui 资源包

    yui 源码下载，3.9.0 r2 包，最新版本

    yuicompressor，给YUI Compressor添加右键命令

    YUI Compressor非常好用，特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能，每次压缩都要cmd输入一些命令实在是繁琐，本文就介绍如何给YUI Compressor添加右键命令，方便使用。 网上已有...

    yui_2.6.0r2

    yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2

    yuitest YUI测试工具

    YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式，通过异步 HTTP 请求加载模块、然后执行...YUI是个“学院派”的框架，以性能和严谨著称，易用性相对而言弱了一些。它能否在已经拉开的 JavaScript 框架大战中胜出，让我们拭目以待。

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    YUI3 dialog组件

    基于YUI3的dialog组件该组件是基于YUI3开发的，功能强大，详细见http://www.qiqicartoon.com

Magicbox
Global site tag (gtag.js) - Google Analytics