Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: TabView Control: Getting Content from an External Source

# TabView Control: Getting Content from an External Source

This demonstrates how to load Tab content from an external data source.

View example in new window.

## Browser News

## Loading TabView from an External Data Source

The YUI TabView provides a built-in way to load external data.

Because our content depends on JavaScript, in this case we will build our TabView entirely from script. First create a container to insert our new TabView into. This can be any existing element on the page, including the `<body>`, but for this example, we will create a `<div>` called `container`:

<div id="container"><h2>Browser News</h2></div>

Next we will create a TabView instance, omitting the `element` argument, which signals the constructor to create the TabView container:

var tabView = new YAHOO.widget.TabView();

Next we add tabs to our TabView, including the label and a `dataSrc`pointing to the content, setting the default selected tab to "active". To minimize the number of requests, we will set each `cacheData` for each Tab.

tabView.addTab( new YAHOO.widget.Tab({ label: 'Opera', dataSrc: 'assets//news.php?&query=opera+browser', cacheData: true, active: true })); tabView.addTab( new YAHOO.widget.Tab({ label: 'Firefox', dataSrc: 'assets//news.php?&query=firefox+browser', cacheData: true })); tabView.addTab( new YAHOO.widget.Tab({ label: 'Explorer', dataSrc: 'assets//news.php?&query=microsoft+explorer+browser', cacheData: true })); tabView.addTab( new YAHOO.widget.Tab({ label: 'Safari', dataSrc: 'assets//news.php?&query=apple+safari+browser', cacheData: true }));

All that is left is to append our new TabView to our container:

tabView.appendTo('container');

This is a basic example of how to load content from an external source into a TabView widget.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### TabView Control Examples:

- Build from Markup
- Build from Script
- Adding Tabs
- Removing Tabs
- Getting Content from an External Source
- Skinning TabView
- Editor inside a Tabview Control (included with examples for Rich Text Editor (beta))
- ImageLoader with TabView (included with examples for ImageLoader Utility)
- Complex Application (included with examples for Layout Manager (beta))

### More TabView Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings