YUI3学习 (一)

本文介绍了YUI的快速启动方法、如何使用YUI文件、DOM操作、UI实现及Ajax应用,提供了完整的示例代码,深入浅出地阐述了YUI在网页开发中的重要作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

链接:http://yuilibrary.com/yui/quick-start/

时间:2014-07-13

作者:http://czon.cn

----------------------------------------------------------------------------------------------------------------------- 

一、快速启动,引入种子文件

// 引入种子文件.
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
二、使用YUI文件

<script>
// 建立一个YUI沙盒模型.
YUI().use('node', 'event', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Your code goes here!
});
</script>
在使用YUI的时候,首先你要创建一个叫做“沙盒”的YUI实例(instance),每一个YUI沙盒都有自己的实例,(上面的代码中Y被创建最后回调给函数使用)并激活自己,这样的机制保证了在相同的网页中他们之间不会相互干扰。这样你在沙盒中定义的变量都不会相互污染。

在上面打代码中,我们首先创建了一个沙盒模型,在里面我们引用了node和event两个模块,这样,在这个沙盘李里面我们就可以通过Y这个实例访问网页的中DOM 元素啦。

加载你想要使用的模块,你就可以使用它了。

三、使用DOM

  使用YUI的节点组件即node可以快捷的访问、创建和操作DOM元素,节点可以搞定这些事情。

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.setHTML('<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();
    });
});

四、关于UI

YUI可以优雅和艺术的完成CSS的过度实现

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
    });
});

五、Ajax的使用 

使用node-load 组件动态的填充正在运行的网页很容易实现

YUI().use('node-load', function (Y) {
    // Replace the contents of the #content node with content.html.
    Y.one('#content').load('content.html');
});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值