YUI3的几点说明 YUI3是一个重量级的前端框架库,它提供了单元测试(YUITest),生成文档(YUIDoc),自动化编译(YUI Build)等工具,在代码组织方面有统一的微件(widget)...alloyUI 是基于YUI3创建的一个UI库,提供了许多常用的UI组件和简单的api.我的例子也是在alloyUI基础上做出 来的....关于例子的一些说明 因为时间仓促,以及本人也是刚刚接触YUI的缘故.所以这个例子非常简单. 主要展示了一个表单的布局,校验,加载和提交数据.以及一些比较常用的UI组件....上的一个扩展(gallery),YUI上的扩展接近200来个.还有许许 多多的公司和开发者在为其贡献代码.我们自己也可以动手,在YUI3的基础上来扩展....前端技术平台的问题,我倾向于慎重考虑几个问题后再做选择: 我们要做什么,具体要达到什么目标 开源的框架选择了以后,我们能不能驾驭它,成本风险评估如何 可行性方案(个人意见): 基于YUI3的widget
调用方法: 既然我们是使用的YUI这个js库,那么肯定第一步就是引用这个文件,刚才在上面已经说了我们要使用的是yui-min.js这个文件,当然你可以对他进行改名,你只需要到你下载的yui库的文件中找到他...后面的地址请根据实际情况填写,当然你也可以使用官方提供的地址,请看: yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js...实现我们的功能 当我们已经调用好Yui这个js库以后,接下来就得看我们自己的了,如何通过Yui来实现我们想要的功能呢,嘿嘿,请看: 1、Yui 3最基本的使用格式: YUI().use(”node”,...function(Y) { // 书写你的js代码 }); 就是要使用Yui 3提供的方法,就必须得将他们写在上面这个大括号之内,不然无法使用。...在Yui 3的get方法中也是这样的。
YUI3总体认识 1.1 面向对象的JS编程,RIA工具: 面向对象的JS编程,主要体现的以下几个方面: 1....接口和抽象类 YUI3 oop的argument()可以实现类似的功能 4....模块之间的引用,即代码复用 YUI3的沙箱模型,可以使JS模块化,在Y.use中引入,可以实现代买复用 1.2 重量级框架,oop思想 YUI3中的oop模块就是面型对象编程的重要体现 1.3...YUI3 API使用 点击YUI3 的web site后能看到他的详细结构: 学习他的API就应该从这个开始: 第一列就是一些帮助文件信息,还有一些辅助开发工具,我用过的也就是Console了,...这个就是他的这个全局的YUI Global Object 所用到的模块。
为了达到这个目的: YUI在元素上添加一个class名 “yui3-js-enabled”; 然后,开发者可以在widget的内容上添加class名 “yui3-widget-loading...”,代表加载中状态; 这个class名可以和“yui3-js-enabled”一起使用,在JavaScript正在加载时隐藏widget的内容. .yui3-js-enabled .yui3-widget-loading...比如:对于继承于Slider的MultiThumbSlider类,在bounding box上会标记“yui3-widget”、“yui3-slider”和“yui3-multithumbslider”...常用格式如下:“yui3-[widgetname]-[state]”。比如:“yui3-slider-hidden”、“yui3-slider-disabled”。...默认的格式是:“yui3-[widgetname]-content”。如“yui3-slider-content”。
YUI是Yahoo发布的一个JS框架,虽然不如jQuery简单,但是如果你是要做一些复杂的事情的时候,有一个合适量级的框架还是能有用不少。 YUI3中的一些定义。 Module。...YUI3中的每块代码都可以看作是一个Module。...通过引入Seed文件后,由YUI框架自动调入。 1: yui.yahooapis....../yui-min.js”> 2: 3: yui.yahooapi......在YUI实例化时,YUI()方法中可以接收多个配置项,例如YUI(c1,c2,,,)。 1: yui.yahooapis...
YUI 3 的 loader 已经很优雅地融合在YUI(config).use('moduleName', callback)中: YUI({ base: 'http://t-yubo/assets.../yui/3.0.0/build/', debug: true, filter: 'debug', modules: { jquery: { fullpath...jquery/1.3/jquery.min.js' } } }).use('jquery', 'node', function(Y) { jQuery('body').text('YUI...; }); config参数,在 yui-base 模块里,原封不动地传给了 Loader: // use loader to expand dependencies and sort the // requirements...将 YUI 自带的所有 modules 信息,存放在一个很大的数据对象里: modules = { moduleName: { requires: [...],
YUI Compressor默认不带右键安装功能 YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱。...可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。...于是只好自己摸索,下面写出添加添加右键过程,适合任何YUI Compressor版本。 安装步骤 一、下载YUI Compressor任何你想使用的版本,这里我下载最新版本2.4.7版本。...Compressor] [HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\YUI Compressor\command] @=”D:\\yuicompressor...右键js文件,弹出的菜单里,有一个 YUI Compressor选项,单击它对选中的文件压缩 正常的压缩命令提示 压缩后生成的文件,以及大小对比。
最简单的引用YUI3的方法自然是引用Yahoo服务器上的种子文件,地址如下: yui.yahooapis.com/3.0.0/build/yui/yui-min.js..."> 引用了种子文件之后,我们就可以在我们的应用中使用Overlay了,建立一个新的YUI的命名空间,如下: YUI().use(‘overlay’,function(Y){...使用overlay也好,其他的yui特性也好,感觉非常的方便和灵活,可以说是一个真真正正为开发者考虑的js框架,而我们也应该学习YUI3的这种设计思想和风格,让自己的应用也变得更加灵活和方便。...总体来看,目前YUI3的Overlay基本能够满足我们日常创建一些叠加层的需要,但是还有一些更高级的属性或者控制功能期待在后续的版本中加入进来。...Technorati Tags: YUI3,Overlay,浮动层 参考资料: 1、YAHOO YUI3 Overlay
YUI3的CSS与YUI2的CSS不同 改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多,而且配合Grid Build Tool,可以快速的生成复杂的页面结构。...YUI3 Reset YUI3的Reset同YUI2.8中的Reset有些区别,在YUI3的CSS Reset中,我们可以对所有HTML资源重设其表现,以达到不同浏览器下的一致表现(Page Level...YUI3 Fonts 在YUI2的Fonts中,使用em来表示文字的大小。但是在YUI3中,这一规则被打破了,改为使用百分比来表示文字的大小。如下表,这样的表达方式对于平时的书写来说,是不太友好的。...YUI3 Grids 习惯了YUI2中的Grids System之后,初次转换到YUI3中非常不习惯。因为YUI2提供了一个非常强大的工具(YUI Css Grid Builder)。...参考资料: 1、YUI3 CSS Reset 2、YUI3 CSS Fonts 3、YUI3 CSS Grids 4、YUI3 Alignment Example Page 5、YUI3 Grids Are
以下只是在YUI学习和使用中零碎的一些心得体会,未成体系,发出来,供批判。 1、利用 Font、Base、Grid CSS进行快速的网页布局。...对YUI一直很有好感,最近开始看了看YUI CSS GRID,发现这个理念非常好,非常有利于我们工作效率的提高,特别是熟悉了这套CSS之后,我们就不必每一个项目自己都去写一些CSS。...但是YUI CSS GRID在YUI3中已经不被推荐使用,我为此感到惋惜和不解。不过幸好,及时不被推荐,我们仍可在项目中使用他。 2、 IO的使用。...这个在YUI的论坛里有人反映了,是一个bug,已经解决,但是官方的那个build还没有更新。...4、YUI Library 5、YUI Loader 学习笔记
YUI3在前身YUI2基础上进行了大量的重新设计,并不只是简单的版本升级。YUI3强调代码重用,将功能做了级别划分和颗粒化的设计。...YUI 3重点是代码的组织和结构。以下是结构图。 YUI3在结构上分为四大类: 种子:该模块是YUI3的单一核心,页面都必须包含该模块,该模块提供加载功能,所以可以堪称是YUI的一个种子。...在YUI3中扮演引导层的作用,通过在页面引入种子相关文件,调用YUI().use()方法可以安全快速的加载YUI3核心类和组件类。 包含YUI Base、Get和Loader模块。...YUI3学习路线 目前关于YUI3的中文资料并不多,也未发现一本介绍YUI3的书籍。...yui3/yui/yui-min.js"> 之后嵌入脚本,验证YUI3是否调用成功 YUI({filter
---- YUI Compressor相关信息 官网 GitHub地址 ---- 混淆单个js 一般命令, java -jar yuicompressor-x.y.z.jar myfile.js -o...invalid property id 该文件的第110行内容是float: false,, 参照Stack Overflow–Compression issues with JQuery file in YUI...Compressor,由于float同时是js和css的关键字,故YUI会将其区分不开,需改为"float": false,。
YUI3是一个非常好的开源框架,但是学习曲线稍微有些陡峭,这个系列将记录下我使用YUI3过程中的一些心得点滴,希望对大家能够有帮助。...很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。 YUI3提供了Overlay这个组件来实现可定位、可叠加的弹出层效果,这个弹出层同时还包含标准的布局模块。...yui.yahooapis.com/3.1.1/build/yui/...yui-min.js"> 之后,我们就可以创建YUI的实例了。...YUI().use(“overlay”, function(Y){ }); 传给use最后的一个参数是一个回调函数。该回调函数在YUI实例完成了页面中缺少的文件加载后开始执行。
简介 这篇文章主要介绍了Maven压缩插件YUI Compressor使用介绍以及相关的经验技巧,文章约18810字,浏览量165,点赞数5,值得参考!...使用说明: 使用YUI Compressor压缩JS和CSS。 需要Maven2.0及以上工程。 默认情况绑定到构建生命周期:process-resources。...默认值:false gzip boolean 请求创建yui 压缩/ 聚合文件的gzip压缩版本。默认值:false jswarn boolean [js only]显示代码中可能存在的错误。
在应用YUI3的过程中,我们团队积累了一些经验,这里总结成篇,分享给大家。 为什么选择YUI3 使用什么前端基础框架是建立前端团队最重要的技术决策之一。...但早在2008年8月13日,YUI3 Preview Release 1中就已经给出了YUI团队的解决方案,并在2009年9月29日YUI3正式版发布时定型。...为了实现自动加载,需要将所有模块的元信息提供给YUI的Loader。 最初,为了更快的从YUI2迁移到YUI3,模块元信息放在PHP中进行维护。随着时间的推移,渐渐显示出很多弊端。...通过不断的实践,我们越发认为这是YUI3的精髓所在。...行进中开火 在整个YUI3的实践中,我们犯过很多错误,例如全局只有一个YUI实例、Combo的CSS图片依赖等等,但这些并没有成为放弃的理由。
最简单的引用YUI3的方法自然是引用Yahoo服务器上的种子文件,地址如下: yui.yahooapis.com/3.0.0/build/yui/yui-min.js..."> 引用了种子文件之后,我们就可以在我们的应用中使用Overlay了,建立一个新的YUI的命名空间,如下: YUI().use(‘overlay’,function(Y){...使用overlay也好,其他的yui特性也好,感觉非常的方便和灵活,可以说是一个真真正正为开发者考虑的js框架,而我们也应该学习YUI3的这种设计思想和风格,让自己的应用也变得更加灵活和方便。...总体来看,目前YUI3的Overlay基本能够满足我们日常创建一些叠加层的需要,但是还有一些更高级的属性或者控制功能期待在后续的版本中加入进来。...Technorati Tags: YUI3, Overlay, 浮动层 参考资料: 1、YAHOO YUI3 Overlay 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn
本文主要内容取自 Caridy Patino 在2008年发布的文章,原文中使用的是YUI2,笔者对例子做了一些更新,均使用了YUI3.1.1,文章中讨论的这个问题,在Ajax满天飞的现在具有典型意义...例如,在使用YUI的情况下: 构建页面DOM: 构建符合要求的页面DOM(当然我们也可以使用YUI来动态的创建DOM,但这样就丧失了搜索引擎友好的特性)。...Instance YUI({base:'..... //Create YUI Instance YUI({base:'.....4、YUI Plugin
查看当前无效对象 select * from dba_objects t where t.status = 'INVALID' order by 1; 编译无效对象: 有两种方式: 1、执行sql查询结果
前景 日常工作中,遇到的一些checkout无效或者commit提交不了的情况 1.首先 你需要update的项目 会告诉你更改了那些配置,必须要还原或者提交 git pull 2.暂存提交 git stash
YUI这几个CSS存在于两个版本的YUI中(YUI2和YUI3)。本文的介绍以YUI3版本为例。 1、YUI3 Css Reset。...YUI3的Css Reset还提供了局部的Reset样式的功能,在我们想对某一容器内的元素(而不是整个页面)进行样式统一时使用。 2、YUI3 Css Base。...YUI3 Css Grids中对于命名规则进行了改变,这与YUI2 Css Grids中有很大的不同。不过基本原理还是一样的熟悉了任何一个,就能够方便快速的进行页面的布局。...当然,现在YUI3的Css Grids还在Beta阶段,还不是太完善,如果我们需要一个成熟的解决方案,可以考虑使用YUI2的Css Grids,使用YUI2的Css Grids并不会影响我们使用YUI3...的框架,他只是一个样式表嘛 :) 参考资料: 1、YUI CSS Reset 2、YUI CSS 3、A-Grade Browsers