搜索
aardio官方社区 门户 查看主题

HTMLayout内置behavior大全

发布者: quicker | 发布时间: 2012-5-30 09:47| 查看数: 10408| 评论数: 5|帖子模式

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

  1. import win.ui;
  2. /*DSG{{*/
  3. winform = win.form(text="HTMLayout behavior:clickable";right=599;bottom=399)
  4. /*}}*/

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

  7. //下面的自定义behavior追加到节点上,用于处理事件
  8. namespace web.layout.behavior.eventhandler {  

  9.         onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
  10.                 ltOwner.innerText = "单击事件"
  11.         }
  12.        
  13.         onButtonPress = function (ltTarget,ltOwner,reason,behaviorParams) {
  14.                 ltOwner.innerText = "当前节点得到焦点时,按下鼠标左键或空格键"
  15.         }
  16.        
  17.         onMouseClick = function( ltTarget,ltOwner,x,y,ltMouseParams ) {
  18.                 ltOwner.innerText = "behavior中移除clickable以后单击触发onMouseClick事件而不是onButtonClick"
  19.         }
  20. }

  21. wbLayout.html =/***
  22. <div style="behavior:'eventhandler clickable';background:#FFFF00;padding:10px;">请点击这里</div>
  23. ***/

  24. winform.show()
  25. win.loopMessage();
复制代码

二、 behavior:edit 文本框控件

  1. <input type="text" />
  2. <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. <input type="decimal" />
  2. <widget type="decimal"></widget>
  3. <input type="number" />
  4. <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. <input type="currency" />
  2. <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. <button></button>
  2. <input type="button" />
  3. <widget type="button"></widget>
  4. <input type="reset" />
  5. <input type="submit" />
  6. <button><img src=.../> 可以使用HTML指定按钮标题</botton>
复制代码
属性   
value="caption" - 按钮标题

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

六、behavior:check 复选框控件

  1. <input type="checkbox">  
  2. <widget type="checkbox">
  3. <button type="checkbox">caption</button>
  4. <input type="checkbox" mixed> - 三态选框,inline节点。
  5. <widget type="checkbox" mixed> -  三态选框,block节点。
  6. <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. <input type="radio">  
  2. <widget type="radio">
  3. <button type="radio">caption</button>  
复制代码
属性   
checked 用于指定初始值,运行时的值应使用 ltEle.state.checked 获取。
checked=true - 选中
checked=false - 取消选中

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


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

九、behavior:progress 进度条控件

  1. <progress /> - inline节点
  2. <input type="progress" /> - inline节点
  3. <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. <input type="time" value="14:15:00" />
  2. <widget type="time" value="14:15:00" ></widget>
复制代码
属性   
value=“HH:MM:SS” 或者 value=“now” - HH使用24小时制,now为当前时间
no-seconds - 是否需要秒数

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

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

  1. <input type="password"/>
  2. <widget type="password"></widget>
复制代码


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

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

  1. <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. <ul #menu-bar>
  2.      <li>Menu item with sub-menu
  3.          <menu #sub-menu>
  4.             <li>Open</li>
  5.             <li>Close</li>
  6.          </menu>
  7.      </li>
  8.      <li>Simple menu item (no submenu)</li>
  9.   </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. <menu class="popup">
  2. <menu class="context">
复制代码
子节点中的<li>节点或HTML属性中指定了role="menu-item"作为菜单项处理

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

  1. <menu .popup>
  2. <li>Open</li>
  3. <li>Close</li>
  4. </menu>
复制代码
事件:
onMenuItemActive = function (ltTarget,ltOwner,reason,behaviorParams) {}
鼠标位于某菜单项上,ltTarget为激活的菜单项

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

十五、behavior:slider 滑块控件

  1. <input type="hslider"> - 水平滑块, inline block;
  2. <widget type="hslider"> - 水平滑块, block;
  3. <input type="vslider"> - 竖向滑块, inline block;
  4. <widget type="vslider"> - 竖向滑块, block;
复制代码
属性   
value - integer, 初始值.
min - integer, 最小数值
max - integer, 最大数值
step - integer, 步进值,默认为1
buddy - string, 同步显示控件值的节点ID

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

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

  1. <select type="tree">…</select>
  2. <select type="tree" checkmarks>…</select>
  3. <widget type="tree">…</widget>
  4. <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. <select size=N>…</select> , N是大于1的数,指定显示行数,显示1行时为下拉列表,显示多行列表框
  2. <select type=“select”>…</select> 注意这里即使size=1也会显示为select,而不是下拉框(dropdown-select)
  3. <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. <select>…</select>
  2. <select size=1>…</select>
  3. <select type="select-dropdown">…</select>
  4. <widget type="select-dropdown">…</widget>
复制代码
这个控件实际上是select控件显示为下拉框时应用的behavior,
此behavior将节点创建为以下结构(CSS写样式要按下面的结构修改子节点外观):

  1.   <select>
  2.     <caption>标题</caption>
  3.     <button>按钮</button>
  4.     <popup>
  5.       <option>列表项</option>
  6.       <option>列表项</option>
  7.       <option>列表项</option>
  8.     </popup>
  9.   </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. <button type="selector">
复制代码
behavior: popup-selector 也可以实现下拉列表框,
区别是 popup-selector 是弹出一个菜单,并且多个popup-selector 可以共用同一个弹出菜单。


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

示例1:

  1.   <button type="selector" menu="menu#some-menu" />
  2.   ...
  3.   <menu id="some-menu">
  4.      <li value="1">First</li>
  5.      <li value="2">Second</li>
  6.      ...
  7.   </menu>
复制代码
示例2:

  1.   <button type="selector">
  2.     <caption>Select some value</caption>
  3.     <menu>
  4.        <li value="1">First</li>
  5.        <li value="2">Second</li>
  6.        ...
  7.     </menu>
  8.   </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. <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. <input type="vscrollbar" />
  2. <widget type="vscrollbar" /> - 竖向滚动条
  3. <input type="hscrollbar" />
  4. <widget type="hscrollbar" /> - 横向滚动条
复制代码
事件:
onScrollPos;onScrollHome;onScrollEnd;onScrollStepPlus;onScrollStepMinus;onScrollPagePlus;onScrollPageMinus;onSliderRelease

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

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



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

  1. <input name="uploadedfile" type="file"
  2.        filter="HTML files:*.htm,*.html;Text files:*.txt;All files:*.*"
  3.        novalue="(select file)"/>
复制代码
novalue="text" -  指定控件值为空时显示的默认文本

事件:
onButtonStateChanged 控件值变更

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

  1. <input type="file" /> - inline single line
  2. <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. <textarea>...</textarea> – display:inline-block editor;
  2. <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. <a href="网址"></a>
复制代码
事件:

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

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

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

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

示例:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form( bottom=399;parent=...;right=599;text="behavior:column-resizer" )
  4. /*}}*/

  5. import web.layout;
  6. var wbLayout = web.layout(winform)

  7. wbLayout.html = /**
  8. <style>
  9. table { background:#CCC;margin:10px;}
  10. th{ background:#C12299;color:#FFF;min-width:180px; }
  11. td{ background:#EEE;}
  12. </style>
  13. <table border=0 cellspacing=1 width=100% fixedrows=1 style="behavior:column-resizer;">
  14.     <tr><th>可拖动调整大小</th><th>测试</th></tr>
  15.     <tr> <td>测试</td>  <td>测试</td> </tr>         
  16.     <tr> <td>测试</td>  <td>测试</td> </tr>
  17.     <tr> <td>测试</td> <td>测试</td> </tr>
  18.     <tr> <td>测试</td> <td>测试</td> </tr>         
  19. </table>  
  20. **/

  21. winform.show()
  22. win.loopMessage();
复制代码

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

最新评论

Jacen.He 发表于 2016-6-4 23:50:23

[b][size=7][/size][/b] 此标记允许你将一个外部HTML文件作为HTML代码片段包含到当前文档,有两种用法:

<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. <P><p>这是HTML代码片段.</p>
  2. <p>在这里你可以使用HTML代码</p></P>
复制代码
那么HTMLayout加载doument-base.html以后最终呈现的HTML如下

  1. <P><html>
  2.   <body>
  3.     示范文件
  4.     <p>这是HTML代码片段.</p>
  5.     <p>在这里你可以使用HTML代码</p>
  6.     <em> 杯具! 打开 document-fragment.html 失败!</em>
  7.   </include>
  8.   </body>
  9. </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 发表于 2016-5-5 22:44:30

不知道有没 richtext的自定义函数,htmlayout官方的链接好像失效了 http://terrainformatica.com/wiki/doku.

不知道有没 richtext的自定义函数,htmlayout官方的链接好像失效了
http://terrainformatica.com/wiki/doku.php?id=h-smile:built-in-behaviors:richtext
lufeiyx 发表于 2016-5-22 18:06:28

学习了

学习了
ggjy1997 发表于 2016-9-3 20:34:43

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

请问 behavior: virtual-grid sample-data-source 中sendEvent事件中如何传递DATA_ROWS_PARAMS()结构,谢谢!
chin 发表于 2017-5-22 00:28:50
请问HTMLayout的onDataArrived 事件要怎么写啊?

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-9-22 07:10 , Processed in 0.140625 second(s), 25 queries , Wincache On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表