HTMLayout内置behavior大全

quicker

一、 behavior:clickable 响应单击节点
事件：onButtonClick，onButtonPress
clickable用于实现支持onButtonClick，onButtonPress单击事件但是不支持焦点切换的按钮，例如工具条按钮。

1. 
   
2. import win.ui;
   
3. /*DSG{{*/
   
4. winform = win.form(text="HTMLayout behavior:clickable";right=599;bottom=399)
   
5. /*}}*/
   
6. 
   
7. import web.layout;
   
8. wbLayout = web.layout(winform);
   
9. 
   
10. //下面的自定义behavior追加到节点上，用于处理事件
    
11. namespace web.layout.behavior.eventhandler {  
    
12. 
    
13.         onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
    
14.                 ltOwner.innerText = "单击事件"
    
15.         }
    
16.        
    
17.         onButtonPress = function (ltTarget,ltOwner,reason,behaviorParams) {
    
18.                 ltOwner.innerText = "当前节点得到焦点时,按下鼠标左键或空格键"
    
19.         }
    
20.        
    
21.         onMouseClick = function( ltTarget,ltOwner,x,y,ltMouseParams ) {
    
22.                 ltOwner.innerText = "behavior中移除clickable以后单击触发onMouseClick事件而不是onButtonClick"
    
23.         }
    
24. }
    
25. 
    
26. wbLayout.html =/***
    
27. <div style="behavior:'eventhandler clickable';background:#FFFF00;padding:10px;">请点击这里</div>
    
28. ***/
    
29. 
    
30. winform.show()
    
31. win.loopMessage();
    

复制代码

二、 behavior:edit 文本框控件

1. 
   
2. <input type="text" />
   
3. <widget type="text"></widget>
   

复制代码

属性：
value=“text” - 文本框初始值
size=integer - 文本框宽度
maxlength=integer -可包含的最大字符数
filter=“filter-expr” - 限制输入的字符表达式，可指定单个字符或指定字符范围，例如 “.@0~9a~zA~Z”表示允许所有数字字母, '.' 以及 '@'. 可以使用 '^' 前缀排除字符. 例如“^.,-” 允许所有除 '.', ',' 和 '-' 以外的字符。
novalue=“text” - 文本框为空时显示的默认值，在CSS中可以使用:empty指定显示默认值的样式。

事件：
onEditValueChanged 控件值已变更
onEditValueChanging 正在变更控件值

支持的快捷键：
LEFT, CTRL+LEFT, SHIFT+LEFT, CTRL+SHIFT+LEFT
RIGHT, CTRL+RIGHT, SHIFT+RIGHT, CTRL+SHIFT+RIGHT
HOME, SHIFT+HOME
END, SHIFT+END
BACKSPACE, ALT+BACKSPACE, CTRL+BACKSPACE
CTRL+A
DELETE, SHIFT+DELETE, CTRL+DELETE
INSERT, SHIFT+INSERT, CTRL+INSERT
CTRL+X
CTRL+V
CTRL+Z
CTRL+(LEFT)SHIFT 以及CTRL+(RIGHT)SHIFT

自定义函数
ltEle.xcall("selectionStart"): int - 返回选区开始位置
ltEle.xcall("selectionEnd"): int - 返回选区结束位置
ltEle.xcall("setSelection", start:int, end:int):void - 设置选区
ltEle.xcall("selectionText"): string - 返回选中文本
ltEle.xcall("insertText", text: string):void - 在光标处插入文本
ltEle.xcall("appendText", text: string):void - 追加文本
ltEle.xcall("undo", false): bool - 是否可以撤消操作
ltEle.xcall("undo", true) - 撤消操作
ltEle.xcall("cut", false): bool - 是否可以剪切
ltEle.xcall("cut", true) - 剪切操作
ltEle.xcall("copy", false): bool - 是否可复制
ltEle.xcall("copy", true) - 复制操作
ltEle.xcall("paste", false): bool - 是否可粘贴
ltEle.xcall("paste", true) - 粘贴操作;
ltEle.xcall("selectAll"): bool - 当前是否已全选文本
ltEle.xcall("selectAll", true) - 全选文本

三、behavior:decimal，behavior:number 数值输入框控件

1. 
   
2. <input type="decimal" />
   
3. <widget type="decimal"></widget>
   
4. <input type="number" />
   
5. <widget type="number" ></widget>
   

复制代码

这两个behavior用法类似，behavior:number仅允许输入整数。注意指定了step属性后会显示滚动选框。

属性
value=float - 初始值
size=integer - 控件宽度
min - 最小值
max - 最大值
step - 滚动选框步进值，指定了此属性会显示滚动选框
format - 数值显示格式，支持下面的字段，使用 ';'分隔多个字段:
    grouping - number, ‘千位’分隔符间隔数
    fdigits - number, 小数位置
    leading-zero - true/false, 是否显示前导0
    decimal-sep - 小数分隔符
    grouping-sep - 千位分隔符
    negative-sign - true/false, true - 是否显示负号
   
示例:
format="grouping:3;
   fdigits:4;
   leading-zero:false;
   decimal-sep:',';
   thousand-sep:'_';
   negative-sign:false"
   
也可以写在CSS自定义属性中(属性名前面加一个短横线）
input.decimal
{
  behavior:decimal;
  -format="fdigits:2; leading-zero:true;"
}

自定义函数
ltEle.xcall("min"): int - 返回最小值
ltEle.xcall("min", v:int) - 设置最小值
ltEle.xcall("max"): int - 返回最大值
ltEle.xcall("max", v:int) - 设置最大值
ltEle.xcall("step"): int - 返回步进值
ltEle.xcall("step", v:int|undefined) - 设置|或清除步进值，设置了该值以后后会显示滚动选框

事件：
onEditValueChanged 控件值已变更
onEditValueChanging 正在变更控件值

四、behavior:currency 货币数值输入框控件

1. 
   
2. <input type="currency" />
   
3. <widget type="currency"></widget>
   

复制代码

属性
value=float - 初始值
size=integer - 控件宽度
format - 数值显示格式，支持下面的字段，使用 ';'分隔多个字段:
    grouping - number, ‘千位’分隔符间隔数
    fdigits - number, 小数位置
    leading-zero - true/false, 是否显示前导0
    decimal-sep - 小数分隔符
    grouping-sep - 千位分隔符
    negative-sign - true/false, true - 是否显示负号
    currency - 货币符号
    currency-after - 货币符号是否显示在数值后面

currency控件会自动更新下面两个属性
invalid - 当前输入了无效的值
negative - 负数
   
format也可以写在CSS自定义属性中(属性名前面加一个短横线）
input.decimal
{
  behavior:decimal;
  -format="fdigits:2; leading-zero:true;"
}

事件：
onEditValueChanged 控件值已变更
onEditValueChanging 正在变更控件值

五、behavior:button 按钮控件

1. 
   
2. <button></button>
   
3. <input type="button" />
   
4. <widget type="button"></widget>
   
5. <input type="reset" />
   
6. <input type="submit" />
   
7. <button><img src=.../> 可以使用HTML指定按钮标题</botton>
   

复制代码

属性   
value="caption" - 按钮标题

事件  
onButtonClick  - 单击事件
onButtonPress - 当前节点得到焦点时,按下鼠标左键或空格键

六、behavior:check 复选框控件

1. 
   
2. <input type="checkbox">  
   
3. <widget type="checkbox">
   
4. <button type="checkbox">caption</button>
   
5. <input type="checkbox" mixed> - 三态选框,inline节点。
   
6. <widget type="checkbox" mixed> -  三态选框,block节点。
   
7. <button type="checkbox" mixed>Windows like inline checkbox button</button> 三态选框
   

复制代码

属性   
checked 用于指定初始值，运行时的值应使用 ltEle.state.checked 获取。
checked=true - 选中
checked=false - 取消选中
checked=undefined - 三态按钮的未决状态

事件  
onButtonStateChanged - 控件值变更事件
onButtonPress - 当前节点得到焦点时,按下鼠标左键或空格键
<input type="radio">

七、behavior:radio 单选按钮

1. 
   
2. <input type="radio">  
   
3. <widget type="radio">
   
4. <button type="radio">caption</button>  
   

复制代码

属性   
checked 用于指定初始值，运行时的值应使用 ltEle.state.checked 获取。
checked=true - 选中
checked=false - 取消选中

事件  
onButtonStateChanged - 控件值变更事件
onButtonPress - 当前节点得到焦点时,按下鼠标左键或空格键


八、behavior:switch 单选按钮
这个behavior与behavior:radio用法类似，主要区别是在鼠标左键按下时（而不是放开时）切换选中状态。

九、behavior:progress 进度条控件

1. 
   
2. <progress /> - inline节点
   
3. <input type="progress" /> - inline节点
   
4. <widget type="progress"></widget> - block节点
   

复制代码

progress控件根据进度百分比调整前景图显示宽度以显示当前进度值。
关于指定前景图请参考帖子：CSS属性 background-position ,foreground-position 用法

属性   
value=float - 进度值
maxvalue=float - 最大值
bar="clip" 如果指定这个HTML属性，或者在CSS中指定自定义属性 -bar:"clip"; 进度条会剪切显示前景图 （始终不改变原图大小），这时候右侧显示为直边。如果不指定clip模式则前景图被拉伸显示（动态改变原图大小以适应显示宽度），请按九宫格指定前景切图参数（以保持右侧切片固定显示并拉伸中间部分）

事件  
onButtonStateChanged - 控件值变更事件
onButtonPress - 当前节点得到焦点时,按下鼠标左键或空格键

十、behavior:time 时间控件

1. 
   
2. <input type="time" value="14:15:00" />
   
3. <widget type="time" value="14:15:00" ></widget>
   

复制代码

属性   
value=“HH:MM:SS” 或者 value=“now” - HH使用24小时制，now为当前时间
no-seconds - 是否需要秒数

事件：
onEditValueChanged 控件值已变更
onEditValueChanging 正在变更控件值

十一、behavior:password 密码输入框控件

1. 
   
2. <input type="password"/>
   
3. <widget type="password"></widget>
   

复制代码

属性   
password-char="占位符" - 密码控件实际上是一个edit文本框控件，然后增加支持这个属性

十二、behavior:frame 框架
参考帖子：HTMLayout iframe框架用法演示

1. 
   
2. <iframe src="something.htm"/>
   

复制代码

属性   
src="url.html" - 框架内加载网页地址
content-style="url.css" - 添加样式到框架页面
可以在CSS中使用 :busy 状态指定正在加载框架时的样式

方法：
ltEle.xcall("load", url:string) - 在框架中加载指定地址网页
ltEle.xcall("clear") - 清空框架

事件：
onFrameDocumentComplete 框架内页面加载完成


十三、behavior:menu-bar 菜单栏

1. 
   
2. <ul #menu-bar>
   
3.      <li>Menu item with sub-menu
   
4.          <menu #sub-menu>
   
5.             <li>Open</li>
   
6.             <li>Close</li>
   
7.          </menu>
   
8.      </li>
   
9.      <li>Simple menu item (no submenu)</li>
   
10.   </ul>
    

复制代码

需要在CSS中指定behavior:menu-bar,子节点中的<li>节点或HTML属性中指定了role="menu-item"作为菜单项处理

事件：
onMenuItemActive = function (ltTarget,ltOwner,reason,behaviorParams) {}
鼠标位于某菜单项上,ltTarget为激活的菜单项

onMenuItemClick = function (ltTarget,ltOwner,reason,behaviorParams) {}
点击菜单项，ltTarget为点击的菜单项

十四、behavior:menu 菜单

1. 
   
2. <menu class="popup">
   
3. <menu class="context">
   

复制代码

子节点中的<li>节点或HTML属性中指定了role="menu-item"作为菜单项处理

菜单项也可以是如下的子菜单:

1. 
   
2. <menu .popup>
   
3. <li>Open</li>
   
4. <li>Close</li>
   
5. </menu>

复制代码

事件：
onMenuItemActive = function (ltTarget,ltOwner,reason,behaviorParams) {}
鼠标位于某菜单项上,ltTarget为激活的菜单项

onMenuItemClick = function (ltTarget,ltOwner,reason,behaviorParams) {}
点击菜单项，ltTarget为点击的菜单项

十五、behavior:slider 滑块控件

1. 
   
2. <input type="hslider"> - 水平滑块, inline block;
   
3. <widget type="hslider"> - 水平滑块, block;
   
4. <input type="vslider"> - 竖向滑块, inline block;
   
5. <widget type="vslider"> - 竖向滑块, block;
   

复制代码

属性   
value - integer, 初始值.
min - integer, 最小数值
max - integer, 最大数值
step - integer, 步进值,默认为1
buddy - string, 同步显示控件值的节点ID

事件：
onButtonStateChanged - 控件值变更事件
onButtonClick - 单击控件

十六、behavior:tree 树形视图控件

1. 
   
2. <select type="tree">…</select>
   
3. <select type="tree" checkmarks>…</select>
   
4. <widget type="tree">…</widget>
   
5. <widget type="tree" checkmarks>…</widget>
   

复制代码

这个behavior与behavior:select很像，例如同样可以包含以下子节点：
<option>…</option> - 表示一个列表项. <option> 还可以嵌套包含更多的列表项。
<optgroup>…</optgroup> - 列表项分组

控件的值返回选中的option的value属性或者text文本值。

属性   
size="N"  N是大于1的数，指定显示行数，显示1行时为下拉列表，显示多行列表框
checkmarks  - 是否显示复选框，其外观在master CSS中定义，可在CSS中自行义外观

事件：
onSelectSelectionChanged  = function (ltTarget,ltOwner,reason,behaviorParams) {}
控件选项变更

onSelectStateChanged  = function (ltTarget,ltOwner,reason,behaviorParams) {}
展开或折叠子节点，ltTarget 为状态变更节点，
节点 ltTarget.state.collapsed , ltTarget.state.expanded状态变更，

快捷键：
LEFT - 折叠子节点
RIGHT - 展开子节点
UP / PAGE-UP - 上一节点
DOWN / PAGE-DOWN-  下一节点
SHIFT + UP/PAGE-UP - 上一节点并且选中
SHIFT + UP/PAGE-DOWN - 下一节点并且选中
HOME - 第一个节点
END - 最后一个节点

十七、behavior:select 列表控件

1. 
   
2. <select size=N>…</select> , N是大于1的数，指定显示行数，显示1行时为下拉列表，显示多行列表框
   
3. <select type=“select”>…</select> 注意这里即使size=1也会显示为select，而不是下拉框（dropdown-select）
   
4. <widget type=“select”></widget>
   

复制代码

select控件内部可以包含任意的HTML子节点，注意以下子节点的用法：
<option>…</option> - 表示一个列表项. <option> 还可以嵌套包含更多的列表项。
<optgroup>…</optgroup> - 列表项分组

注意behavior:select 仅仅是一个多功能的列表控件，
behavior:dropdown-select 才是下拉框（“dropdown” 即“下拉”的意思）
HTML代码 <select size=1>…</select> 时加载 behavior:dropdown-select ，当size属性大于1，或者在属性中指定了type=“select”才会加载 behavior:select。

behavior:select 可以创建列表框(listbox），也支持多列可以变成列表视图（listview），并且支持嵌套多级子节点变成树形视图( treeview，行为类似 behavior:tree )

属性   
size=“N” -  N是大于1的数，指定显示行数，显示1行时为下拉列表，显示多行列表框
multiple   是否允许选中多个列表项
multiple=“checks” - 显示复选框

事件：
onSelectSelectionChanged  = function (ltTarget,ltOwner,reason,behaviorParams) {}
控件选项变更

onSelectStateChanged  = function (ltTarget,ltOwner,reason,behaviorParams) {}
节点状态变更，例如树形节点展开或折叠子节点

快捷键：
LEFT - 折叠子节点
RIGHT - 展开子节点
UP / PAGE-UP - 上一节点
DOWN / PAGE-DOWN-  下一节点
SHIFT + UP/PAGE-UP - 上一节点并且选中
SHIFT + UP/PAGE-DOWN - 下一节点并且选中
HOME - 第一个节点
END - 最后一个节点

select控件可以实现下拉框(combobox),多行列表框(listbox)、列表视图(listview)以及树视图(treeview)，关于这个控件的用法与示例代码请参考文章：HTMLayout 使用select控件实现列表视图( listview）

十八、behavior:dropdown-select 下拉框控件

1. 
   
2. <select>…</select>
   
3. <select size=1>…</select>
   
4. <select type="select-dropdown">…</select>
   
5. <widget type="select-dropdown">…</widget>
   

复制代码

这个控件实际上是select控件显示为下拉框时应用的behavior，
此behavior将节点创建为以下结构(CSS写样式要按下面的结构修改子节点外观)：

1. 
   
2.   <select>
   
3.     <caption>标题</caption>
   
4.     <button>按钮</button>
   
5.     <popup>
   
6.       <option>列表项</option>
   
7.       <option>列表项</option>
   
8.       <option>列表项</option>
   
9.     </popup>
   
10.   </select>
    

复制代码

子节点可以包含任意的HTML,其中<option>节点或节点HTML属性中指定了role="option"的节点视为子节点，例如：
<select>
  <table> ...
     <td role=option>First</td>
     <td role=option>Second</td>
     ...
  </table>
</select>

属性   
editable - 如果为真，标题子节点caption将应用behavior:edit，并且控件的value属性值也指向edit控件的当前值。
novalue="text" - 没有选中项时显示的默认值
事件：
onSelectSelectionChanged  = function (ltTarget,ltOwner,reason,behaviorParams) {}
控件选项变更

onSelectStateChanged  = function (ltTarget,ltOwner,reason,behaviorParams) {}
节点状态变更，例如树形节点展开或折叠子节点

快捷键：
UP / PAGE-UP - 上一节点
DOWN / PAGE-DOWN-  下一节点
HOME - 第一个节点
END - 最后一个节点
CTRL + DOWN - 显示下拉列表

十九、behavior:popup-selector 弹出菜单下拉框

1. 
   
2. <button type="selector">
   

复制代码

behavior: popup-selector 也可以实现下拉列表框,
区别是 popup-selector 是弹出一个菜单，并且多个popup-selector 可以共用同一个弹出菜单。


属性   
menu=“css-selector” - 使用CSS选择器指定要弹出的菜单，如果不指定此属性则使用子节点中的第一个<menu>或<popup>子节点
value=“string” - 初始值,菜单的li节点可以使用value属性指定值，点击菜单项时复制值到控件的<caption>标题节点,

示例1：

1. 
   
2.   <button type="selector" menu="menu#some-menu" />
   
3.   ...
   
4.   <menu id="some-menu">
   
5.      <li value="1">First</li>
   
6.      <li value="2">Second</li>
   
7.      ...
   
8.   </menu>
   

复制代码

示例2：

1. 
   
2.   <button type="selector">
   
3.     <caption>Select some value</caption>
   
4.     <menu>
   
5.        <li value="1">First</li>
   
6.        <li value="2">Second</li>
   
7.        ...
   
8.     </menu>
   
9.   </button>
   

复制代码

事件：
onButtonStateChanged 控件值变更

二十、behavior:popup-menu  弹出菜单


这个behavior类似 behavior: popup-selector 用于弹出一个菜单。
不同的是 popup-selector 主要是用来选中一个值（行为类似下拉列表框），
而 popup-menu 仅仅是单纯的弹出菜单，接收的事件也是菜单事件，没有控件选中值的概念。

属性   
menu=“css-selector” - 使用CSS选择器指定要弹出的菜单，如果不指定此属性则使用子节点中的第一个<menu>或<popup>子节点
align-popup= left | top | right | bottom 用于指定菜单的弹出方向，默认是bottom，也可以在CSS自定义属性中指定此值。

事件：
onMenuItemActive = function (ltTarget,ltOwner,reason,behaviorParams) {}
鼠标位于某菜单项上,ltTarget为激活的菜单项

onMenuItemClick = function (ltTarget,ltOwner,reason,behaviorParams) {}
点击菜单项，ltTarget为点击的菜单项

一个类似的behavior还有标准库中的 behavior:dropdown也是用来弹出节点，不过 dropdown 弹出的不是菜单页只是普通的popup节点，弹出节点的方法有很多，详细的请参考文章：HTMLayout 使用 popup 弹出节点

二十一、behavior:form 表单

1. 
   
2. <form>
   

复制代码

属性   
action=“url” - 提交地址
target=“frame-name” - 目标框架
method=“get” | “post” - 提交方法
enctype=“application/x-www-form-urlencoded” | “multipart/form-data” -  编码类型


方法：
ltEle.xcall("submit") - 提交表单
ltEle.xcall("reset") - 重置表单

事件：
onFormSubmit = function (ltTarget,ltOwner,reason,behaviorParams) {
        var formData = behaviorParams.data.getValue();
}
onFormReset = function (ltTarget,ltOwner,reason,behaviorParams) {}

二十二、behavior:scrollbar 滚动条

1. 
   
2. <input type="vscrollbar" />
   
3. <widget type="vscrollbar" /> - 竖向滚动条
   
4. <input type="hscrollbar" />
   
5. <widget type="hscrollbar" /> - 横向滚动条
   

复制代码

事件：
onScrollPos;onScrollHome;onScrollEnd;onScrollStepPlus;onScrollStepMinus;onScrollPagePlus;onScrollPageMinus;onSliderRelease

二十三、behavior:path-select 文件路径选框

1. 
   
2. <input type="file-path" /> - inline single line
   
3. <widget type="file-path"></widget>
   
4. <input type="folder-path" /> - inline single line
   
5. <widget type="folder-path"></widget>
   

复制代码

属性：
filter="filename-filter" - 定义文件类型，多个类型分组用';'分隔，每个类型分组使用 ':'分隔标题以及后缀名列表。

1. 
   
2. <input name="uploadedfile" type="file"
   
3.        filter="HTML files:*.htm,*.html;Text files:*.txt;All files:*.*"
   
4.        novalue="(select file)"/>
   

复制代码

novalue="text" -  指定控件值为空时显示的默认文本

事件：
onButtonStateChanged 控件值变更

二十四、behavior:file 文件上传控件

1. 
   
2. <input type="file" /> - inline single line
   
3. <widget type="file"></widget>
   

复制代码

属性、事件、用法与上面的behavior:path-select 类似，
但behavior:file 实现的是标准file控件， 放在<form enctype="multipart/form-data"> 里面可用于远程提交文件。
behavior:file 控件的值是只读的只能由用户在界面上指定（避免未经许可上传用户文件），而 behavior:path-select 的值可以编程修改。
behavior:path-select 则用于本地程序他的值只是一个文件路径 - 并且可以编程修改。

二十五、 behavior:plaintext 文本框控件

1. 
   
2. <textarea>...</textarea> – display:inline-block editor;
   
3. <plaintext>...</plaintext> – display:block editor;
   

复制代码

属性：
value=“text” - 文本框初始值
maxlength=integer -可包含的最大字符数
filter=“filter-expr” - 限制输入的字符表达式，可指定单个字符或指定字符范围，例如 “.@0~9a~zA~Z”表示允许所有数字字母, '.' 以及 '@'. 可以使用 '^' 前缀排除字符. 例如“^.,-” 允许所有除 '.', ',' 和 '-' 以外的字符。
novalue=“text” - 文本框为空时显示的默认值，在CSS中可以使用:empty指定显示默认值的样式。readonly 指定该属性则显示为只读模式。

事件：
onEditValueChanged 控件值已变更
onEditValueChanging 正在变更控件值

支持的快捷键：
LEFT, CTRL+LEFT, SHIFT+LEFT, CTRL+SHIFT+LEFT
RIGHT, CTRL+RIGHT, SHIFT+RIGHT, CTRL+SHIFT+RIGHT
HOME, SHIFT+HOME
END, SHIFT+END
BACKSPACE, ALT+BACKSPACE, CTRL+BACKSPACE
CTRL+A
DELETE, SHIFT+DELETE, CTRL+DELETE
INSERT, SHIFT+INSERT, CTRL+INSERT
CTRL+X
CTRL+V
CTRL+Z
CTRL+(LEFT)SHIFT and CTRL+(RIGHT)SHIFT

自定义函数
ltEle.xcall("selectionStart"): int - 返回选区开始位置
ltEle.xcall("selectionEnd"): int - 返回选区结束位置
ltEle.xcall("setSelection", start:int, end:int):void - 设置选区
ltEle.xcall("selectionText"): string - 返回选中文本
ltEle.xcall("insertText", text: string):void - 在光标处插入文本
ltEle.xcall("appendText", text: string):void - 追加文本
ltEle.xcall("canUndo"): bool - 是否可以撤消操作
ltEle.xcall("doUndo") - 撤消操作
ltEle.xcall("canRedo"): bool - 是否可以重做操作
ltEle.xcall("doRedo") - 重做操作
ltEle.xcall("canCut"): bool - 是否可以剪切
ltEle.xcall("doCut") - 剪切操作
ltEle.xcall("canCopy"): bool - 是否可复制
ltEle.xcall("doCopy") - 复制操作
ltEle.xcall("canPaste"): bool - 是否可粘贴
ltEle.xcall("doPaste") - 粘贴操作;
ltEle.xcall("canSelectAll"): bool - 当前是否已全选文本
ltEle.xcall("canSelectAll") - 全选文本


二十六、behavior:hyperlink 超链接

1. 
   
2. <a href="网址"></a>
   

复制代码

事件：

1. 
   
2. import process;
   
3. wbLayout.sinking = {
   
4.     onHyperlinkClick = function (ltTarget,ltOwner,reason,behaviorParams) {
   
5.         process.execute( ltTarget.href );
   
6.         return true;//阻止事件流继续传递
   
7.     }
   
8. }
   

复制代码

onHyperlinkClick 事件较特殊，必须写在 sinking过程里，具体请参考文章：HTMLayout 事件捕获与冒泡过程

二十七、behavior:column-resizer 可拖动调整列

这个behavior专用于table节点使表格的标题列可以拖动调整大小，相应的table标记内必须使用fixedrows=1属性指定首行不随滚动条移动（作为表格的标题栏）。

示例：

1. 
   
2. import win.ui;
   
3. /*DSG{{*/
   
4. var winform = win.form( bottom=399;parent=...;right=599;text="behavior:column-resizer" )
   
5. /*}}*/
   
6. 
   
7. import web.layout;
   
8. var wbLayout = web.layout(winform)
   
9. 
   
10. wbLayout.html = /**
    
11. <style>
    
12. table { background:#CCC;margin:10px;}
    
13. th{ background:#C12299;color:#FFF;min-width:180px; }
    
14. td{ background:#EEE;}
    
15. </style>
    
16. <table border=0 cellspacing=1 width=100% fixedrows=1 style="behavior:column-resizer;">
    
17.     <tr><th>可拖动调整大小</th><th>测试</th></tr>
    
18.     <tr> <td>测试</td>  <td>测试</td> </tr>         
    
19.     <tr> <td>测试</td>  <td>测试</td> </tr>
    
20.     <tr> <td>测试</td> <td>测试</td> </tr>
    
21.     <tr> <td>测试</td> <td>测试</td> </tr>         
    
22. </table>  
    
23. **/
    
24. 
    
25. winform.show()
    
26. win.loopMessage();
    

复制代码

其他一些仅用于显示特效的behaivior请参考HTMLayout自带范例：
用于走马灯效果的 behavior:marquee
用于实现水中倒影效果的 behavior:reflection
用于实现鱼眼特效的 behavior:magnifier

JacenHe

<include>
此标记允许你将一个外部HTML文件作为HTML代码片段包含到当前文档,有两种用法:

<include src="HTML片段文件URL" />  

<include src="HTML片段文件URL" >
    当读取外部文件失败时,可以显示这里的备选内容
</include>

下面是一个简单的示范:
doument-base.html 文件内容如下:

1. <html>
   
2.   <body>
   
3.     示范文件
   
4.     <include src="document-fragment.html">
   
5.     <em> 杯具! 打开 document-fragment.html 失败!</em>
   
6.   </include>
   
7.   </body>
   
8. </html>

复制代码

document-fragment.html 内容如下:

1. 
   
2. <P><p>这是HTML代码片段.</p>
   
3. <p>在这里你可以使用HTML代码</p></P>

复制代码

那么HTMLayout加载doument-base.html以后最终呈现的HTML如下

1. 
   
2. <P><html>
   
3.   <body>
   
4.     示范文件
   
5.     <p>这是HTML代码片段.</p>
   
6.     <p>在这里你可以使用HTML代码</p>
   
7.     <em> 杯具! 打开 document-fragment.html 失败!</em>
   
8.   </include>
   
9.   </body>
   
10. </html></P>

复制代码

在被包含的文件中,当前路径是包含他的文件所在目录.
也就是相对路径是相对于HTMLayout当前打开的页面,而不是被包含的文件.
储如href链接属性,图片src属性,嵌入HTML的CSS样式等都遵守此规则.

<widget>
该标记是类似于 <input> <select> 的内联块标记.
<widget> 基本类似 <input>,区别是可以扩展type属性,
除了可以使用标准库的类型 (input 节点可以使用的类型,例如: text, checkbox, radio, 等等. )

type 属性也可以定义为下面的值:
<widget type="select"> - 列表框;
<widget type="dropdown-select"> - 下拉列表;
<widget type="textarea"> - 文本框;
<widget type="htmlarea"> - HTML控件.
<widget> 必须与闭合标记 </widget> 配对使用.

根据HTML规范，input节点会被包含在一个匿名的文本容器中,例如:
<anonymous-text-container><input …/></anonymous-text-container>
而widget则不会这么做, 这样使用%或%%时计算相对高度时不会导致不必要的混淆．

另外 widget  也可以用于实现自定义控件，在aardio中
为 widget 节点对象声明cls,id等属性即可创建自定义控件，参考:
http://bbs.aardio.com/thread-5509-1-2.html

<popup>
该标记是block样式显示的块标记( 类似<div> ),
用于定义可在页面上弹出显示的节点, 默认的popup是隐藏不显示的.
一个常用的功能是使用<popup> 显示复杂些的工具提示(tooltips)

下面是一个简单的aardio范例：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="HTMLayout popup 工具提示";right=599 )
winform.add(  )
/*}}*/

import web.layout;  
wbLayout = web.layout(winform)

wbLayout.html = /**
<p titleid="my-html-title">把鼠标放在这里别动哦, 然后可以看到提示</p>
<popup id="my-html-title">
  这是一个 <em>示范</em>:<br/>
可以使用html的工具提示tooltip
</popup>
**/

winform.show()
win.loopMessage();

参考：http://www.terrainformatica.com/htmlayout/tags.whtm

kevinyau

不知道有没 richtext的自定义函数，htmlayout官方的链接好像失效了
http://terrainformatica.com/wiki/doku.php?id=h-smile:built-in-behaviors:richtext

lufeiyx

学习了

ggjy1997

请问 behavior: virtual-grid sample-data-source 中sendEvent事件中如何传递DATA_ROWS_PARAMS()结构，谢谢！

chin

请问HTMLayout的onDataArrived 事件要怎么写啊？