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