Hersha
3 Dec 2006, 9:18 PM
Hi,
I've been trying to put a tab panel inside a BasicDialog box without using the autotab option and I'm having some issues. I need to do it this way because i need to dynamically load content into the box and i don't think its possible to do with autotab. I tried just embedding a tab div inside a dialog div but it isn't working for some reason. (The dialog box will appear but the tabs wont appear in the box.)
I'm pretty new to JS so i may be doing something really obvious wrong. Any help is much appreciated.
Here's my test code.
<!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=iso-8859-1">
<title>Hello World Dialog Example</title>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
<script type="text/javascript" src="yui-ext.0.33-rc3/yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/resizable.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/tabs.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/basic-dialog.css" />
<script language="javascript">
// create the HelloWorld application (single instance)
var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn;
var toggleTheme = function(){
getEl(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = getEl('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this, true);
getEl('theme-btn').on('click', toggleTheme);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
//modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);
YAHOO.ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);
</script>
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/examples/examples.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/examples/tabs/tabs-example.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/grid.css"/>
<script language="javascript" src="yui-ext.0.33-rc3/examples/grid/PropsGrid.js"></script>
</head>
<body>
<input type="button" id="show-dialog-btn" value="Hello World" />
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div id="tabs1">
<div id="script" class="tab-content">
Here's my script:
<pre>
var tabs = new YAHOO.ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');</pre>
</div>
<div id="markup" class="tab-content">
<pre>
<div id="tabs1">
<div id="script" class="tab-content">
(Content goes here)
</div>
<div id="markup" class="tab-content">
(Content goes here)
</div>
</div></pre>
</div>
</div>
</div>
</body>
</html>
Thanks,
Hersha
I've been trying to put a tab panel inside a BasicDialog box without using the autotab option and I'm having some issues. I need to do it this way because i need to dynamically load content into the box and i don't think its possible to do with autotab. I tried just embedding a tab div inside a dialog div but it isn't working for some reason. (The dialog box will appear but the tabs wont appear in the box.)
I'm pretty new to JS so i may be doing something really obvious wrong. Any help is much appreciated.
Here's my test code.
<!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=iso-8859-1">
<title>Hello World Dialog Example</title>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
<script type="text/javascript" src="yui-ext.0.33-rc3/yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/resizable.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/tabs.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/basic-dialog.css" />
<script language="javascript">
// create the HelloWorld application (single instance)
var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn;
var toggleTheme = function(){
getEl(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = getEl('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this, true);
getEl('theme-btn').on('click', toggleTheme);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
//modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);
YAHOO.ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);
</script>
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/examples/examples.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/examples/tabs/tabs-example.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc3/resources/css/grid.css"/>
<script language="javascript" src="yui-ext.0.33-rc3/examples/grid/PropsGrid.js"></script>
</head>
<body>
<input type="button" id="show-dialog-btn" value="Hello World" />
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div id="tabs1">
<div id="script" class="tab-content">
Here's my script:
<pre>
var tabs = new YAHOO.ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');</pre>
</div>
<div id="markup" class="tab-content">
<pre>
<div id="tabs1">
<div id="script" class="tab-content">
(Content goes here)
</div>
<div id="markup" class="tab-content">
(Content goes here)
</div>
</div></pre>
</div>
</div>
</div>
</body>
</html>
Thanks,
Hersha