Login Effect
Source :
1. Buat Javascript : filescript.js
function loginSucess(wleft, wtop) {
var w = jq('$loginWin'), b = jq('$initBtn');
//Minimize from the login Window
jq('
').appendTo("body").css({
left : wleft,
top : wtop,
width : w.width(),
height : w.height()
});
//Minimize to the init Button
p = b.offset();
jq('.minimize').animate({
left : p.left + b.width() / 2,
top : p.top + b.height() / 2,
width : 0,
height : 0
}, function() {
jq(this).remove();
});
}
function loginFaild() { //Shake the window
var l = jq("$loginWin").position().left;
jq("$loginWin").animate({
left : l - 25
}, 50).animate({
backgroundColor : "red"
}, 50).animate({
left : l
}, 50).animate({
left : l + 25
}, 50).animate({
left : l
}, 50).animate({
backgroundColor : "white"
}, 50);
jq("$loginWin").css('background-color','transparent');
}
2. Buat File : index.zul
<zk xmlns="http://www.zkoss.org/2005/zul">
<vlayout xmlns:c="client">
<button id="initBtn" label="Login">
<attribute name="onClick"><![CDATA[
if (!loginWin.isVisible())
loginWin.setVisible(true);
loginWin.doHighlighted();
]]></attribute>
</button>
<window id="loginWin" title="Login with zk/zk" width="300px" visible="false" minimizable="true" onOK="loginCheck()" border='normal'>
<attribute name="onMinimize"><![CDATA[
if (self.isMinimized())
Clients.evalJavaScript("loginSucess(" + event.getLeft().replace("px","") + "," + event.getTop().replace("px","") + ")");
]]></attribute>
<style>
div.minimize {
border: 1px solid #79858E;
background: #D3E1EC;
position: absolute;
opacity: 0.8;
}
div.loginGrid {
border: none;
}
td.loginCtl {
text-align: center;
}
td.loginCtl .z-label {
color: red;
font-style: italic;
}
</style>
<grid sclass="loginGrid">
<columns>
<column width="100px" />
</columns>
<rows>
<row>User Name : <textbox id="name" value="zk" c:onFocus="this.select()" /></row>
<row>Password : <textbox id="pwd" type="password" c:onFocus="this.select()"/></row>
<row><cell sclass="loginCtl" colspan="2"><vlayout>
<button label="Submit" onClick="loginCheck()" width="100px"/>
<label id="mesg" />
</vlayout></cell></row>
</rows>
</grid>
<zscript><![CDATA[
void loginCheck () {
if ((name.getValue().equals("zk") && pwd.getValue().equals("zk"))) {
mesg.setValue("");
Clients.evalJavaScript("zk.Widget.$('$loginWin').setMinimized(true)");
initBtn.getParent().appendChild(new Label("Login Success !! Welcome to ZK Demo!"));
} else {
mesg.setValue("User Name or Password Invalid!");
Clients.evalJavaScript("loginFaild()");
};
}
]]></zscript>
</window>
<script type="text/javascript" src="/widgets/effects/login_effect/jquery-ui-1.8.6.custom.min.js" />
<script type="text/javascript" src="js/customized_effect.js" />
</vlayout>
</zk>
Hasil :
