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. 跟开涛学SpringMVC（4.1）：Controller接口控制器详解（1）

    http://www.importnew.com/19397.html http://blog.csdn.net/u014607184/article/details/52074530 https:/ ...

  2. Android --修改arr文件

    1. 改为zip文件 2. 修改 3. 改后缀

  3. DICOM：DICOM Print 服务详细介绍

      目录(?)[-] 背景 DICOM Print服务数据流 DICOM Print服务各部分关系 DICOM Print服务具体实现   背景: 昨天专栏中发表了一篇关于DICOM Print的博文 ...

  4. source insight的查找功能

    source insight是一款非常好的c语言的程序编辑器.方便对project管理,方便程序的阅读和编辑. 查找功能使用十分频繁.选项较多,与其他软件的查找功能也类似,以下对英文版的查找功能,做简 ...

  5. 混合背包 hdu5410 CRB and His Birthday

    传送门:点击打开链接 题意:你有M块钱,如今有N件商品 第i件商品要Wi块,假设你购买x个这种商品.你将得到Ai*x+Bi个糖果 问能得到的最多的糖果数 思路:很好的一道01背包和全然背包结合的题目 ...

  6. Python--数据类型整理

      数据类型整理-------------------------------------------------------------------------------------------- ...

  7. Linux高端内存

    Linux高端内存是针对物理内存来说的,虚拟内存没有高端这个概念.Linux系统将虚拟内存分为两个部分,即用户地 址空间和内核地址空间,对于32位系统来说,虚拟地址空间为4GB,其中用户空间范围为0- ...

  8. C#实现网段扫描

    目录1.使用的类2.获取本地主机IP地址3.远程查询4.实现网段的扫描 ---------------------------------------------------------------- ...

  9. React_Redux_Router

    一.react_redux 比较好的blog: blog1, blog2, blog3 主要根据前两个blog总结如下: 1. React在组件内部(包括子组件)为单向数据流且自上向下通过props传 ...

  10. WPF触发器(Trigger、DataTrigger、EventTrigger)

    WPF中有种叫做触发器的东西(记住不是数据库的trigger哦).它的主要作用是根据trigger的不同条件来自动更改外观属性,或者执行动画等操作. WPFtrigger的主要类型有:Trigger. ...