11.HTMLayout behavior 大全

编程语言 Mr.R 1年前 (2016-12-09) 550次浏览 已收录 7个评论 扫描二维码

这是能找到的最全的 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:

下载地址

注意:本段内容须成功“回复本文”后“刷新本页”方可查看!



修仙㊀群
修仙㊁群
R 大技术站 , 版权所有,如未注明 , 均为原创,如需转载请注明来源!
喜欢 (0)
[itdiy@qq.com]
分享 (0)
发表我的评论
取消评论

表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 来此一游
    netkkk2018-04-15 21:56 回复 Windows 7 | Chrome 53.0.2785.104
  2. 冰灵心里生出一丝异样,可她不甘心,凭什么林枫拥有那么多女人,他到底哪里优秀,所以今天便来测试一番,结果还不算失望。
    我是垃圾信息2018-04-08 03:12 回复 Windows 7 | 未知浏览器
  3. 看上去很厉害的样子
    qw2017-11-17 21:01 回复 Windows XP | Firefox浏览器 52.0
  4. 看看
    lioncn2017-10-01 21:51 回复 Windows 10 | Chrome 61.0.3163.100
  5. 看上去很厉害的样子
    howru2017-08-16 00:27 回复 Windows 10 | Chrome 45.0.2454.101
  6. 已经很全了
    Vivian2017-07-24 13:55 回复 Windows 10 | Chrome 50.0.2661.102
  7. 看看
    yy2016-12-16 19:05 回复 Windows 7 | Chrome 49.0.2623.75