Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
consider the following
<div id="contentLayer" width="955px" align="center"> <hbox> <vbox> <panel id="p1" width="955px"> </panel> </vbox> <vbox> <panel id="p2" width="955px"> </panel> </vbox> <vbox> <panel id="p3" width="955px"> </panel> </vbox> </hbox> </div>
i want to see just one panel at a time (the focus to be on one panel, and the other ones should not be visible). by the action of a button you could see one panel sliding in and another one sliding out in the same time. the panels are glued together :) like in this example: http://tympanus.net/Tutorials/FancySlidingForm/
how is this possible in zk?
<?page title="Auto Generated index.zul"?>
<window title="Wizard Test" border="normal" width="830px">
<zscript><![CDATA[
int current = 0;
void showOne(int theVisible) {
if (theVisible == current) return;
List items = stackOfPanels.getChildren();
Component c = items.get(current);
String jqCommand = "jq(\"$gb" + current + "\").fadeOut(500)";
Clients.evalJavaScript(jqCommand);
c.setVisible(false);
c = items.get(theVisible);
jqCommand = "jq(\"$gb" + theVisible + "\").fadeIn(500)";
Clients.evalJavaScript(jqCommand);
c.setVisible(true);
current = theVisible;
}
]]></zscript>
<div id="stackOfPanels">
<groupbox id="gb0" mold="3d">
<caption>ONE</caption>
one
</groupbox>
<groupbox id="gb1" mold="3d" visible="false">
<caption>TWO</caption>
two
</groupbox>
<groupbox id="gb2" mold="3d" visible="false">
<caption>THREE</caption>
three
</groupbox>
</div>
<hlayout>
<button label="ONE" onClick="showOne(0)" />
<button label="TWO" onClick="showOne(1)" />
<button label="THREE" onClick="showOne(2)" />
</hlayout>
</window>
Just a fast unfinished prototype that works (+/-).
Giovanni
..ok, this is really good ;)
when you jump from 1 to 3, you wanna also see 2 fading in and fading out. the normal course of events should be when jumping from 1 to 3: fade out 1, fade in 2, fade out 2, fade in 3. with the code below i get exactly the same output as the original code: fade out 1, fade in 3.
thanks for the reply,
iulia
<zscript><![CDATA[
int current = 0;
void showOne(int theVisible) {
if (theVisible == current) return;
List items = slider.getChildren();
Component c = items.get(current);
int _current = current;
while (_current > theVisible) {
String jqCommand = "jq(\"$vbox_" + _current + "\").fadeOut(500)";
Clients.evalJavaScript(jqCommand);
c.setVisible(false);
_current --;
c = items.get(_current);
jqCommand = "jq(\"$vbox_" + Integer.toString(_current) + "\").fadeIn(500)";
Clients.evalJavaScript(jqCommand);
c.setVisible(true);
}
while (_current < theVisible) {
String jqCommand = "jq(\"$vbox_" + _current + "\").fadeOut(500)";
Clients.evalJavaScript(jqCommand);
c.setVisible(false);
_current ++;
c = items.get(_current);
jqCommand = "jq(\"$vbox_" + Integer.toString(_current) + "\").fadeIn(500)";
Clients.evalJavaScript(jqCommand);
c.setVisible(true);
}
current = theVisible;
}
]]></zscript>
..this is the modified function to show fading the middle box too, but it has a catch. why does the visibility of the theVisible is set to true (it is visible) while the middle box is still fading?
void showOne(int theVisible, boolean visibility) {
if (theVisible == current && !visibility) return;
List items = stackOfPanels.getChildren();
Component c = (Component)items.get(current);
String jqCommand;
if (!visibility)
jqCommand = "jq(\"$gb" + current + "\").fadeOut(500)";
else
jqCommand = "jq(\"$gb" + current + "\").fadeIn(500)";
Clients.evalJavaScript(jqCommand);
c.setVisible(visibility);
if (!visibility)
if (current < theVisible)
current ++;
else
current --;
showOne(theVisible, !visibility);
}
it is called with
<button label="ONE" onClick="show(0, false)"/>
creata87, please show the full code. Thanks
Asked: 2011-07-25 07:46:15 +0800
Seen: 581 times
Last updated: Jul 29 '11
