Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
..neata :)
here is a simple code to expand a bar located at the bottom of the page. couldn't find anything usable online, so here you have it. hope it will be useful.
it does have however a bug which needs fixing :( i would suggest using z-index. the footer expands under the center (the center overlaps the expansion of the footer)
have fun with it
iulia
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<style>
* { margin: 0; padding: 0; }
.wrapper { width: 955px; height: 749px; position: absolute;
left: 50%; top: 50%; margin-left: -480px; margin-top: -375px;
z-index: 0; }
.label12-white.z-label { background: transparent; font-family:
'Lucida Sans Unicode', 'Lucida Grande', sans-serif; color:
#ffffff; font-size: 12px; }
.label22-white.z-label { background: transparent; font-family:
'Lucida Sans Unicode', 'Lucida Grande', sans-serif; color:
#ffffff; font-size: 22px; } .footer { position: relative; top:
640; left: 0; background: #008ade; opacity: 0; width: 636px;
height: 640px; }
</style>
<script type="text/javascript">
function expand_footer(widget) {
var $w = jq('$' + widget);
$w.animate({
width : "636px",
height : "640px",
left : 0,
top : 0,
opacity : 1
}, 400);
}
function contract_footer(widget) {
var $w = jq('$' + widget);
$w.animate({
width : "636px",
height : "640px",
left : 0,
top : 667,
opacity : 1
}, 400);
}
</script>
<zscript>
import org.zkoss.zk.ui.util.Clients;
boolean open = false;
void onClick$footer_bar(Separator footer_info_separator) {
String jsCommand;
if (open)
jsCommand = "contract_footer(\"footer_info\")";
else
jsCommand = "expand_footer(\"footer_info\")";
System.out.println(jsCommand);
Clients.evalJavaScript(jsCommand);
open = !open;
footer_info_separator.setVisible(open);
System.out.println("footer " + open);
}
</zscript>
<script src="/scripts/global.js" ></script>
<div sclass="wrapper">
<hbox>
<vbox>
<borderlayout width="636px" height="749px">
<north height="80px" border="none">
<div width="636px" height="80px"
style="background:#008ade" align="center">
<label value="Title" sclass="label22-white" ></label>
</div>
</north>
<center border="0"
style="padding-top: 2px; background:red">
<include id="main_container" ></include>
</center>
<south border="none" maxsize="667"
style="background:yellow;padding-top: 2px;">
<div>
<div>
<div id="footer_info" align="center"
sclass="footer">
</div>
</div>
<separator id="footer_info_separator"
height="2px" visible="false" ></separator>
<div id="footer_bar" height="25px"
style="background:#008ade" align="center"
onClick="onClick$footer_bar(footer_info_separator)">
<label value="Footer"
sclass="label12-white" ></label>
</div>
</div>
</south>
</borderlayout>
</vbox>
</hbox>
</div>
</zk>
..neata :p
solved! could not find a solution with borderlayout and z-index. so here you have a solution for expanding a "south" div.
if someone finds a solution for the borderlayout, please post it :)
hope you will enjoy it!
iulia
<?page id="testing" title="Bayoda Client"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?link rel="stylesheet" type="text/css" href="/css/default.css"?>
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<style>
* { margin: 0; padding: 0; }
.wrapper { width: 636px; height: 749px; position: absolute;
left: 50%; top: 50%; margin-left: -370px; margin-top: -375px;
z-index: 0; }
.label12-white.z-label { background: transparent; font-family:
'Lucida Sans Unicode', 'Lucida Grande', sans-serif; color:
#ffffff; font-size: 12px; }
.label22-white.z-label { background: transparent; font-family:
'Lucida Sans Unicode', 'Lucida Grande', sans-serif; color:
#ffffff; font-size: 22px; }
.bar{ position: absolute; top: 724; left: 0;
background:#008ade;}
.footer { position: absolute; top: 25; left: 0; background:
black; opacity: 0; width: 636px;}
.div1 {position: absolute; left: 0px; top: 82px; z-index: 1; }
.div2 {position: absolute; left: 0px; top: 724px; z-index: 2; }
</style>
<script type="text/javascript">
function expand_footer(widget) { var $w = jq('$' +
widget);
$w.animate({ width : "636px", height : "640px", left : 0, top :
-642, opacity : 1 }, 400);
}
function contract_footer(widget) { var $w = jq('$'
+ widget);
$w.animate({ width : "636px", height : "0px", left : 0, top :
25, opacity : 0 }, 400);
}
</script>
<zscript>
import org.zkoss.zk.ui.util.Clients;
boolean open = false;
void onClick$footer_bar(Include main_container) {
main_container.setSrc("login.zul");
String jsCommand;
if (open)
jsCommand = "contract_footer(\"footer_info\")";
else
jsCommand = "expand_footer(\"footer_info\")";
System.out.println(jsCommand);
Clients.evalJavaScript(jsCommand);
open = !open;
System.out.println("footer " + open);
}
</zscript>
<div id="wrapper" sclass="wrapper" style="background: yellow">
<div width="636px" height="80px" style="background:#008ade"
align="center">
<label value="Title" sclass="label22-white" ></label>
</div>
<separator height="2px" ></separator>
<div width="636px" height="640px" style="background: red;"
sclass="div1">
<include id="main_container" ></include>
</div>
<separator height="2px" ></separator>
<div id="south" sclass="div2">
<div>
<div id="footer_info" align="center" sclass="footer">
</div>
</div>
<div id="footer_bar" height="25px" width="636px"
align="center" sclass="bar"
onClick="onClick$footer_bar(main_container)">
<label value="Footer" sclass="label12-white" ></label>
</div>
</div>
</div>
</zk>
Asked: 2012-02-10 16:37:36 +0800
Seen: 226 times
Last updated: Feb 14 '12