zoukankan      html  css  js  c++  java
  • HTML layout高仿QQ GUI

    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 { 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; 
        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 { 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;
        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;
        12px;
        height: 12px;
        margin-right: 5px;
    }
    .footer button {
        display: inline-block;
        margin: 0 auto;
        display: block;
        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();
  • 相关阅读:
    标题党的进步:道字大旗不再扯,美为号召又开张
    dwr自动生成的js文件到底在哪里?
    JavaScript全局优化带来的负面效果……
    内训资料公开:设计师的实战过程(1)
    元语言基础技术之:在JS中如何自由地创建函数
    QoBean的元语言系统(一)
    Oracle面向服务的架构
    对JavaScript的eval()中使用函数的进一步讨论~
    KEGG and Gene Ontology Mapping in Bioinformatic Method
    mysql user administration
  • 原文地址:https://www.cnblogs.com/xkzy/p/3935415.html
Copyright © 2011-2022 走看看