Question

我想点击一个ZK的borderlayout（可折叠的“East”或“North”或......），用javascript暂时打开它。我该怎么办？

先谢谢好友。

更新

关闭时，点击关闭边框区域（不在打开 ICON 上）（查看光标在图片中的位置）< / strong>它将暂时开放。我想要一个封闭的borderLayout并使用javascript / jquery打开它。

图片：

Answer 1

1.从ZK客户端引擎获取小部件。

2.call setOpen（true）或setOpen（false）

以下是此示例，您也可以在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>

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);        
    },

使用javascript展开/折叠zk面板

2 个答案: