TitlePane
Submitted by criecke on Sun, 05/13/2007 - 12:06.
A TitlePane is a pane with a title on top that can be opened or collapsed. The visibility of the container is toggled by activating an arrow "button" on the title bar via the mouse or keyboard.
Examples

The rain in Spain falls mainly on the New York Stock Exchange.
<!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>TitlePane Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.TitlePane");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.TitlePane" title="A Message from Thurston Howell III">
The rain in Spain falls mainly on the New York Stock Exchange.
</div>
</body></html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TitlePane Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.TitlePane");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.TitlePane" title="A Message from Thurston Howell III">
The rain in Spain falls mainly on the New York Stock Exchange.
</div>
</body></html>
dijit.TitlePane
A pane with a title on top, that can be opened or collapsed.
|
||
Attributes
|
||
duration | Integer 250 |
milliseconds to fade in/fade out |
open | Boolean true |
Whether pane is opened or closed. |
title | String | Title of the pane. Use setTitle() to change after creation time. |
Methods
|
||
setContent(/* String */content) | Typically called when an href is loaded. Our job is to make the animation smooth | |
setTitle(/* String */title) | sets the text of the title | |
toggle() | switches between opened and closed state |
Accessibility (updated for 1.0)
Keyboard
Each title pane title is included in the tab order of the document.
Action | Key |
---|---|
toggle open/close of the title pane | enter or space key with focus on the title pane title |
Navigate into an opened title pane | tab |
Screen Reader Information
The title pane container will have an ARIA labelledby property which points to the id of the title pane title. The title pane title has the ARIA property of haspopup=true to indicate that it controls the display of the pane. The tilte pane container will have an ARIA role of region which will be fully supported in Firefox 3.
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
How i can size the Titlepane in 1.0?
Hi,
i try to set the width with this code:
<div dojoType="dijit.TitlePane" title="test" style="width:100px;">
But this doesn't work in 1.0. How can i set the width now?
Thank you, darkey
hmmm
I got it. <div
I got it.
With the space in the Style Tag it works.
well thats weird. i've
well thats weird. i've noticed too sometimes the presence of the ; after the 100px on the last element in a style="" tag throws things off.
you might experiment with: style="width:100px" style="width: 100px" and style="width:100px;" to see what happens.
i'm curious myself now actually.
Html as Title in Title Pane
Can I have some html code in the title attribute
like
I found it working in FF and not in IE.
Any work around for this.
Remotely Loading -- href
The documentation omits the fact that the content part of the titlepane can be remotely loaded by specifying href url. Those interested see
http://download.dojotoolkit.org/release-1.0.2/dojo-release-1.0.2/dijit/t...
titlepane events
is there any other events working for titlepane than onclick ? i want to do an administration interface with some windows and i want to save user data to the server when i close/open titlepanes.
i tried with onclick on dojo.byId('...').childNodes[1] (titlepane's title), but it's not working properly due to different event triggering from title and arrow. or i just can't see the way to do it.
can some1 pls give me a hint ? thanks in advance, cosmin.
You can probably do
You can probably do something like:
it's exactly what i need,
it's exactly what i need, unfortunately it's not supported (atleast that's my conclusion). i tried with 'toggle', 'ontoggle', 'onopen' and so on, nothing works except 'onclick' which triggers on clicks anywhere inside the pane. i even scanned the source, all i could see is 'onOpen' there.
toggle is in the docs
toggle is in the docs (above), and is in the source:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/TitlePane.js
It is a "method", not an "event", if that is what you were looking for. I tested it in the test_TitlePane.html page, and it worked (unless I goofed in copy/paste into the post above).
dojo.connect can connect to both events and methods/functions.
thanks alot. i knew about
thanks alot.
i knew about the method, but i didn't know about the ability of dojo.connect to connect to methods aswell. i'll try it.
TitlePane containg ContentPane preload='false'
Hi everyone. I'm new to Dojo (and loving it). I'm just having a little problem. I want to delay loading the contents of my content pane by placing it inside a TitlePane and setting preload='false'. E.g.
I expected that the ContentPane href would not be loaded until the TitlePane was opened, but this isn't what happens. I've seen another post where the person coded some javascript to make this work the way I want, but with dozens of instances it would mean a fair bit of additional code. I wondered if this is working as intended or if it's a problem with TitlePane or a problem with ContentPane.
Solved
I solved this problem by using the href attribute on TitlePane. It's not documented but it works.
TitlePane Collapsable=true/false
I think an attribute named Collapsable (Closeble, or something close to this) that define if the object can (can't) be collapsed should be interesting.
(sorry for the bad english). =D
Title panes move lower div content up and down
Hi all,
Using the Dojo 1.1 release and I have been pleased with the look and feel and speed. So far, I see many improvements over Dojo 0.4 (the last release that I tried to use...).
I hope that I can explain my situation clearly. I have incorporated a series of 4 TitlePane widgets, that more or less act as a side-bar menu on one of my web forms. Each widget collapses up and down as advertised and looks really nice. Note that I do not have the 4 TitlePane widgets in a content pane or anything...they are just contained in a regular
Anyways, in another
Maybe this has nothing to do with the TitlePane. I notice on the test TitlePane html page that comes with the release, opening and closing of these panes results in the following widgets moving up and down as well.
Any help out there or do I just need to keep playing with the CSS? I'm running out of ideas....
Thanks,
Evanne