利用 behavior 属性控制元素行为

lujjjh

一、behavior 是什么？

behavior 是界面引擎为了满足交互需求而扩展的特殊css属性.

通过为元素设定 behavior, 可以为几乎任意元素附加上交互行为, 从而将元素改造成具有特定功能的按钮,输入框等控件.

所有的behavior 都是预先通过程序写好的.

behavior 是 HTMLayout 在 CSS 上扩展出来的一个特殊的属性，可以改变任意元素的行为。

二、behavior 怎么用？

举个例子，我们希望给一个 div 加入可编辑的行为，可以这样写：

1. <div style="behavior: edit;">这里可以被编辑</div>

复制代码

HTMLayout 内置有许多“behavior”，当然我们也可以自己写 behavior。
内置的 behaviors 有以下这些（摘自：http://bbs.aardio.com/doc/htmlayout/HTMLLayoutDocMx3.htm）

行为	简介
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".

三、behavior 有什么实际用途？

利用 behavior，我们可以改变任意元素的行为。通过改变元素的行为，我们可以建立自己的控件，或者自定义控件的样式。

下面是一个应用的例子，通过 behavior 属性将 a 元素自定义成单选框、复选框、按钮控件并且加入自己的样式：



完整代码：

import win.ui;
/*DSG{{*/
var winform = win.form( bottom=271;scroll=1;text="aardio Form";right=407;parent=...)
winform.add(  )
/*}}*/

import console;

import web.layout;
import web.layout.element.state;

var wbLayout = web.layout(winform);

getRadioValue = function (name) {
    var eles = wbLayout.getEles(name);
    for ( i, ele in (wbLayout.getEles(name)) )
        if (ele.state.checked)
            return ele.getAttribute("value");
}

getCheckBoxValues = function (name) {
    var result = {};
    for ( i, ele in (wbLayout.getEles(name)) )
        if (ele.state.checked)
            table.push(result, ele.getAttribute("value"));
    return result;
}

wbLayout.onButtonClick = function (layoutEle,reason,behaviorParams) {
    select (layoutEle.id) {
        case "submit" {
            console.log( getRadioValue("sex") );
            console.log( getRadioValue("from") );
            console.varDump( getCheckBoxValues("hobbies") );
        }
    }
}

var html = /**
<html>
<head>
<style>
html { font: system; }
a, img { vertical-align: middle; }
a img {
    width: 16px;
    height: 16px;
}

dd { margin: 4px 0; }

a[type="radio"],
a[type="checkbox"],
a[type="button"] {
    margin: 1px;
    padding: 4px;
    display: inline-block;
    border: 1px solid #ccc;
    line-height: 16px;
}
a[type="radio"]:checked,
a[type="checkbox"]:checked,
a[type="button"]:active {
    margin: 0;
    border: 2px solid #ff6701;
}
a[type="button"]:hover {
    color: #ff6701;
}
a[type="radio"]:focus,
a[type="checkbox"]:focus,
a[type="button"]:focus {
    outline: 1px dotted #333 -4px;
}
a[type="radio"]:checked:focus,
a[type="checkbox"]:checked:focus,
a[type="button"]:hover:focus {
    outline-offset: -5px;
}

a[type="radio"] { behavior: radio; }
a[type="checkbox"] { behavior: check; }
a[type="button"] { behavior: button; }
</style>
</head>
<body>
<dl>
    <dt>性别（单选）</dt>
    <dd>
        <a type="radio" name="sex" value="male">♂男</a>
        <a type="radio" name="sex" value="female">♀女</a>
    </dd>
    <dt>来源（单选）</dt>
    <dd>
        <a type="radio" name="from" value="Google"><img src="http://www.google.com/favicon.ico" /> 谷歌</a>
        <a type="radio" name="from" value="Baidu"><img src="http://www.baidu.com/favicon.ico" /> 百度</a>
    </dd>
    <dt>爱好（多选）</dt>
    <dd>
        <a type="checkbox" name="hobbies" value="football">足球</a>
        <a type="checkbox" name="hobbies" value="basketball">篮球</a>
        <a type="checkbox" name="hobbies" value="pingpang">乒乓球</a>
    </dd>
</dl>
<a type="button" id="submit">确定</a>
</body>
</html>
**/
wbLayout.write(html);

winform.show();
win.loopMessage();
return winform,wb;

nvt303

lujjjh 又出新东西了，标记一下。

ljtnine

behavior 很强大。已收藏

quicker

behavior 可以指定同时指定多个，多个behavior使用空格分隔即可。
如果希望提升指定behavior 的优先级，则在名字后面加一个波浪线，反之，在名字前面加一个波浪线;

~command 表示将command放在behavior队列最后面，
command~ 表示将command放在 behavior队列最前面 。

quicker

在aardio中添加behavior非常简单
只要在 web.layout.behavior 名字空间下添加库,
或直接添加新的名字空间都可以创建behavior.

例如新建名字空间 web.layout.behavior.command
就创建了名为"command"的behavioraardio标准库里已经预定义了大量的behavior,
大家可以看一下源码掌握HTMLayout的操作方法.

---

//自定义 behavior演示
import win.ui;
/*DSG{{*/
winform = ..win.form( text="aardio Form";bottom=399;parent=...;right=599;border="resizable" )
winform.add(
layoutWindow={ dr=1;dl=1;notify=1;right=580;left=10;dt=1;top=12;z=1;db=1;bottom=382;multiline=1;cls="edit" }
)
/*}}*/

import web.layout;
wbLayout = web.layout(winform.layoutWindow);
  
//创建自定义 behavior
namespace web.layout.behavior.command{  
  
    //所有窗体可以使用的事件函数,在behavior内都可以使用,可以输入 wbLayout.on 前缀自动创建函数
    onMouseDown = function (ltTarget,ltEle, x,y,mouseParams) {
        ..console.log("鼠标单击了,节点:",ltEle.id,ltTarget.innerHTML )
        return true;//所有事件返回true终止事件.
    }  
   
    //所有不是on前缀的函数,都可以在CSS脚本中直接调用
    func = function(ltEle,a,b,c){  
        ..import console
        ..console.log("调用了自定义函数，收到参数",a,b,c,ltEle.outerHTML)
        return "返回新的值"
    }
}


wbLayout.html =/***
<div id="my-button" 属性="值">请点击这里</div>
***/

wbLayout.css = /**
#my-button{
    behavior:command;
    active-on!:
        self.func(1,2,3), //CSS脚本以逗号分隔语句
    ;
}
**/

winform.show();
win.loopMessage();

zjutsxj

先收藏着。