docs/partials/tabview-io-source.mustache

	tabview-io-source.mustache revision 04bd2079d5dfdc83919172a7d68e24a4ebf86d0f
<style>
.example h3 {
    color: #666;
    margin: 0.5em 0;
}
</style>
<h3>Today's Browser News</h3>
<div id="demo"></div>
<script type="text/javascript">
YUI().use('tabview', 'yql', 'substitute', function(Y) {
    var feeds = {
        Chrome: 'chrome+browser',
        Firefox: 'firefox+browser',
        Safari: 'safari+browser',
        Explorer: 'explorer+browser',
        Opera: 'opera+browser'
    },

        yqlTemplate = 'select title, link from rss where ' +
            'url="http://search.news.yahoo.com/rss?p={p}"',

        resultTemplate = '<li><a href="{link}">{title}</a>',

        errorMsg = 'Headlines are currently not available',

        tabview = new Y.TabView();

    function getContent(tab) {
        var src = feeds[tab.get('label')],
            query = yqlTemplate.replace('{p}', src);

        Y.YQL(query, function(r) {
            var results = (r.query) ? r.query.results.item : null;
            addContent(tab, results);
        });
    };

    function addContent(tab, results) {
            content = errorMsg;

        if (results) {
            content = '<ul>';

            Y.each(results, function(fields, item) {
                content += Y.substitute(resultTemplate, fields);
            });

            content += '</ul>';
        }

        tab.set('content', content);
    };

    Y.each(feeds, function(feed, label) {
        tabview.add({
            label: label
        });

        var tab = tabview.item(tabview.size() - 1);

        getContent(tab);
    });

    tabview.render('#demo');
});
</script>