Custom dijit.TitlePane icon?

CraigMcDade · ‎09-07-2012

Is it possible to have a custom image icon in a TitlePane, instead of the generic gray dropdown box?

<div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false" src="basemap.png" style="float:right; margin-right:10px;">
<div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery" >
</div></div>
        </div>

I've tried adding something like src="image.png"

CraigMcDade · ‎12-19-2012

Hi,

I want to insert my image instead of titlepane default image, can i do it by modifying my div tag. I am trying the below code but this is not working for me. Could you please help me in this scenario. I don't want to do it by modifying my css

<div dojoType="dijit/TitlePane" data-dojo-props="title: '<img src=images/6.0/newdropdown.jpg>';region: 'top'" id='feedContainer' style="width:100%;background:green;text-align:center" >

I wound up using dojo.fx to get the look I was going for. A sample from my app is below. Regardless, you'll probably have to tweak the CSS a bit.
JS:

//Toggles
function basemapToggle() {
    toggler = new dojo.fx.Toggler({
        node: "basemaptoggle",
        showFunc: dojo.fx.wipeIn,
        showDuration: 1000,
        hideDuration: 1000,
        hideFunc: dojo.fx.wipeOut
    })
}
dojo.addOnLoad(basemapToggle);

HTML:

<div id="basemapbutton">
     <button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">    
      <img src="images/imgBaseMap.png"/>     
       <script type="dojo/method" event="onClick">   
        toggler[(dojo.style("basemaptoggle","display") == "none") ? 'show':'hide']();
       </script>
     </button>   
      <div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
       <div id="basemapGallery">
       </div>
      </div>
    </div>