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.
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:
| 1 | <div id="container"><h2>Browser News</h2></div> |
| view plain | print | ? |
Next we will create a TabView instance, omitting the element argument, which signals the constructor to create the TabView container:
| 1 | var tabView = new YAHOO.widget.TabView(); |
| view plain | print | ? |
Next we add tabs to our TabView, including the label and a dataSrcpointing to the content, setting the default selected tab to "active". To minimize the number of requests, we will set each cacheData for each Tab.
| 1 | tabView.addTab( new YAHOO.widget.Tab({ |
| 2 | label: 'Opera', |
| 3 | dataSrc: 'assets//news.php?&query=opera+browser', |
| 4 | cacheData: true, |
| 5 | active: true |
| 6 | })); |
| 7 | |
| 8 | tabView.addTab( new YAHOO.widget.Tab({ |
| 9 | label: 'Firefox', |
| 10 | dataSrc: 'assets//news.php?&query=firefox+browser', |
| 11 | cacheData: true |
| 12 | })); |
| 13 | |
| 14 | tabView.addTab( new YAHOO.widget.Tab({ |
| 15 | label: 'Explorer', |
| 16 | dataSrc: 'assets//news.php?&query=microsoft+explorer+browser', |
| 17 | cacheData: true |
| 18 | })); |
| 19 | |
| 20 | tabView.addTab( new YAHOO.widget.Tab({ |
| 21 | label: 'Safari', |
| 22 | dataSrc: 'assets//news.php?&query=apple+safari+browser', |
| 23 | cacheData: true |
| 24 | })); |
| view plain | print | ? |
All that is left is to append our new TabView to our container:
| 1 | tabView.appendTo('container'); |
| view plain | print | ? |
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.
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)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on Sourceforge (external)
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Charts (experimental)
- Color Picker
- Cookie (beta)
- Connection Manager
- Container
- DataTable (beta)
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper (beta)
- ImageLoader
- JSON
- Layout Manager (beta)
- Logger
- Menu
- Profiler (beta)
- ProfilerViewer (beta)
- Resize (beta)
- Rich Text Editor (beta)
- Selector (beta)
- Slider
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader (beta)
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings