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. bash帮助文档简单学习；bash手册翻译

    关于bash的四种工作方式的不同,可以参考:http://feihu.me/blog/2014/env-problem-when-ssh-executing-command-on-remote/,但是 ...

  2. FreeBSD 8

    FreeBSD 8.0的安装过程和7.2区别不大.先在FreeBSD官方网站上下载安装镜像,我一般都下载DVD的ISO,也有人爱好下最小的安装包,然后通过FTP或HTTP方式从网上下载各个程序包. 这 ...

  3. 【Nginx】开发一个HTTP过滤模块

    与HTTP处理模块不同.HTTP过滤模块的工作是对发送给用户的HTTP响应做一些加工. server返回的一个响应能够被随意多个HTTP过滤模块以流水线的方式依次处理.HTTP响应分为头部和包体,ng ...

  4. 翻翻git之---有用的欢迎页开源库 AppIntro

    转载请注明出处:王亟亟的大牛之路 今天没有P1.直接进入正题 今天上的是一个帅帅的app滑动介绍页 . 为什么说帅? 作者对自己的内容是这么定义的 Make a cool intro for your ...

  5. Odoo MRP 实际成本

    Odoo MRP 8 对于 产成品并不支持 实际成本记账 本人开发了一个模块,支持此特性, 可以在 淘宝店铺 购买 https://item.taobao.com/item.htm?_u=85jr9d ...

  6. ListView 自己定义BaseAdapter实现单选打勾（无漏洞）

    (假设须要完整demo,请评论留下邮箱) (眼下源代码已经不发送.假设须要源代码,加qq316701116.不喜勿扰) 近期由于一个项目的原因须要自己定义一个BaseAdapter实现ListVIew ...

  7. 高速创建和mysql表相应的java domain实体类

    今天创建了一个表有十几个字段,创建完之后必定要写一个与之相应的java domain实体类. 这不是反复的工作吗?为什么不先把这个表的全部的字段查出来,然后放到linux环境下,用sed工具在每一行的 ...

  8. Cocos2d-x移植安卓的笔记

    一.下载所需软件 Java SDK   http://www.oracle.com/technetwork/java/javase/downloads/index.html  Windows x64 ...

  9. 显示和隐藏Mac隐藏文件的命令

    显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏Mac隐藏文件的命令:defaults writ ...

  10. 命令+mybatis-generator插件自己主动生成Mapper映射文件

    学mybatis的时候,自己写各种 *Mapper.xml和 *Mapper.java,注意各种sql语句中的 id 是否匹配.xml中的namespace是否正确,非常麻烦有木有?今天博客内容就是高 ...