HTML layout高仿QQ GUI
浏览数：57 /
时间：2015年06月09日
1. [图片] QQ20130804162049.png
?2. [代码]AAuto 代码
import win.ui;
import web.layout;
/*DSG{{*/
winform = ..win.form( text="好为博客";bottom=278;max=false;right=387;border="none";exmode="toolwindow";parent=...;cls="" )
winform.add( )
/*}}*/
import inet.http;
import web.json;
import win.util.tray;
import web.layout.behavior.windowCommand;
tray = win.util.tray(winform, "/res/iconv.ico", "好为博客");
winform.onClose = function(hwnd, message, wParam, lParam){
tray.delete();
}
/*
panel = ..win.form(topmost=1;
text="好为博客";
bottom=630;
right=100;
top=28;
border="none";
exmode="toolwindow";
parent=...;
cls="");
*/
winform.wndproc = function(hwnd,message,wParam,lParam){
select( message ) {
case( 0x400+9981) {
if( lParam = 0x205){
winform.close();
}
}
}
}
layout = web.layout(winform);
layout.html = /**
<html command="window-caption">
<style type="text/css">
.animate {
assigned!: self.start-animation();
animation-start!: self::margin-left = 20;
animation-end!: self::margin-left = 144;
animation-step!: self::margin-left < 144 ? (
delta = limit( (144 - self::margin-left) * 0.2, 5, 15),
self::margin-left = self::margin-left + delta,
return 5
);
}
.show { display: inline; }
.hidden { display: none; }
input { outline: none; }
p { margin: 0; margin-bottom: 10px; }
span { display: inline-block; margin-right: 20px; }
html {
behavior: windowCommand;
background-image: url(/res/bg.png);
background-position: left top;
background-color: transparent;
margin: 0;
}
.header { width: 100%; height: 120px; background; rgb(255, 255, 255); }
.header .caption { float: right; margin-right: 4px; margin-top:4px;}
.header .caption a {
display: inline-block;
float: left;
width: 26px;
height: 20px;
background: url(/res/cbtn.png) no-repeat;
}
.header .caption a[command="window-setting"]{
background-position: 0px 0px;
}
.header .caption a[command="window-setting"]:hover {
background-position: 0 -30px;
}
.header .caption a[command="window-min"] {
background-position: -26px 0px;
}
.header .caption a[command="window-min"]:hover {
background-position: -26px -60px;
}
.header .caption a[command="window-close"] {
background-position: -52px 0px;
}
.header .caption a[command="window-close"]:hover {
background-position: -52px -90px;
}
.center { width: 100%; height: 110px; }
.center .left { float: left; margin-left: 20px;}
.center .left .avatar { padding: 10px; background: rgb(255, 255, 255); }
.center .left .input {
color: #000;
background-color: #fff;
border: solid 1px #888888;
width: 175px;
padding: 2px 5px;
height: 21px;
font-family: Arial;
font-size:13px;
}
.center .left span label { color: #fff; font-size:12px; }
.center .left span input[type="checkbox"] {
border: solid 1px #333;
width: 12px;
height: 12px;
margin-right: 5px;
}
.footer button {
display: inline-block;
margin: 0 auto;
display: block;
width: 149px;
height: 40px;
background: url(‘/res/button.png‘) no-repeat center top;
click!:
$1(div[type=‘avatar‘]).class = "left animate",
$1(div[type=‘sign‘]).class = "left hidden";
}
.footer button:active { background: url(‘/res/button.png‘) no-repeat center -45px; }
</style>
<div class="header">
<div class="caption">
<a command="window-setting"></a>
<a command="window-min"></a>
<a command="window-close"></a>
</div>
</div>
<div class="center">
<div type="avatar" class="left">
<div class="avatar"><img src="/res/default.png" /></div>
</div>http://www.bizhizu.cn/shouhui/?
<div type="sign" class="left">
<p><input id="user" class="input" type="text" novalue="帐号" /></p>
<p><input id="password" class="input" type="password" novalue="密码"/></p>
<p class="cookie-bar">手绘图片
<span><input type="checkbox" name="cookie[remeber]" value="1" /><label>记住密码</label></span>
<span><input type="checkbox" name="cookie[login]" value="1"/><label>自动登录</label></span>
</p>
</div>
</div>
<div class="footer">
<button id="button"></button>
</div>
</html>
**/
winform.transparent(true);
winform.show();
win.loopMessage();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
