open a popup on a specific position

answered 2014-02-14 03:48:27 +0800

benbai
2228 ● 6
http://www.zkoss.org

top and left are attributes specified by user to adjust the position of toolbarbutton, e.g.

<toolbarbutton left="25px" label="button" id="btn" />

You can use position mechanism to position a popup, please refer to our demo:

ZK Popup Position

You can also listen to onClientInfo event to reposition popup while browser window resize, and override js method to add some custom offset, please refer to the sample below:

test.zul

<zk xmlns:w="client">
    <style>
        .pos-class {
            margin-left: 50px;
            margin-top: 50px;
        }
    </style>
    <window id="win" title="toolbar demo" border="normal" width="300px"
        mode="overlapped" position="center"
        apply="test.TestComposer">
        <toolbar>
            <toolbarbutton left="25px" label="button" id="btn" />
        </toolbar>
        <popup id="pp">
            <!-- mix position with custom offset override open and afterOpenAnima_ -->
            <attribute w:name="open"><![CDATA[
                function (ref, offset, position, opts) {
                    jq(this.$n()).removeClass('pos-class');
                    this.$open(ref, offset, position, opts);
                }
            ]]></attribute>
            <attribute w:name="afterOpenAnima_"><![CDATA[
                function (ref, offset, position, opts) {
                    this.$afterOpenAnima_(ref, offset, position, opts);
                    var wgt = this;
                    setTimeout(function () {
                        zk.log('after open');
                        jq(wgt.$n()).addClass('pos-class');
                    }, 50);
                }
            ]]></attribute>
            content
        </popup>
    </window>
</zk>

TestComposer.java

package test;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.OpenEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Popup;
import org.zkoss.zul.Toolbarbutton;

public class TestComposer extends SelectorComposer {
    @Wire
    Toolbarbutton btn;
    @Wire
    Popup pp;

    boolean _open;
    @Listen ("onClick = #btn")
    public void openPopup (Event event) {
        _open = true;
        pp.open(btn, "end_before");
    }
    // update Popup position by listening onClientInfo and reopen Popup
    @Listen ("onClientInfo = #win")
    public void reopenPopup (Event event) {
        if (_open) {
            pp.close();
            pp.open(btn, "end_before");
            System.out.println("onClientInfo");
        }
    }
    // keep open status by listen to onOpen event of Popup
    @Listen ("onOpen = #pp")
    public void onPopupOpen (OpenEvent event) {
        _open = event.isOpen();
    }
}

answered 2014-02-14 10:20:47 +0800

MVarun
268 ● 1 ● 6

Hi,

Here is some more Reference..

Greetings..

M Varun.