Yui3使用指南一

àì夳堔傛蜴生んèń 2022-08-20 13:23 141阅读 0赞

1、开始使用

// 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模块加载完成后你的代码将会
      
       被执行。
      
       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、创建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> 
      
       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> 5.Yui3回去对象的方法 Y.all(”.calss”);//可以获取所有具有class名称的class的对象，注意，这里 得到是一个数据。
     我们经常在js中都可能用到的为一个对象增加class，哈哈，在这里我们可以使用它啦，使用方法就是：myNode.addClass(’foo’);
     myNode.setStyle(’opacity’, 0.5);//设置对象的样式 Y.on(事件,函数,对象);//js中有事件监听函数，但是IE和DOM是有区别的，注意，Opera支持IE和DOM的两种监听函数，以 前为了兼容多个浏览器，我们需要单独写一个兼容的函数，而在Yui3不需要，如果你想使用的话，可以直接使用Y.on(事件,函数,对象); yui不仅仅只有这几个方法的，还有很多，比如 set，get,appendChild,test,removeClass,getXY,getX,gety还有很多。