11.HTMLayout behavior 大全

这是能找到的最全的 htmlayout behavior 了，如有遗漏欢迎补全！！！

behavior:none

behavior:gird  //网格控件
behavior:sortable-grid
behavior:virtual-grid
behavior:sample-data-source //virtual-grid 数据源
behavior:colum-resizer // table 列宽调整 table 标记内可以使用 fixedrows="1"指定首行不随滚动条移动

behavior:tree //树形视图控件
behavior: tree-checkmarks;
-option- - 表示一个列表项.
-optgroup- - 列表项分组
属性
size="N" N 是大于 1 的数，指定显示行数，显示 1 行时为下拉列表，显示多行列表框
checkmarks - 是否显示复选框，其外观在 master CSS 中定义，可在 CSS 中自行义外观

behavior:select //列表框
behavior:dropdown-select //才是下拉框 size=1
behavior:editable-select //带复选框的列表
behavior:select scroller //滚动选择列表
size=“N” - N 是大于 1 的数，指定显示行数，显示 1 行时为下拉列表，显示多行列表框
multiple 是否允许选中多个列表项
multiple=“checks” - 显示复选框
editable - 如果为真，标题子节点 caption 将应用 behavior:edit，并且控件的 value 属性值也指向 edit 控件的当前值。
novalue="text" - 没有选中项时显示的默认值

behavior:scroller //滚动条 type="vscrollbar" type="hscrollbar"
behavior: scroll-bar;
behavior:shell-icon //图标 需要指定文件名字或类型 filename=".jpg"
behavior:file-icon; -icon-size:"large"; //文件图标及默认大小设置
behavior:path //显示路径 overflow-x:hidden;white-space:nowrap; //必须一起用
behavior:path-select //文件路径选框 path-select 用于本地程序他的值只是一个文件路径 - 并且可以编程修改。
type="folder-path"
type="file-path"
filter="filename-filter" - 定义文件类型，多个类型分组用';'分隔，每个类型分组使用 ':'分隔标题以及后缀名列表。
behavior:file //文件上传控件 标准 file 控件， 放在 form enctype="multipart/form-data" 里面可用于远程提交文件。
behavior:sizer //调整大小
behavior:~ sizer;-resize: vertical; //限制方向

behavior:splitter cursor:w-resize; cursor:n-resize; //分隔条
behavior:slider //滑块 type="vslider"垂直方向 type="hslider" 水平方向
属性
value - integer, 初始值.
min - integer, 最小数值
max - integer, 最大数值
step - integer, 步进值,默认为 1
buddy - string, 同步显示控件值的节点 ID

behavior:accesskeys actions; //快捷键
示例：
accesskey="^E"
accesskey="!NUMPAD7"
accesskey="!DECIMAL"
behavior:chart //图表

behavior:expandable-list //折叠列表
behavior:collapsible-list //折叠列表
behavior:collapsible-by-icon //折叠列表 Toggle 'state' to 'open' and 'close'.class = icon

behavior:tabs //选项卡

ltTabs.xcall("select","选项卡名字"); //选择一个页面
ltTabs.xcall("close","选项卡名字"); //关闭一个页面
ltTabs.xcall("open ","选项卡标题","框架页网址","选项卡名字"); //打开一个页面
ltTabs.xcall("create","选项卡标题","选项卡名字","子页面 HTML"); //使用 HTML 代码新建一个页面

behavior:progress //进度条
value=float - 进度值
maxvalue=float - 最大值
-bar:"clip"; - 进度条会剪切显示前景图 （始终不改变原图大小）
behavior:clock //时钟
behavior:graphin-clock
behavior:calendar //日历
behavior:date //日期 value="today"
behavior:time //时间 no-seconds value="now"
behavior:frame //框架
behavior:frame-set  //rows="*,100px" cols="*,*"
behavior:history
behavior:pager
属性
src="url.html" - 框架内加载网页地址
content-style="url.css" - 添加样式到框架页面
可以在 CSS 中使用 :busy 状态指定正在加载框架时的样式

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

behavior:select-buddy
role="destination"
action="move-all" move-selected revoke-selected revoke-all

behavior:url; type="url"
behavior:hyperlink //超链接 -target:"sandbox"; onHyperlinkClick 事件较特殊，必须写在 sinking 过程里
behavior:clickable //无焦点按钮
behavior:button //按钮 value="caption" - 按钮标题
behavior:radio //单选框
behavior:switch //单选按钮 鼠标左键按下时（而不是放开时）切换选中状态。
behavior:check //复选框
behavior:password //密码框 password-char="占位符"
behavior: masked-edit; //type="masked" mask="( ### ) ### - ####"
behavior:number //数字框
behavior:decimal ;-format="fdigits:2; leading-zero:true;"
behavior:currency //货币数值输入框控件

属性
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 - 是否显示负号
currency - 货币符号
currency-after - 货币符号是否显示在数值后面

currency 控件会自动更新下面两个属性
invalid - 当前输入了无效的值
negative - 负数

自定义函数
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) - 设置|或清除步进值，设置了该值以后后会显示滚动选框
behavior:edit //可编辑 tpye ="text"
value=“text” - 文本框初始值
size=integer - 文本框宽度
maxlength=integer -可包含的最大字符数
filter=“filter-expr” - 限制输入的字符表达式，可指定单个字符或指定字符范围，例如 “.@0~9a~zA~Z”表示允许所有数字字母, '.' 以及 '@'. 可以使用 '^' 前缀排除字符. 例如“^.,-” 允许所有除 '.', ',' 和 '-' 以外的字符。
novalue=“text” - 文本框为空时显示的默认值，在 CSS 中可以使用:empty 指定显示默认值的样式。

支持的快捷键：
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:htmlarea //超文本框 tabindex=0
behavior:plaintext //文本框

toolbar="widget.toolbar"

content-style="content.css"

allow-clipboard-images

objects-list="ul#current-objects"

behavior:richtext //

属性：
value=“text” - 文本框初始值
maxlength=integer -可包含的最大字符数
filter=“filter-expr” - 限制输入的字符表达式，可指定单个字符或指定字符范围，例如 “.@0~9a~zA~Z”表示允许所有数字字母, '.' 以及 '@'. 可以使用 '^' 前缀排除字符. 例如“^.,-” 允许所有除 '.', ',' 和 '-' 以外的字符。
novalue=“text” - 文本框为空时显示的默认值，
在 CSS 中可以使用:empty 指定显示默认值的样式。readonly 指定该属性则显示为只读模式。
自定义函数
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:form //表单
button name="Submit" type="submit"
button name="Reset" type="reset"
属性
action=“url” - 提交地址
target=“frame-name” - 目标框架
method=“get” | “post” - 提交方法
enctype=“application/x-www-form-urlencoded” | “multipart/form-data” - 编码类型

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

behavior:hover-click

behavior:menu //菜单  type="menu" align-popup="right"
behavior:menu-bar //菜单栏 子节点中的-li-节点或 HTML 属性中指定了 role="menu-item"作为菜单项处理
behavior:popup-menu //弹出菜单 仅仅是单纯的弹出菜单，接收的事件也是菜单事件，没有控件选中值的概念。
属性
menu=css-selector - 使用 CSS 选择器指定要弹出的菜单，如果不指定此属性则使用子节点中的第一个 menu 或-popup-子节点
align-popup= left | top | right | bottom 用于指定菜单的弹出方向，默认是 bottom，也可以在 CSS 自定义属性中指定此值
behavior:popup-selector //弹出菜单下拉框
属性
menu=“css-selector” - 使用 CSS 选择器指定要弹出的菜单，如果不指定此属性则使用子节点中的第一个-menu-或-popup-子节点
value=“string” - 初始值,菜单的 li 节点可以使用 value 属性指定值，点击菜单项时复制值到控件的-caption-标题节点,

behavior:dropdown //弹出框
behavior:popup //弹框
behavior:light-box-dialog //模态弹框

role='ok-button'  确定按钮

role='cancel-button' 取消按钮

ltEle.xcall("show")

ltEle.xcall("hide")

behavior:windowSizer //窗口缩放

sizer-command:hitTopleft  hitLeft  hitBottomleft  hitTop  hitBottom   hitTopright  hitRight   hitBottomright

HTML behavior:font-size; //字体
HTML[zoom="1" font-size:xx-small;
HTML[zoom="2"font-size:x-small;
HTML[zoom="3" font-size:small;
HTML[zoom="4" font-size:medium;
HTML[zoom="5" font-size:large;
HTML[zoom="6" font-size:x-large;
HTML[zoom="7" font-size:xx-large;
behavior:gripper //拖拽 accept-drop:selector( div.toolbar ); drop:insert;

behavior:selectionBox  //鼠标选框

behavior:marquee //跑马灯
-marquee: horizontal; vertical
-marquee-direction: forward;
-marquee-style: scroll; alternate slide
-marquee-play-count:1; /* playing once */
-marquee-speed:slow normal fast

behavior:reflection //水中倒影
-reflection-opacity-start: 0.4;
-reflection-opacity-end: 0.0;
-reflection-blur-radius: 3;

behavior:magnifier //鱼眼特效
magnify='widget[type="button",table' magnification=4.0 magnification-step=0.3 radius-x=300 radius-y=100
~ actions
~ richtext-current-objects

command
command="window-caption"
command="window-close"
command="window-min"
command="window-max"
command="window-restore"
-command:disabled

edit richtext: //编辑框 文本框右键
behavior:edit:undo Ctrl+Z
behavior:edit:cut Ctrl+X
behavior:edit:copy Ctrl+C
behavior:edit:paste Ctrl+V
behavior:edit:selectall Ctrl+A

richtext：
richtext:paste-plain-text HTML 转换为文本
richtext:paste-text-as-html 粘贴 HTML 代码
richtext:paste-html-no-tables 粘贴 HTML 格式(移除表格)
richtext:merge-cells 合并单元格 Backspace
richtext:split-cells-by-rows Ctrl+1 拆分行
richtext:split-cells-by-cols Ctrl+2 拆分列
richtext:strong
richtext:em
richtext:code
richtext:p
richtext:h1 h2 h3 h4 h5 h6
richtext:pre
richtext:li-ul
richtext:li-ol
richtext:indent-dec
richtext:indent-inc
richtext:show-rulers
用法：
command="behavior:edit:undo"
command="richtext:undo"
快捷键配合 class="accesskey"

这是能找到的最全的 htmlayout behavior 了，如有遗漏欢迎补全！！！

role:

role="option"

role="default-button"
role="cancel-button"

role="source"
role="destination"

role="dropdown"

role:"menu-item"

role="page-tab-list"
role="page-tab"

popup[role=tooltip]
popup[role="overflow-tooltip"]

//右键菜单

.with-context-menu{context-menu:selector(menu#for-htmlarea);

.with-context-menu-ext{context-menu: url(c-menu.htm)

option:nth-child(odd){context-menu: selector(menu#option-odd);

标签相关：

<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 则不会这么做, 这样使用%或%%时计算相对高度时不会导致不必要的混淆．

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

详细使用请参考官方 demo：

下载地址

[/content_hide]