CSS Behavior

Behavior is a named event handler attached to DOM element. Behaviors attachment is defined by CSS property “behavior”. Example: all elements inside

div.toolbar > tb-button {
    behavior:button;
}

An element may have multiple behaviors assigned. The behavior property assigns native event handlers that are declared in engine core or in code of host application. Close analogy: HWND == HELEMENT, behavior == WinProc + struct Support concept of value.

Behavior 是attached到DOM元素上一个命名事件处理handler. Behavior 被定义在css behavior属性上 比如有一个自定义标签 加上behavior行为后就是一个button

div.toolbar > tb-button {
    behavior:button;
}

一个元素会有许多behaviors.

内置的行为

Basic buttons

clickable
button
checkbox
radio & switch

Selects

dropdown-select
dropdown-multi-select
select
select-multiple
select-checkmarks
tree
tree-view
tree-checkmarks



Edits

edit
password
masked-edit
numeric
integer
decimal
textarea
richtext

Date/time

calendar
date
time

Output/indicators

output
text
integer
decimal
currency
date
date-local
time
time-local
progress
scrollbar
slider

HTML behaviors

frame
history
frame-set
form
hyperlink
htmlarea
image
shellicon
filethumbnail
style-bag

Menu

menu-bar
menu
popup-menu
popup-selector

Auxiliary

expandable-list
collapsible-list
swipe
marquee
column-resizer

Scripting behaviors & event handlers

• Subclasses

  class MyButton : Behavior {
  function onMouse(event) { … }
  function onKey(event)   { … }
  }
  

span.my-button {
  prototype: MyButton url(buttons.tis);
}

• Aspects

  function MyButton() {
  this.subscribe(“click”, 
                function() {…});  
  }
  

span.my-button {
  aspect: MyButton url(buttons.tis);
}

• Event handlers:

  var someEl = …;
  someEl.subscribe(“click”, 
                function() {…});