使用 javascript 展开/折叠 zk 面板

Question

我想点击 ZK 的 borderlayout（可折叠的“东”或“北”或...）以使用 javascript 暂时打开它。 我应该怎么办？

预先感谢朋友。

更新：

关闭时，通过单击关闭的边框区域（而不是在打开的图标上）（查看光标的图中位置） 将暂时开放。我想要一个封闭的 borderLayout 并使用 javascript/jquery 打开它。

图片：

Answer 1

1.从ZK客户端引擎获取widget。

2.调用 setOpen(true) 或 setOpen(false)

这是一个示例，您也可以在 ZK fiddle 平台上测试它。

http://zkfiddle.org/sample/bk3jop/1 -通过-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>

Answer 2

为了您的目的，我在这里提供另一个例子。
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);        
    },