Amin Sh
Amin Sh

Reputation: 2814

expand/collapse zk panel with javascript

I wanna click on a ZK's borderlayout(collapsible "East" OR "North" OR...) to open it temporarily with javascript. what should I do?

thanks in advance buddies.

UPDATE:

When it is closed, by clicking on the closed border area(not on the Open ICON) (Look at the cursor's position in the picture) it will be open temporarily. I want a closed borderLayout and open it like that, with javascript/jquery.

the picture: enter image description here

Upvotes: 2

Views: 3458

Answers (2)

TonyQ
TonyQ

Reputation: 667

For your purpose ,here I provide another example for this. http://zkfiddle.org/sample/bk3jop/2-Close-border-layout-panel-by-javascript

<script>
    function openNorth(){
      var widget = zk.Widget.$("$mynorth"); //Using the pattern for $ + ID to select a ZK widget. 

       if(!widget.isOpen()){
         try{
           widget.doClick_({
             domTarget:widget.$n('colled')  
           });
         }catch(e){ //ignore unhandled exception.
         }
       }

    }    
  </script>         

Anyway , it's more like a hack.

For more details you could reference to https://github.com/zkoss/zk/blob/master/zul/src/archive/web/js/zul/layout/LayoutRegion.js

doClick_: function (evt) {
        var target = evt.domTarget;
        switch (target) {
        case this.$n('btn'):
        case this.$n('btned'):
        case this.$n('splitbtn'):
            if (this._isSlide || zk.animating()) return;
            if (this.$n('btned') == target) {
                var s = this.$n('real').style;
                s.visibility = "hidden";
                s.display = "";
                this._syncSize(true);
                s.visibility = "";
                s.display = "none";
            }
            this.setOpen(!this._open);
            break;
        case this.$n('colled'):                 
            if (this._isSlide) return;
            this._isSlide = true;
            var real = this.$n('real'),
                s = real.style;
            s.visibility = "hidden";
            s.display = "";
            this._syncSize();
            this._original = [s.left, s.top];
            this._alignTo();
            s.zIndex = 100;

            if (this.$n('btn'))
                this.$n('btn').style.display = "none"; 
            s.visibility = "";
            s.display = "none";
            zk(real).slideDown(this, {
                anchor: this.sanchor,
                afterAnima: this.$class.afterSlideDown
            });
            break;
        }
        this.$supers('doClick_', arguments);        
    },

Upvotes: 1

TonyQ
TonyQ

Reputation: 667

1.Get the widget from ZK client engine.

2.call setOpen(true) or setOpen(false)

Here's a sample for this, and also you could test it on ZK fiddle platform.

http://zkfiddle.org/sample/bk3jop/1-Close-border-layout-panel-by-javascript

<zk xmlns:w="client">

  <script>
    function closeNorth(){
      var widget = zk.Widget.$("$mynorth"); //Using the pattern for $ + ID to select a ZK widget. 
      widget.setOpen(false);

    }
    function openNorth(){
      var widget = zk.Widget.$("$mynorth"); //Using the pattern for $ + ID to select a ZK widget. 
      widget.setOpen(true);

    }    
  </script>
  <button label="click me to close it" w:onClick="closeNorth();" />          
  <button label="click me to open it" w:onClick="openNorth();"  />    

  <borderlayout >
    <north id="mynorth" title="North" maxsize="300" size="50%" splittable="true" collapsible="true">
          <div>
           Test .... <textbox />
          </div>
    </north>
  </borderlayout>

</zk>

Upvotes: 2

Related Questions