YUI介绍以及快速入门 Yahoo的JS框架
本文由发表于6年前 | Javascript | 评论数 5 |  被围观 24,482 views+
1、YUI介绍:2、在页面中引入JS文件:3、开始使用YUI:3.1、创建一个YUI沙箱:3.2、在YUI中使用DOM节点3.3、创建UI效果3.4、使用Ajax加载内容
1、YUI介绍:

YUI库是一系列使用Javascript和CSS创建的的工具和控件集,用来创建富客户端Web应用。使用到了DOM scripting,DHTML和AJAX。

2、在页面中引入JS文件:

可以从官网下载YUI http://yuilibrary.com/yui/quick-start/ 然后引入页面,也可以在线引入

<script type="text/javascript" src="script/yui3/build/yui/yui-min.js"></script>
<!-- <script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script> -->
3、开始使用YUI:
3.1、创建一个YUI沙箱:
<script>
// Create a YUI sandbox on your page.
YUI().use('node', 'event', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Your code goes here!
});
</script>

创建一个YUI实例用于使用所有的YUI组建,也叫一个沙箱。每一个YUI沙箱都有它自己的一个实例和一套自己的激活了的模块,所以它不会与同一个页面中的其他沙箱冲突。任何定义在沙箱内的变量只会在本沙箱内有效,不会自动变成全局变量。

当声明一个沙箱 时,指定你想想要使用的模块,在上面的代码中,我们指定了使用node和even模块 。这样,我们就可以在这个沙箱内通过Y来使用node和evnet的API了。

YUI会管理需要依赖的各模块的运算和加载在你的页面中单一请求或者组合请求中需要使用到得JS文件。在所有的YUI模块加载完成后你的代码将会被执行。

3.2、在YUI中使用DOM节点

YUI中的节点组件使得使用,创建和操作DOM节点变得非常方便。节点API允许使用元素相关参照物或者选择器去使用DOM决节点

<script>
YUI().use('node', function (Y) {
    // Access DOM nodes.
    var oneElementById     = Y.one('#foo'),
        oneElementByName   = Y.one('body'),
        allElementsByClass = Y.all('.bar');

    // Create DOM nodes.
    var contentNode = Y.Node.create('<div>'),
        listNode    = Y.Node.create('<ul>'),
        footerNode  = Y.Node.create('<footer>');

    contentNode.setContent('<p>Node makes it easy to add content.</p>');
    listNode.insert('<li>Buy milk</li>');
    footerNode.prepend('<h2>Footer Content</h2>');

    // Manipulate DOM nodes.
    Y.all('.important').addClass('highlight');

    Y.one('#close-button').on('click', function () {
        contentNode.hide();
    });
});
</script>
3.3、创建UI效果

使用Transition组件使得在你的用户交互中创建基于CSS的绚丽效果变得更加容易了。

<script>
YUI().use('transition', function (Y) {
    // Fade away.
    Y.one('#fademe').transition({
        duration: 1, // seconds
        opacity : 0
    });

    // Shrink to nothing.
    Y.one('#shrinkme').transition({
        duration: 1, // seconds
        width   : 0,
        height  : 0
    });
});
</script>
3.4、使用Ajax加载内容

由node-load模块提供的Node.load()方法使得在页面运行时动态的添加内容更方便了。

<script>
YUI().use('node-load', function (Y) {
    // Replace the contents of the #content node with content.html.
    Y.one('#content').load('content.html');
});
</script>
本问由arthinking翻译,查看英文原文:http://yuilibrary.com/yui/quick-start/
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/introduction-and-quick-start-yui-js.html
关键字:
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 12/19
文章评论
    5条评论
  1. 鬼片迷 2013年08月20日16:23:21  #-49楼 回复 回复

    这个教程对新手来说是很有价值的!

  2. L.LAWLIGHT 2015年02月27日01:29:49  #-48楼 回复 回复

    非常感谢,分分钟就能对YUI有个大概了解

  3. 泉子欣 2016年09月09日15:37:57  #-47楼 回复 回复

    太感谢有这个文档了

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 ExtJS表格使用JsonStore条件查询参数不能传递参数给第二页的解决方法 2011/7/29
2 JSF笔记 – JSF在项目中的基本使用 实现一个简单的登录跳转 2011/12/1
3 JVM笔记 – 虚拟机执行子系统(虚拟机类加载机制) 2014/12/8
4 禅茶 2014/3/23
5 The Main Function of Activity and its Basic Usage 2011/7/12
6 数据结构笔记 – 排序算法 直接插入排序算法 2011/9/20
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.