CODEWITHSUNDEEP
javascriptloadyui3
Sri
Sri

Reputation: 21

How to load a custom js script in YUI 3

I am a newbie to web development but have been playing around with YUI for a few months now. Can anyone let me know how to load a custom "js" script in YUI 3?

I want to use the "contentflow" carousel in YUI 3. For this i need to include the contentflow.js within the "YUI.use()" so that I can access the methods.

Upvotes: 2

Views: 768

Answers (2)

Marian07
Marian07

Reputation: 2582

// Load a single JavaScript resource.
Y.Get.js('http://example.com/file.js', function (err) {
    if (err) {
        Y.log('Error loading JS: ' + err[0].error, 'error');
        return;
    }

    Y.log('file.js loaded successfully!');
});

Source: https://clarle.github.io/yui3/yui/docs/get/

Upvotes: 0

Matt Sain
Matt Sain

Reputation: 169

To add a module (so that YUI recognises it) you need to add it to the configuration. There are three ways of doing this.

  1. Using YUI_config = {}; sets a global configuration object for all YUI().use
  2. Using YUI.GlobalConfig = {}; sets a global configuration object for all YUI().use
  3. Using YUI({}).use(...; sets a local configuration object for this YUI().use

In the config object you need to configure the module to be understood in your use.

{
    filter : "raw",
    modules : {
        "contentFlow" : {
            fullpath : "path/to/contentFlow.js"
        }
    }
}

Then you can do:

YUI().use("contentFlow", function (Y) {
    //content flow available here 
});

However I would recommend using the YUI.add method in the content flow JavaScript to expose the content flow "class". So in contentFlow.js, I would wrap the following:

YUI.add("contentFlow", function (Y) {
    //contentFlow.js contents goes here...         
    ...
    //end of file
    Y.ContentFlow = ContentFlow;
}, '', {});

Then you can:

YUI().use("contentFlow", function (Y) {
    var cf = new Y.ContentFlow({...}); 
});

Upvotes: 1

Related Questions