YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: Multiple Instances

## The YUI Global Object: Multiple Instances

This example shows how to work with multiple YUI instances.

View example in new window.

### Setting up the first YUI Instance

Here we will create our first YUI instance and tell it to load the `anim` module.

    YUI().use('anim', function(Y) { });

    YUI().use('anim', function(Y) {

    });

YUI().use('anim', function(Y) { });

### Using Animation

Now let's setup a simple animation on the Node `#demo`.

    YUI().use('anim', function(Y) {    var anim = new Y.Anim({        node: '#demo',        to: {            height: 50,            width: 150        },        from: {            height: 100,            width: 100        },        direction: 'alternate',        iterations: 30,        duration: .5    });    anim.run();});

    YUI().use('anim', function(Y) {
        var anim = new Y.Anim({
            node: '#demo',
            to: {
                height: 50,
                width: 150
            },
            from: {
                height: 100,
                width: 100
            },
            direction: 'alternate',
            iterations: 30,
            duration: .5
        });
        anim.run();
    });

YUI().use('anim', function(Y) { var anim = new Y.Anim({ node: '#demo', to: { height: 50, width: 150 }, from: { height: 100, width: 100 }, direction: 'alternate', iterations: 30, duration: .5 }); anim.run(); });

### Setting up the second YUI Instance

Here we will create our second YUI instance and tell it to load the `dd-drag` module.

Since we didn't specify the `anim` module, we will not have access to it in this instance.

    YUI().use('dd-drag', function(Y) { });

    YUI().use('dd-drag', function(Y) {

    });

YUI().use('dd-drag', function(Y) { });

### Making the node draggable

Now let's make the same node draggable (while it's animated).

    YUI().use('dd-drag', function(Y) {    var dd = new Y.DD.Drag({        node: '#demo'    });});

    YUI().use('dd-drag', function(Y) {
        var dd = new Y.DD.Drag({
            node: '#demo'
        });
    });

YUI().use('dd-drag', function(Y) { var dd = new Y.DD.Drag({ node: '#demo' }); });

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings