Version 3.10.3

Example: Loading Tab Content

This example shows how to create a plugin to load YQL data into a TabView for dynamic content.

Today's Browser News

Note: be sure to add the yui3-skin-sam classname to the page's <body> element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning. 

<body class="yui3-skin-sam"> <!-- You need this skin class -->

Creating the YQL Plugin

Plugin Constructor

To create a plugin, we need to create a constructor with a static NS property. This is the namespace used by the plugin on each instance.

// YQL plugin for Y.Tab instances
var TabYQL = function(config) {
    this.init(config);
};

TabYQL.NS = 'yql'; // plugin namespace (e.g. "tab.yql.load(myQuery)");
Plugin Prototype

Next we will add the YQL functionality to the prototype. The init method wires the YQL functionality up using the load method.

TabYQL.prototype = {
    init: function(config) {
        if (this.tab) {
            this.tab.after('selectedChange', Y.bind(this.afterSelectedChange, this));
        }
    },

    afterSelectedChange: function(e) {
        // only load if not already loaded
        if (!this.loaded) {
            this.load(this.query, this.afterLoad);
        }
    },

    load: function(query, afterLoad) {
        Y.YQL(query, Y.bind(afterLoad, this));
    }

Creating the TabView

Next we will create a new instance of a TabView:

/* Create a new TabView instance, with content generated from script */
var tabview = new Y.TabView();

And then use the add method to add the Tab instances, to add a tab for each of the feeds, then render the tabview into the placeholder element.

var feeds = {
    Chrome: 'chrome+browser',
    Firefox: 'firefox+browser',
    Safari: 'safari+browser',
    Explorer: 'explorer+browser',
    Opera: 'opera+browser'
};

Y.each(feeds, function(feed, label) {
    var tab = new Y.Tab({
        label: label,
        content: 'loading...',
    });

    tab.plug(TabYQL, {
        query: 'select title, link from rss where ' +
            'url="http://search.news.yahoo.com/rss?p=' +
            feed + '"'
    });

    tabview.add(tab);
});

tabview.render('#demo');