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();

HTML layout高仿QQ GUI的更多相关文章

  1. 史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  2. Android实现高仿QQ附近的人搜索展示

    本文主要实现了高仿QQ附近的人搜索展示,用到了自定义控件的方法 最终效果如下 1.下面展示列表我们可以使用ViewPager来实现(当然如果你不觉得麻烦,你也可以用HorizontalScrollVi ...

  3. Android 高仿QQ滑动弹出菜单标记已读、未读消息

    在上一篇博客<Android 高仿微信(QQ)滑动弹出编辑.删除菜单效果,增加下拉刷新功能>里,已经带着大家学习如何使用SwipeMenuListView这一开源库实现滑动列表弹出菜单,接 ...

  4. 高仿QQ的即时通讯应用带服务端软件安装

    Android 基于xmpp协议,smack包,openfire服务端(在下面)的高仿QQ的即时通讯实现.实现了注册,登录,读取好友列表,搜索好友,添加分组,添加好友,删除好友,修改心情,两个客户端之 ...

  5. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  6. 高仿QQ即时聊天软件开发系列之二登录窗口界面

    继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...

  7. 高仿QQ即时聊天软件开发系列之一开端

    前段时间在园子里看到一个大神做了一个GG2014IM软件,仿QQ的,那感觉···,赶快下载源码过来试试,还真能直接跑起来,效果也不错.但一看源码,全都给封装到了ESFramework里面了,音视频那部 ...

  8. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

  9. WPF ”真正的“高仿QQ

    时常可以在各种论坛 博客 看到 各种所谓的 高仿QQ. 说实话 越看越想笑呢.(PS:纯粹的 抨击 那些 不追求 UI 完美主义者) 例如:       本次模仿 采用 C# WPF XAML , 总 ...

随机推荐

  1. spring beans 接口

  2. shell-异步执行

    一.启动后台子任务 在执行命令后加&操作符,表示将命令放在子shell中异步执行.可以达到多线程效果.如下, sleep 10 #等待10秒,再继续下一操作 sleep 10 & #当 ...

  3. MySQL 服务无法启动-问题处理

    症状:前一天在MySQL中删除了几个不用的数据库后登陆MySQL出现以下错误:   mysql -u root -p passwd   ERROR 2002 (HY000): Can't connec ...

  4. 【springcloud】使用@FEIGNCLIENT时，报JAVA.LANG.NOCLASSDEFFOUNDERROR: FEIGN/FEIGN$BUILDER错

    引用地址:http://www.cnblogs.com/ellacan/p/8822374.html 错误信息: Caused by: java.lang.ClassNotFoundException ...

  5. [反汇编练习] 160个CrackMe之037

    [反汇编练习] 160个CrackMe之037. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  6. 百科知识 DCR文件如何打开

    使用IE可以打开,但是需要先安装Adobe Shockwave Player 天空软件下载地址:http://fpdownload.macromedia.com/get/shockwave/defau ...

  7. 最好的10个移动 Web 应用程序开发框架

    在近期几年里,移动互联网快速发展.市场潜力巨大. 继计算机.互联网之后,移动互联网正掀起第三次信息技术革命的浪潮,新技术.新应用不断涌现.今天这篇文章向大家推荐10大优秀的移动Web开发框架.帮助开发 ...

  8. CrtmpServer getApplication注册流程

    最近在研究 CrtmpServer getApplication注册流程,以备查阅 图1. 加载动态库流程 图2配置application流程

  9. Android多线程下载大文件解析

    1.多线程介绍 用过迅雷的同学都知道.迅雷有个功能叫做多线程.另一个叫离线下载,我们这里重点介绍一下多线程下载.多线程,顾名思义就是非常多歌线程同一时候在执行,为什么要提出多线程这个概念呢?由于有时候 ...

  10. CentOSyum操作

    查看已经安装yum: yum list installed|grep mysql 查看yum: yum list|grep mysql 更新yum: rpm -ivh mysql-community- ...