使用javascript展開/摺疊zk面板

Question

我想單擊ZK的borderlayout（可摺疊「East」或「North」或...）以使用javascript臨時打開它。 我該怎麼辦？

提前感謝好友。

UPDATE：

當它是封閉的，通過點擊關閉邊境區（不打開ICON）（看畫面中的光標的位置）這將是暫時打開。我想要一個封閉的borderLayout並用javascript/jquery打開它。

圖片：

Answer 1

你的目的，在這裏我提供了另外一個例子。 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>   

無論如何，它更像是一個黑客。

有關詳細信息，你可以參考 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);   
    }, 

Answer 2

1.Get從ZK客戶端引擎的部件。

2.call就是setOpen（true）還是就是setOpen（假）

下面是這個樣本，也你可以測試它ZK小提琴平臺。

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>