#

# 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');