0N/A<div class="intro">

0N/A <p>This example shows how to create a plugin to load YQL data into a TabView for dynamic content.</p>

0N/A</div>

0N/A

0N/A<div class="example yui3-skin-sam">

0N/A{{>tabview-io-source}}

0N/A</div>

0N/A

0N/A<h2>Creating the YQL Plugin</h2>

0N/A<h3>Plugin Constructor</h3>

0N/A<p>To create a plugin, we need to create a constructor with a static

0N/A <code>NS</code> property. This is the namespace used by the plugin on each

0N/A instance.</p>

0N/A

0N/A```

0N/A // YQL plugin for Y.Tab instances

0N/A var TabYQL = function(config) {

0N/A this.init(config);

0N/A };

0N/A

0N/A TabYQL.NS = 'yql'; // plugin namespace (e.g. "tab.yql.load(myQuery)");

0N/A```

0N/A

0N/A</h3>Plugin Prototype</h3>

0N/A<p>Next we will add the YQL functionality to the prototype. The init method

0N/A wires the YQL functionality to the Tab instance.</p>

0N/A

0N/A```

0N/A TabYQL.prototype = {

0N/A init: function(config) {

0N/A if (this.tab) {

0N/A this.tab.after('selectedChange', Y.bind(this.afterSelectedChange, this));

0N/A }

0N/A }

0N/A```

0N/A

0N/A<h2>Creating the TabView</h2>

0N/A<p>Next we will create a new instance of a TabView:</p>

0N/A

0N/A```

0N/A/* Create a new TabView instance, with content generated from script */

0N/Avar tabview = new Y.TabView();

0N/A```

0N/A

0N/A<p>And then use the <code>add</code> method to add the <code>Tab</code> instances,

0N/Ato add a tab for each of the feeds, then render the tabview into the placeholder

0N/Aelement.</p>

0N/A

0N/A

0N/A```

0N/A var feeds = {

0N/A Chrome: 'chrome+browser',

0N/A Firefox: 'firefox+browser',

0N/A Safari: 'safari+browser',

0N/A Explorer: 'explorer+browser',

0N/A Opera: 'opera+browser'

0N/A };

0N/A

0N/A Y.each(feeds, function(feed, label) {

0N/A var tab = new Y.Tab({

0N/A label: label,

0N/A content: 'loading...',

0N/A });

0N/A

0N/A tab.plug(TabYQL, {

0N/A query: 'select title, link from rss where ' +

0N/A 'url="http://search.news.yahoo.com/rss?p=' +

0N/A feed + '"'

0N/A });

0N/A

0N/A tabview.add(tab);

0N/A });

0N/A

0N/A tabview.render('#demo');

0N/A```

0N/A