0

I want the dijit splitter to minimize when user click it and go back to its position when clicked again (I don't care for the draggable feature)

how do I do it ?

In this example I want the panel on the right to minimize when click on the splitter

http://77.235.53.170/split/split.htm
Cœur
  • 37,241
  • 25
  • 195
  • 267
Alophind
  • 842
  • 2
  • 12
  • 27

1 Answers1

1

You can try use dojox.layout.ExpandoPane at your left pane.

var bc = new BorderContainer({
    splitter:true, 
    gutters:false
}, containerDiv);

new ExpandoPane({
    region:"left",
    title: "Expandable pane",
    className: yourClassName
}).placeAt(bc);

EDIT: update based on request:

  1. put this in your head:

    <link href="js/dojox/layout/resources/ExpandoPane.css" rel="stylesheet" type="text/css" />

  2. change you pane like this:

    <div id="leftCol" class="edgePanel" title="Left Expando" data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="title:'Left Expando', region: 'leading', splitter: true" style="width: 250px;">
    <div data-dojo-type="dijit/layout/TabContainer" style="width: 400px; height: 95%;"
        tabstrip="true">
        <div data-dojo-type="dijit/layout/ContentPane" title="Layers" selected="true">
            <div id="CheckboxTree">
            </div>
        </div>                
    </div>
</div>
Sean Zhao
  • 1,506
  • 12
  • 12
  • It doesn't work so good on my test. Also , clicking on the splitter doesn't auto resize... – Alophind Sep 30 '13 at 17:15
  • What do you mean "clicking on the splitter doesn't auto resize.", you can drag it to auto resize. And minimize it by click top-right icon. – Sean Zhao Sep 30 '13 at 17:43
  • I've added updated URL with the current code I use. Can you explain a little bit detailed what to do ? because I didn't understand. Thank you !!! – Alophind Sep 30 '13 at 18:22
  • Thank you , its working now. Why do you prefer using programmatic code vs declarative code? – Alophind Oct 01 '13 at 22:38
  • Also , How can I change the animation direction of the collapse? My site is dir=rtl but animation is still ltr – Alophind Oct 02 '13 at 03:54
  • 1
    I like programmatic code vs declarative code because I can full control everything and the performance is better. I don't need switch between html and javascript back and forth all the time. Regard to your dir=rtl issue, I didn't use it before. But can you try use "right/left" instead of "leading"? – Sean Zhao Oct 02 '13 at 04:32
  • changing to right solved the animation (the button also moved ,but its easy to fix). I'll have more dojo questions soon , Thx A lot ! :-) – Alophind Oct 02 '13 at 07:12