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