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, 多选框

  <INPUT type="checkbox" name="cb" value="C++">C++&nbsp;   <INPUT type="checkbox" name="cb" value="Aardio" checked>Aardio&nbsp;    <INPUT type="checkbox" name="cb" value="JavaScript" checked>JavaScript&nbsp;    &l

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 type

8, 文件选择器 和文件夹选择器

类似aardio里winform里面的fsys.dlg.openxxx , 弹出一个窗口让你选择要上传的文件或文件夹功能

  文件选择器:<input type="file-path" filter="HTML files:*.htm,*.html;Text files:*.txt;All files:*.*" novalue="(select file)" value="" />   <br/>   文件夹选择:<inp

7, ICON图标的显示

这个是内置的behavior:shell-icon实现的, 不需要import任何库,编写html即可.

  <select size="6" style="height:500px">     <option><img  style="behavior: shell-icon;" filename=".png" /> *.png icon</option>     <option><img  

6, listbox 模拟

最简单的方式

1234

5, 下拉组合框 模拟winform的combobox功能

1234

那么,右键菜单应该怎么做呢? 点击右键才能出现的菜单

看了htmlayout的示例, 

selector函数的参数是指定右键菜单的CSS选择器

  <div style="context-menu:selector(menu#context);">这里要点右键才出现菜单</div>   <menu.context #context>     <li id="i1">First item</li>     <

菜单显示完成了, 那么怎么才能知道我点击了哪个呢?

和上面的button写法一样, 只需要把每个<li>加个id就可以了

<div style="behavior:popup-menu">菜单 <menu .popup>          <li #new>新建</li> <li #open>打开</li> <li #save>保存</li> &l

4, 多级菜单

<div style="behavior:popup-menu">菜单 <menu .popup>          <li>新建</li> <li>打开</li> <li>保存</li> <li>另存为 <menu> <li>保存1</li> <li>保存2</li>

不推荐使用 , 推荐看12楼方法

刚才又到论坛里看了下, 弹出dropdown,官方推荐用 popup-menu ,这个是htmlayout内置的behavior,不需要导入其他库

不推荐使用 , 推荐看12楼方法

上面有一个问题, 弹出来之后, 必须点击弹出区域外才能关闭弹出口, 在里面点击不会关闭

em.... aar官方论坛里有提到了,

不推荐使用 , 推荐看12楼方法

3, 模拟菜单栏的弹出菜单功能

类似winform的菜单, 点击后,下拉出一个列表 ,

<div style="behavior:dropdown">菜单演示 <popup>          <li>新

上面的方法只能简单的提示 , 如果你想要用要给复杂漂亮的提示框, 那么可以指定提示用的titleid,这个titleid指向下面定义的popup的id号即可.

<div #hello1 style="behavior:button" titleid="mytips1">hello aardio1111!</div> <br /> <div #hello2 style="behavior:button" titleid="mytips1">hel

2, 增加提示

上面按键上怎么增加提示功能? 类似winform里的tooltips

第一种最简便的办法, 在div里面增加title属性, 这样htmlayout自动管理提示

<div #hello1 style="behavior:button" ti

其实上写到这里就可以看出, 上面利用onbuttonClick事件和press是不对的, 貌似实现了, 但是会有很多问题, 要实现长按功能, 就应该用类似plus的mouseup和mousedown事件

但是从教程里来看如果html里设置behavior:button定义为button, 那么就不会产生mouseup事件了, 经过测试也确实如此, 

onMouseUp 和onMouseDown 事件是针对普通的节点, 官方论坛里也说过:

我们知道工业上很多时候需要长按按钮来实现一定的功能, 比如数值连续增加, 那么这里应该怎么实现呢?

var i=1; wbLayout.onButtonPress = { hello1 = function (ltTarget,ltOwner,reason,behaviorParams) { console.log(i) i++; } }

增加press功能, 这样鼠标在按钮上长按,就应该会数值自动增加了.