不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧
By
admin
at 2017-11-09 • 1人收藏 • 1585人看过
第一贴,就分析下aardio自动生成的htmlayout示例界面
代码如下:
界面的html代码
<!doctype html> <html> <body> <!-- 界面顶栏 --> <div id="header"> <!-- 下面是标题栏按钮,必须使用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">HTMLayout 布局教程</button> </div> </body> </html>
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-left: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; behavior:popup-menu; width:max-intrinsic; 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%; 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; }
aardio与上面的html交互代码:
import win.ui; /*DSG{{*/ var winform = win.form(text="HTMLayout 无边框窗体";right=759;bottom=469;border="none";parent=...) winform.add() /*}}*/ import web.layout; import web.layout.behavior.windowCommand;//导入behavior:windowCommand; var wbLayout = web.layout( winform );//在窗体上创建HTMLayout对象 //开发环境中启用HTMLayout调试功能 if( _STUDIO_INVOKED ){ import web.layout.debug; wbLayout.attachEventHandler( web.layout.debug ); } wbLayout.html = htmlStr; wbLayout.css = cssStr; // 响应菜单点击事件 wbLayout.onMenuItemClick = { // 事件可以是一个函数或列表,如果是列表键名匹配节点的id或name属性 exit = function (ltTarget,ltOwner,reason,behaviorParams) { winform.close(); } //匹配不到id的节点会触发default函数*/ default = function (ltTarget,ltOwner,reason,behaviorParams) { var ltPopupOwner = web.layout.element( behaviorParams.he );//这是弹出菜单的按钮节点 winform.msgbox( ltTarget.innerText ) } } import process; wbLayout.onButtonClick = { help = function (ltTarget,ltOwner,reason,behaviorParams) { process.execute("http://api.aardio.com/v10/pages/htmlayout-introduction"); } } import win.ui.shadow; win.ui.shadow(winform); //添加阴影边框 winform.show(); win.loopMessage();
5 个回复 | 最后更新于 2017-11-11
随便在哪个页面调用浏览器的调试助手,看看盒子模型
这个是body的模型,把css里面margin改成50后
我记得应该是上右下左,下面为什么没空白....
看到上面的问号,css可以看作是一行一行执行,所以继续看body的css
height:100%;/*因为HTML元素的高度默认是按需增加的,所有需要显示指定根节点高度*/
这个意思是高度自适应, 如果去掉,那么就看到下边的空白了.
写到这里,发现自己写css的时候有个问题.
margin:50 10 10 10; /*去掉默认的页面边距*/
这里面的边距是用空白格分隔,我犯了个大错误,用逗号分隔了.唉,这个不同的地方一定要注意!
继续,看到了这句
/*最大化后body会自动添加maximize属性,如果是圆角界面可以在这里移除圆角*/ body[maximize]{ border-radius:0; } body[maximize] #header{ border-radius:0; }
如果是圆角则在这可以移除圆角???
那么这个只是针对htmlayout的css样式吗? 还是说针对mianform窗体圆角样式也可以呢?
于是, 代码里添加一个圆角样式,试试
//为当前窗口添加圆角样式 import win.region.round; win.region.round(winform,,,50,50);
设置了圆角为50 50, 然后去css里注释掉maximize属性.
最大化后,圆角还是消失了.
结论: css样式里面取消圆角对winfrom的圆角样式不起作用,
那么,css的圆角样式是怎么做的呢?会有什么效果?
还是原先的代码,我们在header中添加
#header{ height:32px; background:rgb(52,152,220); cursor:default; behavior:windowCommand; overflow:hidden;/*清除浮动*/ border-radius:10%; }
加入了border-radius:10% 的圆角
这个介绍可以在
中找到,于是我们注释掉maxmize那个最大化消除圆角的属性,再次运行,并最大化,发现
果然圆角还在....
这里先了解下htmlayout的弹出菜单写法:
<!-- 标题栏弹出菜单,需要弹出节点的最好用div或button等元素,不要使用a,li等元素 --> <div .window-menu>u <menu .popup> <!-- .popup是内置的弹出菜单样式 --> <li>在线帮助</li> <li>子菜单 <menu > <li>这是子菜单1</li> <li>这是子菜单2 <menu > <li>这是子菜单1</li> <li>这是子菜单2</li> </menu> </li> </menu> </li> <li #exit>退出</li> </menu> </div>
这里只是内置的菜单,如果要好看的菜单,那要后面再去学习.
而aardio中菜单的响应已经封装好了,只要熟悉下使用就可以.
// 响应菜单点击事件 wbLayout.onMenuItemClick = { // 事件可以是一个函数或列表,如果是列表键名匹配节点的id或name属性 exit = function (ltTarget,ltOwner,reason,behaviorParams) { winform.close(); } //匹配不到id的节点会触发default函数*/ default = function (ltTarget,ltOwner,reason,behaviorParams) { var ltPopupOwner = web.layout.element( behaviorParams.he );//这是弹出菜单的按钮节点 winform.msgbox( ltTarget.innerText ) } }
登录后方可回帖
对于上面的html代码,要知道
这个可以删掉,这里我们做的是桌面,不是网页,于是可以知道
一个界面就是从
这里面每一对<>...</>之间就是一对节点.
因此可以知道,body , menu ,div 都是节点.
同时a 超链接其实也是个节点