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功能, 这样鼠标在按钮上长按,就应该会数值自动增加了.

如果按照上面的写法,每次判定if() 把所有的逻辑写在一起总感觉看着不是很合逻辑, 那么aardio里提供了另外一种写法, 类似写函数那样写成表函数的形式

123

上面只是用到了一个button , 如果有两个

<div style="behavior:button">hello aardio1111!</div> <br /> <div style="behavior:button">hello aardio2222!</div>

那么点击任何一个都会弹出窗口, 这显然不是我要的, 

我要知道我点击了谁, 然后弹出不同的窗口.

那么需要在逻辑代码里输出看

界面最重要的就是交互, 那么怎么才能我点击 hello aardio的字时候,弹出这个信息呢?

<div style="behavior:button">hello aardio!</div>

我们看了aardio官方教程知道, 有这么个交互behavior行为, 只需要定义代码块为这个button行为,那么点击它就会产生button的行为了.

于是,我们在main.aardio逻辑代码里添加