15, 树形视图 tree
类似winform里面的treeView控件
<widget type="tree" #demo treelines style="height:100%%;width:100%%;font-size:20px"> <option expanded>Metals <option expanded>Alkaline Metals <option>Lithium <co回复#2 @evyhui :
这个用的web.form , 用的ie11
用webkit和blink推荐用 http://www.htmlayout.cn/t/214 这个帖子里面的js控件
14, 跟踪条
类似winform里的trackbar
htmlayout里分水平和垂直跟踪条 , 类型分别是
hslider 水平跟踪条
vslider 垂直跟踪条
<input type="hslider" name="demo1" min="0" max="100" value="0" step="10" buddy="demo1-buddy"/>水平当前值: <b id="demo1-buddy">x<13, 进度条
和winform一样的功能progress控件
最简单的进度条:
<p> 0%:<progress name="p1" maxvalue="100" value="0"/> 25%:<progress name="p2" maxvalue="100" value="25"/> 50%:<progress name="p3" maxvalue="100" value="50"/> 75%:<12, 数值输入框
类似winform的spin控件, 输入框的右侧有上下微调按钮,点击可以自加数值
<input type="number" />type="number"只允许输入
11, 文本框
类似winform的editbox控件
<input type="text" />上面是最简单的输入框
text有下面这些属性可以设置,达到不同的效果
10, 多选框
9 , 单选按钮
类似winform 的radio按钮功能, 在htmlayout中使用很简单
<INPUT type="radio" name="color" value="blue">蓝色 <INPUT type="radio" name="color" value="red" checked>红色 <INPUT type="radio" name="color" value="green">绿色 <INPUT type8, 文件选择器 和文件夹选择器
类似aardio里winform里面的fsys.dlg.openxxx , 弹出一个窗口让你选择要上传的文件或文件夹功能
文件选择器:<input type="file-path" filter="HTML files:*.htm,*.html;Text files:*.txt;All files:*.*" novalue="(select file)" value="" /> <br/> 文件夹选择:<inp7, ICON图标的显示
这个是内置的behavior:shell-icon实现的, 不需要import任何库,编写html即可.
<select size="6" style="height:500px"> <option><img style="behavior: shell-icon;" filename=".png" /> *.png icon</option> <option><img5, 下拉组合框 模拟winform的combobox功能
那么,右键菜单应该怎么做呢? 点击右键才能出现的菜单
看了htmlayout的示例,
selector函数的参数是指定右键菜单的CSS选择器
<div style="context-menu:selector(menu#context);">这里要点右键才出现菜单</div> <menu.context #context> <li id="i1">First item</li> <菜单显示完成了, 那么怎么才能知道我点击了哪个呢?
和上面的button写法一样, 只需要把每个<li>加个id就可以了
4, 多级菜单
不推荐使用 , 推荐看12楼方法
刚才又到论坛里看了下, 弹出dropdown,官方推荐用 popup-menu ,这个是htmlayout内置的behavior,不需要导入其他库
不推荐使用 , 推荐看12楼方法
上面有一个问题, 弹出来之后, 必须点击弹出区域外才能关闭弹出口, 在里面点击不会关闭
em.... aar官方论坛里有提到了,
不推荐使用 , 推荐看12楼方法
3, 模拟菜单栏的弹出菜单功能
类似winform的菜单, 点击后,下拉出一个列表 ,
<div style="behavior:dropdown">菜单演示 <popup> <li>新上面的方法只能简单的提示 , 如果你想要用要给复杂漂亮的提示框, 那么可以指定提示用的titleid,这个titleid指向下面定义的popup的id号即可.
2, 增加提示
上面按键上怎么增加提示功能? 类似winform里的tooltips
第一种最简便的办法, 在div里面增加title属性, 这样htmlayout自动管理提示
<div #hello1 style="behavior:button" ti其实上写到这里就可以看出, 上面利用onbuttonClick事件和press是不对的, 貌似实现了, 但是会有很多问题, 要实现长按功能, 就应该用类似plus的mouseup和mousedown事件
但是从教程里来看如果html里设置behavior:button定义为button, 那么就不会产生mouseup事件了, 经过测试也确实如此,
onMouseUp 和onMouseDown 事件是针对普通的节点, 官方论坛里也说过:
我们知道工业上很多时候需要长按按钮来实现一定的功能, 比如数值连续增加, 那么这里应该怎么实现呢?
增加press功能, 这样鼠标在按钮上长按,就应该会数值自动增加了.
如果按照上面的写法,每次判定if() 把所有的逻辑写在一起总感觉看着不是很合逻辑, 那么aardio里提供了另外一种写法, 类似写函数那样写成表函数的形式
上面只是用到了一个button , 如果有两个
<div style="behavior:button">hello aardio1111!</div> <br /> <div style="behavior:button">hello aardio2222!</div>那么点击任何一个都会弹出窗口, 这显然不是我要的,
我要知道我点击了谁, 然后弹出不同的窗口.
那么需要在逻辑代码里输出看
界面最重要的就是交互, 那么怎么才能我点击 hello aardio的字时候,弹出这个信息呢?
我们看了aardio官方教程知道, 有这么个交互behavior行为, 只需要定义代码块为这个button行为,那么点击它就会产生button的行为了.
于是,我们在main.aardio逻辑代码里添加
1 , 新建htmlayout工程
首先建立 ui.aardio 的代码文件, 代码框架如下
<html> <head> <style type="text/css"> </style> </head> <body> hello aardio! </body> </html>那么,修改和添加main.aardio
以前说了N多次要学习下htmlayout , 一直各种理由没开始, 这次下定决心开始好好的学一学.
为什么选择htmlayout? 不是过时了吗?
我不这样认为, 适合自己的才是最好的, 最先进的技术并不一定适合我, 我目前的工作和生活中winform这样的拖拖拽拽都可以胜任 , 接触更多的是工业级的软件, 不像web那样的应用层, 工业级的设计讲究的是效率和稳定.
适不适合还是因人而异. ,哈
既然名字都包含了html那么需要的就是html的语法了, 我从来没弄过web方面的, 所以真的是白的不能再白
2019-10-26更新:
校长在新版里增加了win.region.png库, 另外在updateWindow()函数里增加了第三个参数来保存之前生成的region区域, 这样利用这个库, 代码就可以更简洁了
16 ,列表视图控件Grid
类似winform的listview控件
<html> <head> <style> table[name="reportview"] { width:500px; /* natural width */ height:100%%; overflow:auto; behavior:grid; background: url(theme:edit-normal) stretch; padding:1px; f