- 浏览: 49470 次
- 性别:
- 来自: 北京
最新评论
-
hanxiao84322:
强大啊,虽然没有完全看明白。
YUI 3.0应用初探 -
osacar:
不行啊。没效果!在Opera下测试
IE也不行。
JS iframe跨域自适应内容高度 -
xxzjzb1:
中秋送礼,首选书画、艺术品交易平台爱艺购!
JS将数字转换成三位逗号分隔的样式 -
mozart0:
货币:num.toFixed(2).replace(/(\d) ...
JS将数字转换成三位逗号分隔的样式 -
cnxxg:
这样能处理一个元素含有多个classname的情况吗?
javascript 整合的获取ID,className,tagName的方法
很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这2天没事,终于静下心来细细体验了下他的彪悍之处。实例中的一些code引用的taobao赤拔的成果,请赤拔大神表追究俺滴版权~ >_<
PS:因为这里不便从外部引入JS文件,所以只能使用内联方式coding了。。。杯具~
<!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了。。。杯具~
发表评论
-
使用javascript动态创建SVG对象的问题
2011-04-24 01:04 2244如何在html中操作SVG对象的问题,对于嵌入式<emb ... -
YUI3 事件
2011-04-23 20:02 1577YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 887function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 976JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1635什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 966在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 974平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 975var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3796function formatNumber(num){ ... -
JS iframe跨域自适应内容高度
2010-02-24 11:05 2799<!DOCTYPE html PUBLIC " ... -
话说browser的脚本并行下载
2009-12-12 13:32 1380在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1174study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 962select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 985<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2566var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1208var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 991prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 954如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1113//兼容 IE&FF&Safari var ... -
如何避免Javascript事件绑定出现内存泄漏
2009-11-12 19:02 1206Javascript绑定事件时,只要DOM的事件里访问不了DO ...
相关推荐
ASP.NET 结合 YUI 3.0 是一种创建动态、交互性强的Web应用程序的方法。在本文中,我们将探讨如何在ASP.NET项目中整合Yahoo User Interface (YUI)库的3.0版本,以实现级联下拉列表的效果,这是一种常见的Ajax应用场景...
UI Library (YUI) 3.0版本的一个实例集合,旨在帮助开发者理解和应用这一强大的JavaScript和CSS框架。YUI是一个开源的前端开发工具集,用于构建高性能、可扩展的Web应用程序。这个压缩包很可能是包含了一系列的代码...
Ext3.0动态数据Chart初探 在Web开发中,数据可视化是不可或缺的一部分,它能够帮助用户更好地理解和分析数据。Ext JS是一个强大的JavaScript库,专为构建富客户端应用程序设计,其图表组件(Chart)功能强大,支持...
Struts2、JSON和YUI是开发Web应用程序时常用的三个技术。它们的组合可以创建功能丰富、用户体验良好的富客户端(Rich Client)应用。下面将详细解释这三个技术以及如何结合使用来构建这样的应用。 **Struts2**:...
EXT3.0是一个JavaScript组件库,它提供了一套完整的用户界面解决方案,适用于构建富互联网应用程序(RIA)。而Spket则是Eclipse IDE的一个插件,专为JavaScript、AJAX、Dojo、YUI等前端框架提供代码提示和智能感知...
本文将围绕“yui3-master.zip”这个压缩包,深入探讨YUI3的核心概念、结构和实际应用。 1. **模块化设计** YUI3采用了模块化的设计理念,每个功能都被封装为独立的模块,开发者可以根据需要按需加载,降低了整体...
在3.9.0 r2这个版本中,YUI提供了丰富的组件和工具,帮助开发者创建高效、可维护且用户体验优良的Web应用。 一、YUI的核心特性 1. **模块化**:YUI采用AMD(Asynchronous Module Definition)模块加载机制,允许...
总结来说,“yui.rar 例子”为我们揭示了YUI在实际项目中的应用,从简单的布局到模块化的代码组织,再到丰富的组件库和强大的调试工具,都体现了YUI的强大功能和易用性。学习并掌握YUI,不仅可以提高开发效率,还能...
在这个文档及示例的压缩包中,你将找到关于YUI3.6的详细信息,包括API文档和实践示例,这将有助于你深入理解和应用YUI。 YUI3.6主要包含以下几个核心部分: 1. **模块系统**:YUI3引入了模块化设计,允许开发者按...
YUI广泛应用于大型网站和应用,如雅虎自身的产品,以及许多其他企业的项目。它可以用于创建富互联网应用(RIA)、响应式布局、移动应用等,提供了强大的功能支持。 6. **与其他库的比较** YUI与jQuery、Prototype...
YUI-EXT提供了许多高级组件,如表格、菜单、窗口、表单、布局管理器等,极大地丰富了YUI的功能,使得开发者能够更加便捷地创建具有复杂交互性的Web应用。 YUI本身是一个开源的JavaScript库,由Yahoo开发,旨在简化...
YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的...通过下载并研究这个版本,你可以深入了解YUI的工作原理和最佳实践,从而更好地应用于实际项目中。
是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具: YUI Compressor ...
通过文档,开发者可以快速上手,并理解如何将YUI应用到实际项目中。同时,示例代码有助于直观地展示各个功能的实际效果,帮助开发者更好地理解和运用YUI。 **4. 跨浏览器兼容性** YUI致力于提供广泛的浏览器支持,...
YUI 3.0.0广泛应用于企业级Web应用、大型网站、富互联网应用(RIA)、移动应用开发等领域。其组件化的特性使得开发者可以根据项目需求灵活组合和扩展功能,提高开发效率。 ### 学习路径 学习YUI 3.0.0,首先需要...
《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。...这份汉语版的YUI使用文档对于中国开发者来说,无疑是一个宝贵的资源,可以帮助他们更好地理解和应用YUI库。
9. **兼容性**:YUI致力于跨浏览器兼容性,支持包括IE、Firefox、Chrome、Safari和Opera在内的主流浏览器,确保应用在不同平台上的一致性表现。 10. **社区支持**:作为开源项目,YUI拥有活跃的社区,开发者可以在...
YUI是一个开源的JavaScript库,它包含了丰富的工具和组件,用于创建交互式、高性能的Web应用。这个表单验证器是YUI库中的一个关键部分,用于确保用户在提交表单时输入的数据符合预设的规则和格式,从而提高数据质量...
本文将深入探讨yuicompressor的功能、原理及其在Idea中的应用,帮助你掌握这一前端优化神器。 首先,让我们了解什么是yuicompressor。yuicompressor是由Yahoo!公司开发的一款开源的JavaScript和CSS压缩工具,它能够...