当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » 其他  » 编程基础
figer1

HTML,CSS 无边框桌面窗口

figer1 发布于 2013年04月27日 20时, 3评/2781阅
分享到: 
收藏 +0
3
《HTMLayout 快速入门 》里的示例代码,HTML+CSS实现无边框桌面窗口
标签: AAuto Quicker

源码与演示:源码出处

代码片段(2) [全屏查看所有代码]

1. [图片] htmlui.jpg    

2. [代码]下面源码复制到快手(WWW.AAU.CN)中运行即可     跳至 [2] [全屏预览]

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;text="HTMLayout - 无边框窗口";border="none";right=599 )
winform.add(  )
/*}}*/

import win.util.round;
win.util.round(winform,,,6,6); //窗体改成圆角,最后两个参数指定圆角半径

import web.layout;
import web.layout.behavior.windowCommand;
import web.layout.behavior.windowSizer;

//创建网页浏览器
var wbLayout = web.layout( winform )

wbLayout.html = /**
<div #title-bar command="window-caption">  
    <div .buttons> 
        <a command="window-min">0</a>
        <a command="window-max">1</a>
        <a command="window-close">r</a>
    </div> 
</div>

<div style="behavior:windowSizer"/>  
**/

wbLayout.css = /**
html{
    background:#999;/*网页背景色*/
    border-radius:4px; /*8像素大小的圆角*/
}

#title-bar{ 
    behavior:windowCommand;/*添加交互行为:windowCommand*/
    width:100%; /*宽度撑满窗口*/
    height:21px; /*高度36像素,px表示单位为像素*/
    background:#CCCCCC; /*背景色*/
}  

#title-bar .buttons { 
    width:85px;/*宽度85像素*/
    height:16px;/*高度16像素*/
    flow:horizontal;/*内部水平布局横向排列按钮*/
    
    position:absolute;/*使用绝对定位*/
    right:2px;/*右边距2像素*/
    top:0px;/*顶边距0像素*/
}

#title-bar a[command]{
    display:block; /*显示为块模式,才能指定宽高*/
    width:16px;/*宽度16像素*/
    height:16px;/*高度16像素*/
    font-family:"Marlett"; /*该字体显示按钮符号*/
    padding:4px 2px 5px 4px;/*上右下左内边距*/
}
#title-bar a[command]:hover{ 
    background:#999;/*鼠标移到节点上改变背景色*/
}
 
#title-bar a[command="window-restore"]{ 
    content:"2";/*自动转换到还原按钮时,改变内部文本为还原符号*/
}
**/

winform.show() 
win.loopMessage();


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(3)

  • 1楼:麦麸子lee 发表于 2013-04-28 09:16 回复此评论
    感觉很厉害样,这个是脚本语言还是?
  • 2楼:figer1 发表于 2013-04-28 09:50 回复此评论
    参考  >> AAuto简介   aauto可以象脚本语言那样用,但也可以象C,C++那样直接用于原生开发。例如上面那个程序复制到IDE里就可以直接生成EXE,用到的一些标准库里的库win.ui, web.layout都是aauto开发的并且也都开源的。  

     
    >> AAuto开发环境下载 
    不到7MB,绿色解压就可以使用,而且完全免费的开发工具,写一些小桌面软件非常快。
  • 3楼:figer1 发表于 2013-04-28 10:04 回复此评论
    介绍下HTMLayout        >> 官方网站       ,非常棒的HTML UI组件,完全免费,体积小、速度快,可以使用传统的HTML,CSS语法而且有很多针对桌面UI的扩展。 

    当然HTML,CSS用来开发桌面UI还是有很多不方便的地方,毕竟HTML不是为桌面UI而设计的。 如果用JS+HTML,CSS来仿桌面UI,比较吃力而且运行总没有传统桌面UI流畅,用IE内核的话存在一些兼容性的问题,用webkit又要带上巨无霸的库。        

    HTMLayout没有这些弊端,他针对桌面UI做了很多有意思的扩展,例如九宫格贴图、灵活的布局支持等等,例如上面发的源码中要让一个节点靠到右边,只要在CSS里写margin-left:100%%;就可以了,两个百分号表示划分剩余空间,HTMLayout里很多这些有趣的扩展。 在传统网页中需要复杂的js来实现的效果只要简单的几句HTML,CSS就可以实现,而且可以支持动画PNG、SVG、支持分层透明窗口。

    HTMLayout被norton,realplay,everNote,avast,maxthon很多流行软件使用,用官网的话来说:“HTMLayout被安装在超过6,700,000 台电脑上,使用在不同的公司不同的产品中。这也意味着每天有大约43,000个用户下载并安装以HTMLayout开发的产品”。 
开源从代码分享开始 分享代码
figer1的其它代码 全部(141)...