了解知道yui

Bertha 。 2022-05-25 13:13 149阅读 0赞

转自：https://blog.csdn.net/helloliuhai/article/details/17562063  
  
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>

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 YUI事件体系之Y.Do

YUI团队在种种场合不断的夸耀自己的事件体系是多么强大： YUI 3′s Event module is one of the strengths of the lib

绝地灬酷狼/ 2023年10月17日 19:41/ 0 赞/ 33 阅读

相关 YUI事件体系之Y.CustomEvent

上一篇文章中，简要介绍了YUI实现AOP的`Y.Do`对象。接下来，我们继续对YUI事件体系进行探索。本次要介绍的是`Y.CustomEvent`对象，从命名上就可以看出，

红太狼/ 2023年10月17日 19:37/ 0 赞/ 39 阅读

相关认识YUI

本文原出处：http://blog.csdn.net/alexpengster/archive/2007/03/08/1524531.aspx 這次要為你介紹一個開發 DH

╰+攻爆jí腚メ/ 2022年09月21日 05:56/ 0 赞/ 126 阅读

相关 Yui3使用指南一

1、开始使用 <script> // Create a YUI sandbox on your page. YUI().use('node'

àì夳堔傛蜴生んèń/ 2022年08月20日 13:23/ 0 赞/ 160 阅读

相关 yui3学习（-）简单介绍

YUI3强调代码重用，将功能做了级别划分和颗粒化的设计。在概念上抽象出核心、工具、和组件类，分别放在不同的目录结构中，需要的时候自行去引用。为动态加载的框架设计做铺垫。 YU

傷城~/ 2022年08月20日 13:23/ 0 赞/ 167 阅读

相关 YUI 3 学习笔记：dom

YUI Dom 模块的层次结构很清楚： ![yui-dom.png][] 展开的详细图：[yui-dom-full.png][] 一点心得 1. 很清晰的 s

亦凉/ 2022年08月06日 15:27/ 0 赞/ 160 阅读

相关 YUI 3 学习笔记：event

event 模块包括 event, event-custom, event-simulate 三部分，类图如下： [![yui-event-thumb.png][] ][y

Dear 丶/ 2022年08月06日 15:26/ 0 赞/ 10 阅读

相关 YUI 3 学习笔记：node

node 包括 7 个子模块： 1. node-base, node-style 和 node-screen 分别封装了 dom-base, dom-style, dom-

柔情只为你懂/ 2022年08月06日 15:26/ 0 赞/ 155 阅读

相关 YUI 3 学习笔记：component infrastructure

[![yui-component-infrastructure-thumb.png][] ][yui-component-infrastructure-thumb.png_]

冷不防/ 2022年08月06日 15:26/ 0 赞/ 128 阅读

相关了解知道yui

转自：https://blog.csdn.net/helloliuhai/article/details/17562063 1、YUI介绍： YUI库是一系列使用J

Bertha 。/ 2022年05月25日 13:13/ 0 赞/ 150 阅读