Login Register

TitlePane

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>
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.

ActionKey
toggle open/close of the title paneenter or space key with focus on the title pane title
Navigate into an opened title panetab

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.

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

this should be 220px wide.

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:

dojo.connect(dijit.byId('myTP'),"toggle",myFunction);

function myFunction() {
  alert('pane toggled');
}

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

tag that floats left.

Anyways, in another

tag, I have a banner that I want to travel the width of the page. However, no matter what I do position-wise, this banner seems to scroll up and down when I open/close the TitlePane widgets? Note that I tried to make this banner "fixed" using the CSS attribute position:fixed. The problem arises in that on another page that uses this same layout, there are more entries on the page and the banner winds up going across the information, rather than staying on the bottom of the page (due to its position being fixed). I have also tried playing with relative positioning as well.

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