Created
September 17, 2010 09:53
-
-
Save ehirsch/583999 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
| <title>Dynamic TabView from JavaScript</title> | |
| <style type="text/css"> | |
| /*margin and padding on body element | |
| can introduce errors in determining | |
| element position and are not recommended; | |
| we turn them off as a foundation for YUI | |
| CSS treatments. */ | |
| body { | |
| margin:0; | |
| padding:0; | |
| } | |
| </style> | |
| <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" /> | |
| <script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script> | |
| <!--begin custom header content for this example--> | |
| <!--end custom header content for this example--> | |
| </head> | |
| <body class="yui3-skin-sam yui-skin-sam"> | |
| <h1>Dynamic TabView from JavaScript</h1> | |
| <div class="exampleIntro"> | |
| This example shows how to create a <code>TabView</code> widget dynamically and insert it into the page. | |
| </div> | |
| <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> | |
| <div id="demo"> | |
| </div> | |
| <script type="text/javascript"> | |
| YUI().use("yui", "tabview", function(Y) { | |
| var tabview = new Y.TabView({ | |
| children: [{ | |
| label: 'foo', | |
| content: '<p>foo content</p>' | |
| }, { | |
| label: 'bar', | |
| content: '<p>bar content</p>', | |
| disabled: true | |
| }, { | |
| label: 'baz', | |
| content: '<p>baz content</p>', | |
| disabled: true | |
| }] | |
| }); | |
| tabview.render('#demo'); | |
| //tabview.selectChild(2); | |
| }); | |
| </script> | |
| <!--END SOURCE CODE FOR EXAMPLE =============================== --> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| tabView.on('tab:click', function(e) { | |
| if( e.target.get('disabled')) { | |
| e.preventDefault(); | |
| e.domEvent.preventDefault(); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _onActivate: function(e) { | |
| if (e.target === this ) { | |
| // Prevent the browser from navigating to the URL specified by the | |
| // anchor's href attribute. | |
| e.domEvent.preventDefault(); | |
| // ehirsch 2010-09-17: | |
| // only select this tab if it is not disabled. | |
| if( !this.get('disabled') ) { | |
| e.target.set('selected', 1); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment