aardio 范例: Sciter 无边框窗体

    <!-- 下面是标题栏按钮,必须使用a标记表示,command属性指示该按钮执行的命令,可在窗体设计器中禁用最大化、最小化按钮 --> 
    <div class="titlebox">
        <a command="window-min">0</a><a command="window-max">1</a><a command="window-close" >r</a>
    </div>  

    <!-- 标题栏弹出菜单,需要弹出节点的最好用div或button等元素,不要使用a,li等元素 -->
    <div .window-menu>u
        <menu .popup> <!-- .popup是内置的弹出菜单样式 -->
            <li>在线帮助</li> 
            <li>子菜单
            <menu >
                <li>这是子菜单</li>
            </menu>
            </li>
            <li #exit>退出</li>
        </menu>
    </div> 

    <!-- 下面是标题栏文本,凡在CSS中指定 behavior:windowCommand 的节点(含子节点) 可用 command 属性指明命令类型 -->
    <div class="title-bar" command="window-caption"> <span class=title> 我 的 软 件 </span></div>
</div> 

<!-- 界面中部内容栏 -->
<div id="container"> 

    <!-- 左边栏,固定宽度 -->
    <div class="lside"> </div> 

    <!-- 右边栏,自适应宽度 -->
    <div class="rside"> </div>  
</div>

<!-- 界面底栏 -->
<div id="footer">
    <button id="help">Sciter 布局教程</button>
</div>

**/

sciter.css = /** html,body{ margin:0; /*去掉默认的页面边距*/ height:100%;/*因为HTML元素的高度默认是按需增加的,所有需要显示指定根节点高度*/ background:#fff;/*网页背景色*/ }

body{ overflow:hidden;/*避免出现滚动条*/ }

/*最大化后body会自动添加maximize属性,如果是圆角界面可以在这里移除圆角*/ body[maximize]{ border-radius:0; }

body[maximize] #header{ border-radius:0; }

#header{ height:32px; background:rgb(52,152,220); cursor:default; behavior:windowCommand; overflow:hidden;/*清除浮动*/ }

#header .title-bar{ margin-right:95px; padding:8px 5px 5px 15px; height:28px; line-height: 28px; font:system; color:#fff; }

#header .titlebox{
width:max-intrinsic; height:28px; float:right; margin-right:8px; overflow-x:hidden; }

#header .titlebox a{ display:inline-block; //显示为块节点 width:max-intrinsic; height:14px; font-family:"Marlett";/*该字体显示按钮符号*/
font-size:14px; padding:4px; color:#fff; cursor:default; }

/*CSS选择器中,方括号指定节点拥有的属性*/ #header .titlebox a[command]:hover{ background:#6ebccf; }

#header .titlebox a[command]:active{ background:#FF0000; }

#header a[command="window-restore"]{ content:"2";/*Marlett字体为还原按钮符号*/ }

#header .window-menu{ display:block;
float:right; text-align:right; behavior:button popup-menu; width:16px; height:14px; font-family:"Marlett";/*该字体显示按钮符号*/
font-size:14px; padding:4px; color:#fff; }

#header .window-menu:hover{ background:#6ebccf; }

#header .window-menu:owns-popup /*菜单已弹出*/ { background-color: #FF0000; color: #FFFFFF; }

#container{ width:100%; height:100%%; /*撑满剩余可用空间*/ flow: horizontal; /*将容器内部块元素变为横向布局 - 比具有破坏性的float浮动布局更方便*/ margin:0 auto; overflow:hidden;
background:#ac0; }

#container .lside{ height:100%%; width:150px;
background:rgb(110,179,210); }

#container .rside{ height:100%%; width:100%%;
background:#FFF; }

#container .lside > *{ margin:38px 0px; }

#container .rside > *{ margin:38px 10px; font-size:9pt; }

#footer { background:rgb(239,237,238); height:25px; text-align:right; padding:10px 20px; }

#footer button{ padding:4px 13px; font-size:12px; background:rgb(27,174,93); color:white; }

#footer button:hover { background:rgb(33,127,188); outline: 1px glow rgb(91,171,230) 1px; cursor:pointer; } **/

// 响应菜单点击事件 sciter.onMenuItemClick = {

// 事件可以是一个函数或列表,如果是列表键名匹配节点的id或name属性 
exit = function (scTarget,scOwner,reason,behaviorParams) {
    winform.close();
}

//匹配不到id的节点会触发default函数*/
default = function (scTarget,scOwner,reason,behaviorParams) {
    var ltPopupOwner = web.sciter.element( behaviorParams.he );//这是弹出菜单的按钮节点
    winform.msgbox( scTarget.innerText )
}

}

import process; sciter.onButtonClick = { help = function (scTarget,scOwner,reason,behaviorParams) { process.execute("http://api.aardio.com/v10/pages/htmlayout-introduction"); } }

import win.ui.shadow; win.ui.shadow(winform); //添加阴影边框

winform.show(); win.loopMessage();

Markdown 格式