Reputation: 2814
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:
Upvotes: 2
Views: 3458
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
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