rahulmca1@gmail.com
21 Feb 2007, 1:17 AM
Hi,
Can the collapsible button for a north region of innerLayout be added to titlebar of main layout's
titlebar.
In the article tab in center region We have two tool bars and does not looks plesent
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
#footer{
background: url(images/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.ylayout-panel-north, .ylayout-panel-south, #content .ylayout-panel-center{
border:0px none;
}
#content .ylayout-panel-south{
border-top:1px solid #aca899;
}
#content .ylayout-panel-center{
border-bottom:1px solid #aca899;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
titlebar: true,
autoScroll: false
}
});
layout.beginUpdate();
layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
var innerLayout = new YAHOO.ext.BorderLayout('content', {
center: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true
},
north: {
autoScroll:true,
initialSize: 150,
collapsible:true,
titlebar: true
}
});
innerLayout.add('center', new YAHOO.ext.ContentPanel('inner1', "More Information"));
innerLayout.add('north', new YAHOO.ext.ContentPanel('inner2'));
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout,{title: 'Article'}));
centerTab = new YAHOO.ext.ContentPanel('centerTab', {title: 'Navigation', fitToFrame:true, closable:false})
layout.add('center',centerTab);
layout.endUpdate();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body class="ytheme-gray">
<div id ="container">
<div id="nav" class="ylayout-inactive-content">
<ul>
/blog/images/icons/yahoo.gifYahoo! UI Library (http://developer.yahoo.com/yui/)
/blog/images/icons/ajaxian.gifAjaxian.com (http://www.ajaxian.com/)
[/list]
</div>
<div id="centerTab"></div>
<div id="content" class="ylayout-inactive-content"></div>
<div id="inner1" class="ylayout-inactive-content">
Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="inner2" class="ylayout-inactive-content">
Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
</div>
</div>
I cannot remove titlebar of center region of layout as it is also required in Navigation tab.
Only sol. I can find is to show and hide titlebar depending upon which tab is cliced.
[/img][/url]
Can the collapsible button for a north region of innerLayout be added to titlebar of main layout's
titlebar.
In the article tab in center region We have two tool bars and does not looks plesent
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
#footer{
background: url(images/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.ylayout-panel-north, .ylayout-panel-south, #content .ylayout-panel-center{
border:0px none;
}
#content .ylayout-panel-south{
border-top:1px solid #aca899;
}
#content .ylayout-panel-center{
border-bottom:1px solid #aca899;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
titlebar: true,
autoScroll: false
}
});
layout.beginUpdate();
layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
var innerLayout = new YAHOO.ext.BorderLayout('content', {
center: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true
},
north: {
autoScroll:true,
initialSize: 150,
collapsible:true,
titlebar: true
}
});
innerLayout.add('center', new YAHOO.ext.ContentPanel('inner1', "More Information"));
innerLayout.add('north', new YAHOO.ext.ContentPanel('inner2'));
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout,{title: 'Article'}));
centerTab = new YAHOO.ext.ContentPanel('centerTab', {title: 'Navigation', fitToFrame:true, closable:false})
layout.add('center',centerTab);
layout.endUpdate();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body class="ytheme-gray">
<div id ="container">
<div id="nav" class="ylayout-inactive-content">
<ul>
/blog/images/icons/yahoo.gifYahoo! UI Library (http://developer.yahoo.com/yui/)
/blog/images/icons/ajaxian.gifAjaxian.com (http://www.ajaxian.com/)
[/list]
</div>
<div id="centerTab"></div>
<div id="content" class="ylayout-inactive-content"></div>
<div id="inner1" class="ylayout-inactive-content">
Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="inner2" class="ylayout-inactive-content">
Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
</div>
</div>
I cannot remove titlebar of center region of layout as it is also required in Navigation tab.
Only sol. I can find is to show and hide titlebar depending upon which tab is cliced.
[/img][/url]