This demonstrates how to dynamically add tabs to a TabView widget.
Tab One Content
Tab Two Content
Tab Three Content
Dynamically adding tabs to a YUI TabView widget is done with the addTab
method.
We will create a <div>
called demo
and include the TabView markup:
1 | <div id="demo" class="yui-navset"> |
2 | <ul class="yui-nav"> |
3 | <li><a href="#tab1"><em>Tab One Label</em></a></li> |
4 | <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li> |
5 | <li><a href="#tab3"><em>Tab Three Label</em></a></li> |
6 | </ul> |
7 | <div class="yui-content"> |
8 | <div id="tab1"><p>Tab One Content</p></div> |
9 | <div id="tab2"><p>Tab Two Content</p></div> |
10 | <div id="tab3"><p>Tab Three Content</p></div> |
11 | </div> |
12 | </div> |
view plain | print | ? |
Next, create an instance of TabView from our demo
element:
1 | <script type="text/javascript"> |
2 | var tabView = new YAHOO.widget.TabView('demo'); |
3 | </script> |
view plain | print | ? |
For this example, a simple prompt will accept the new tab label and content. We will need a function to accept the input, create, and add the new tab:
1 | <script type="text/javascript"> |
2 | var addTab = function() { |
3 | var labelText = window.prompt('enter the tab label'); |
4 | var content = window.prompt('enter the tab content'); |
5 | if (labelText && content) { |
6 | tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) ); |
7 | } |
8 | }; |
9 | |
10 | </script> |
11 | <p>A button will be used to add new tabs. Here we create it, and assign a click listener that calls our addTab function when the button is clicked:</p> |
12 | <textarea name="code" class="JScript" cols="60" rows="1"> |
13 | <script type="text/javascript"> |
14 | var button = document.createElement('button'); |
15 | button.innerHTML = 'add tab'; |
16 | |
17 | YAHOO.util.Event.on(button, 'click', addTab); |
18 | tabView.appendChild(button); |
19 | </script> |
view plain | print | ? |
This is a basic example of the TabView's addTab method.
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
INFO 7ms (+1) 12:29:52 PM:
example
The example has finished loading; as you interact with it, you'll see log messages appearing here.
INFO 6ms (+0) 12:29:52 PM:
Tab
attributes initialized
INFO 6ms (+1) 12:29:52 PM:
Tab
attributes initialized
INFO 5ms (+1) 12:29:52 PM:
Tab
attributes initialized
INFO 4ms (+4) 12:29:52 PM:
TabView
attributes initialized
INFO 0ms (+0) 12:29:52 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings