HTML,CSS 无边框桌面窗口

浏览数：33 / 时间：2015年06月09日

1. [图片] htmlui.jpg

?2. [代码]下面源码复制到快手（WWW.AAU.CN）中运行即可
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 />
**/

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

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML,CSS 无边框桌面窗口