<!-- 引用一个外部文件的内容 -->

<include src="header.htm" />

<!-- 引用一个外部文件的内容. 在找不到文件时显示 "Missing: layout.htm"  -->

<include src="layout.htm">

      Missing: layout.htm

</include>

<menu id="MY_MENU">

      <!-- 一般的菜单项 -->

      <li>Menu Item</li>

      <!-- 带图标和快捷键标签的菜单项 -->

      <li>

            <div class="icon"/>

            Menu Item with Icon and Shortcut Label

            <span mx-hotkey-label="{command.id}">

      </li>

      <!-- 横线分隔符 -->

      <hr/>

      <!-- 子菜单 -->

      <li>

            Sub Menu

            <menu>

                  <li>Sub Menu Item 1</li>

                  <li>Sub Menu Item 2</li>

            </menu>

      </li>

      <!-- 带子菜单的命令 -->

      <div class="split-button">

            <li>Menu Item</li>

            <li class="arrow">

                  <menu>

                        <li>Child Item 1</li>

                        <li>Child Item 2</li>

                  </menu>

            </li>

      </div>

</menu>

选择符

说明

div:not(:first-child)

"非"状态选择符.

范例为匹配所有不是第一个子元素的 div 元素.

div[foo^="val"]

匹配foo属性值以"val"开头的 siv 元素.

div[foo$="val"]

匹配foo属性值以"val"结尾的div元素.

div[foo*="val"]

匹配foo属性值中含有"val"字串的div元素.

tr:nth-child(An+B)

匹配父元素里以A个为一组的每组中的第B个div元素.

tr:nth-last-child(An+B)

匹配父元素里以A个为一组的每组中的倒数第B个div元素.

button:only-child

匹配父元素里唯一的 button 子元素.

input:only-of-type

匹配父元素里唯一使用了input标记的子元素.

a:focus

匹配拥有焦点的 a 元素.

a:tab-focus

匹配通过按 TAB 件获得焦点的 a 元素.

option:current

匹配一组元素中具有当前状态的 option元素.

input:checked

匹配被选定的 input 元素. 用于具有 checkbox, radio, select 等行为的元素.

input:disabled

匹配被禁用的 input元素.

input:read-only

匹配只读的input元素.

input:empty

匹配内容为空的 input元素.

div:has-child

匹配只含有一个子元素的 div 元素.

div:has-children

匹配含有多个子元素的 div 元素.

menu:popup

匹配被作为弹出菜单或面板显示的menu元素.

button:owns-popup

匹配触发了弹出行为且弹出菜单或面板处于可见状态的 button 元素.

div:drop-target

匹配在拖放操作中可以接受被拖放对象的div元素.

div:drag-over

匹配在拖放操作中鼠标所处的可接受被拖放对象的 div元素.

li:moving

匹配正以移动模式被拖放的li元素.

li:copying

匹配正以副本模式被拖放的li元素. (原元素的一个副本)

li:drag-source

匹配被拖放的源li元素.

li:drop-marker

匹配指示拖放目的位置的li元素. (原元素的一个副本)

/* checkbox button */

a[type="check"]{

      behavior: check;

      display: inline-block;

      cursor: pointer;

      margin: 2 0;

      padding: 0 4 0 22;

      min-width: 22px;

      min-height: 18px;

      line-height: 18px;

      white-space: pre;

      text-decoration:none;

      background: url(images/check.png) no-repeat 0% 50%;

}

a[type="check"]:checked{

      background-image:url(images/checked.png);

}

行为

简介

behavior: button;

按钮行为.

附加了此行为的元素会具有标准的按钮行为.

属性:

·         value="caption"  -  按钮标题文本

状态:

·         :hover  -  悬停

·         :active  -  按下

·         :focus  -  获得焦点

·         :disabled  -  被禁用

behavior: clickable;

将元素变为可点击.

附加了此行为的元素才能在点击后触发程序的消息.

与 button行为的唯一不同是具有此行为的元素不会获得焦点.

状态:

·         :hover  -  悬停

·         :active  -  按下

·         :disabled  -  被禁用

behavior: check;

复选框行为.

属性:

·         checked  -  初始选定状态. 取值范围:  "true", "false", "undefined"(半选定状态).

·         mixed  -  半选定状态.

状态:

·         :hover  -  悬停

·         :active  -  按下

·         :focus  -  获得焦点

·         :disabled  -  被禁用

使用中会出现比较复杂的复合状态, 例如:

      input[type="check"][mixed]:checked:disabled

behavior: radio;

单选框行为.

属性:

·         name="group"  -  用于区分单选框组(必须)

·         value="0"  -  对应选项的值

状态:

·         :hover  -  悬停

·         :active  -  按下

·         :focus  -  获得焦点

·         :disabled  -  被禁用

behavior: edit;

文本输入框行为.

属性:

·         value=“text”  -  初始文本.

·         size="20"  -  元素的初始宽度.

·         maxlength="12"  -  最大文本长度.

·         filter=“0~9”  -  限制可输入的字符内容. 支持单个字符或字符范围.

o   ”.@0~9a~zA~Z”  -  允许输入所有字母和数字以及 . 和 @ 字符(email).

o   “^.,-”  -  允许输入除 . , - 之外的任意字符.  ^ 作为排斥标记使用.

·         novalue=“please input”  -  如果文本框为空, 则显示此属性指定的文本.

o   你可以通过 :empty 伪类来修改这个提示文本的样式.

状态:

·         :hover  -  悬停

·         :focus  -  获得焦点

·         :disabled  -  被禁用

·         :empty  -  内容为空

behavior: password;

密码框输入行为.

属性和状态同 behavior: edit;

额外的属性:

·         password-char=“#”  -  指定密码提示字符为 #.

behavior: select;

下拉列表框行为.

内部结构同 HTML中的 <select>元素用法.

列表条目元素为 <option> 元素或具有 role="option" 属性的元素.

属性:

·         size="8"  -  显示为多行选择列表框.

·         multiple   -  允许多选

·         multiple="checks"  -  允许多选, 且每个条目前显示复选框.

状态:

·         option:current  -  当前选定的条目.

behavior: menu;

菜单行为.

此行为定义了一个菜单元素.

此元素中包含的 <li> 元素和具有 role="menu-item" 属性的元素会被当作菜单项对待.

鼠标悬停的菜单项元素会被赋予 :current 状态.

菜单元素被调用时, 它的父元素会被设置为调用它的元素.

behavior: menu-bar;

菜单栏行为.

此行为与菜单的唯一不同.

behavior: popup-menu;

打开弹出菜单.

具有该行为的元素在点击后会打开子元素中的第一个 <menu> 或<popup>元素作为菜单. 如果有设置 menu 属性, 则打开其中css选择符对应的元素.

属性:

·         menu="#MENU_ID"  -  指定要弹出的菜单元素. 取值为css选择符.

·         align-popup="top"  -  指定弹出菜单的位置. "top", "left", "right", "bottom"(默认).

behavior: progress;

进度条行为.

被绑定此行为的元素, 其前景图像会按比例拉伸,作为进度条绘制.

属性:

·         value="5.1"  -  当前值. 可以是小数.

·         maxvalue="100"  -  最大值. 可以是小数.

behavior: path;

路径缩略显示行为.

将过长的路径显示为中间加省略号的缩略形式.

例如:

"\root\test\appp123456\assets\scripts\character\max.dat" 显示为:

"\root\test\appp123….\max.dat"

behavior: file-icon;

文件图标显示行为.

如果没有指定大小. 此行为会提取最符合显示区域大小的图标显示.

属性:

·         filename="test.exe"  -  获取指定可执行文件的图标

·         filename=".doc"  -  获取指定扩展名的系统图标

·         filename="."  - 文件夹图标

·         filename=".."  -  驱动器图标

·         filename="\\"  -  我的电脑图标

·         icon-size="small"  -  图标大小. 可取值: "small", ”large”. 默认为 "small".

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}

事件

说明

hover-on!

hover-off!

鼠标悬停/离开时触发

active-on!

active-off!

鼠标按下/抬起时触发

click!

鼠标单击时触发

focus-on!

focus-off!

获得/失去焦点时触发

key-on!

key-off!

键盘的按键按下/抬起时触发

通过 key-code() 函数获取按键信息.

key-code() 获得的按键信息可能是一个用单引号包含的有效字符('a', '4', '$')或是下列预定义值之一:

'RETURN', 'LEFT', 'RIGHT', 'UP', 'DOWN', 'PRIOR', 'NEXT', 'TAB', 'HOME', 'END', 'DELETE', 'INSERT', 'BACK'

assigned!

所属的样式被应用到元素上时触发

value-changed!

元素的值发生变化时触发

validate!

表单提交前的数据验证事件

timer!

定时触发器

配合 start-timer(ms) 和 stop-timer() 函数使用.

start-timer(ms) 中的参数单位为毫秒.

animation-start!

animation-step!

animation-end!

动画控制事件

animation-start! 在调用了元素的 element.start-animation() 方法后触发.

animation-step! 事件处理的最后必须返回一个整数(下次执行的间隔毫秒数). 例如: return 500;

如果animation-step! 返回的是 return cancel; 则动画中止, 同时触发 animation-end! 事件.

size-changed!

元素大小发生改变时触发

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}

事件

说明

$1(.item)

获取匹配 ".item" 的第一个元素

$(.item)

获取所有匹配 ".item" 的元素.
类似aardio中的wbLayout.queryEles()函数

ele.$1(.item)

获取ele子元素中匹配".item"的第一个元素

ele.$(.item)

获取ele子元素中匹配".item"的所有元素
类似aardio中的ele.queryElements()函数

ele.$1p(.item)

获取父元素中匹配".item"的最近的一个元素.

ele.$p(.item)

获取父元素中所有匹配".item"的元素.

ele.parent()

获取父元素

ele.next()

获取同级的下一个元素

ele.previous()

获取同级的上一个元素

ele.child(3)

ele.children()

获取第3个子元素. 参数范围 1 … ele.children().

可以通过 ele.children() 获取子元素的数目.

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}

语句

说明

ele:hover = false,

ele:disabled = true,

通过":"访问元素的状态.
在aardio中等价的写法是： ele.state.状态名 = 状态值

ele.value = "string",

ele.name = "my_elem",

ele.disabled = true,

ele.title = null,

通过"."访问元素的属性值.
在aardio中等价的写法是： ele.属性名 = 属性值

注意部分属性值和状态是相互有关联的.
要删除一个属性, 只需要赋值 null给它即可.

ele::width = 56px,

ele::display = "none",

通过"::"访问元素的CSS样式属性.
在aardio中等价的写法是： ele.style.样式名 = 样式值

状态

说明

ele:value

元素DOM节点的值.

对于输入框这个值为输入的文本. 其他元素为内部的文本.

ele:index

元素在子元素的序号. 取值从 1 开始到 self.parent().children()

ele:hover

ele:active

ele:empty

ele:readonly

ele:disabled

ele:focusable

部分CSSS!中常用的布尔型状态. (true/false)

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}

方法

说明

ele.start-timer(500)

开始触发元素的 timer! 事件. 参数为间隔的毫秒数.

调用 ele.stop-timer() 或return cancel; 可以结束触发.

ele.stop-timer()

停止触发 timer! 事件.

ele.scroll-to-view()

滚动页面, 保证元素可见.

ele.box-type-what()

这是个组合函数, 通过不同的 type 和 what 取值, 可以组合出多个函数.

type 可取值:

·         margin - 元素的 margin 框

·         border - 元素的边框

·         padding - 元素的padding 框

·         content - 元素的内容框(内容的外轮廓).

·         inner - 元素的内部框

what 可取值:

·         left - 框的左坐标

·         right - 框的右坐标

·         top - 框的上坐标

·         bottom - 框的下坐标

·         width - 框的宽度

·         height - 框的高度

ele.x-what()

ele.y-what()

获取元素的相对x,y坐标.

what的取值可以是:

·         parent - 相对于父元素的坐标值

·         root - 相对于根元素(<html>)的坐标值

·         view - 相对于当前窗口视图(window)的坐标值;

·         screen - 元素在屏幕上的绝对坐标

ele.start-animation()

开始元素动画.

触发动画事件 animation-start! 和 animation-step!  在 return cancel 时触发 animation-end! 事件.

ele.text-width("string")

返回以当前元素样式显示时, 输入字符串 "string" 的宽度(以像素计算)

ele.min-intrinsic-width()

ele.max-intrinsic-width()

ele.min-intrinsic-height()

ele.max-intrinsic-height()

获取元素的内容最小/最大宽高.

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}

.item {

      hover-on! :

            ele = $1( input.url ) ,

            ele:empty == true ?

                  (self.value = "empty") #

                  (self.value = "filled"),

            ele:hover = true,

            self::width = ele.box-content-width(),

            self.$(.icon) -> @(ele) ele::background = "#CCC"

      ;

}