索引
HT for Web
提供了表单插件,其包含了下拉菜单、滑动条和按钮等组件,及具有组件布局功能的表单面板。
html
也提供了部分类似的组件,但不同浏览器平台的呈现甚至交互效果都有很多差异,且有些组件风格无法自定义,
HT
提供的这些组件为了就是统一各个平台的差异,提供一致的风格和交互方式,并支持丰富的自定义扩展功能。
使用表单插件需要在引入ht.js
核心库之后,再引入一个ht-form.js
的表单插件库。
HT for Web
提供了表单面板组件,该组件具备布局组件功能,添加到表单面板的组件可为普通的html
元素,
也可为HT
内置的任意视图组件。表单面板组件以添加行的模式设计,每行添加任意定义组件,通过指定每个组件的宽度信息,
以及每行的行高信息,来达到整体所有组件的布局,对于更复杂的界面可通过嵌套表单面板来实现。
ht.widget.FormPane
为表单面板组件类,其主要可配置属性和函数如下:
vPadding
属性通过getVPadding
和setVPadding
获取和设置表单顶部和底部与组件内容的间距,默认值为8
hPadding
属性通过getHPadding
和setHPadding
获取和设置表单左边和右边与组件内容的间距,默认值为8
vGap
属性通过getVGap
和setVGap
获取和设置表单组件水平间距,默认值为6
hGap
属性通过getHGap
和setHGap
获取和设置表单的行垂直间距,默认值为6
rowHeight
属性通过getRowHeight
和setRowHeight
获取和设置默认行高labelVPadding
属性通过getLabelVPadding
和setLabelVPadding
获取和设置文字顶部和底部的间距,默认值为0
labelHPadding
属性通过getLabelHPadding
和setLabelHPadding
获取和设置文字左边和右边的间距,默认值为2
scrollBarColor
属性通过getScrollBarColor
和setScrollBarColor
获取和设置滚动条颜色scrollBarSize
属性通过getScrollBarSize
和setScrollBarSize
获取和设置滚动条宽度autoHideScrollBar
属性通过isAutoHideScrollBar
和setAutoHideScrollBar
获取和设置是否自动隐藏滚动条,默认为true
addRow(items, widths, height, params)
添加一行组件items
为元素数组,元素可为字符串、json
格式描述的组件参数信息、html
元素或者为null
的空widths
为每个元素宽度信息数组,宽度值大于1
代表固定绝对值,小于等于1
代表相对值,也可为80+0.3
的组合height
为行高信息,值大于1
代表固定绝对值,小于等于1
代表相对值,也可为80+0.3
的组合,为空时采用默认行高params
为json
格式的额外参数,例如插入行索引以及行边框或背景颜色等,如{index: 2, background: 'yellow', borderColor: 'red'}
removeRow(index)
删除指定的行clear()
清除所有行信息getItemById(id)
根据id
值找到对应的item
元素getValue(id)
根据id
获取对应item
元素值,简写函数为v(id)
setValue(id, value)
根据id
设置对应item
元素值,简写函数为v(id, value)
v(jsonObj)
可批量将jsonObj
的所有key
和value
对,作为id
和value
设置到对应的item
元素中绝对值与相对值:
HT
系统对大于1
的值认定为绝对值1
的值表示,其真实分配值为总宽度或总高度扣除所有绝对值后的再分配例如[80, 0.1, 60, 0.2, '20+0.3']
代表:
80
Math.max(0, (0.1/(0.1+0.2+0.3))*(width-80-60-20))
60
Math.max(0, (0.2/(0.1+0.2+0.3))*(width-80-60-20))
20 + Math.max(0, (0.3/(0.1+0.2+0.3))*(width-80-60-20))
组件元素有三种类型:
HTML
原生元素,可直接设置原生元素对象,或采用json
方式设置到element
属性FormPane
内部自绘制的文本信息,可直接设置字符串,或采用json
方式设置到element
属性HT
自带组件如Button
、CheckBox
和ComboBox
等,可直接设置组件对象,或采用json
方式设置到element
属性原生对象的添加方式可参考Easing实例中的控制面板下端的www.hightopo.com
超链接
var href = document.createElement('a');
href.setAttribute('href', 'http://www.hightopo.com');
href.innerHTML = 'http://www.hightopo.com';
href.style.font = formPane.getLabelFont();
href.style.lineHeight = formPane.getRowHeight() + 'px';
href.style.textAlign = 'right';
formPane.addRow([href], [0.1]);
对于添加的元素,如果为string
字符串,则显示为标签文字,如果需要定义文字的其他参数,则可使用json
格式
{
element: 'Hightopo', // 文字内容
color: 'red' //文字颜色
font: 'bold 24px arial', // 文字字体
align: 'left', // 文字水平对齐,可选值: left|center|right
vAlign: 'top', // 文字垂直对齐,可选值: top|middle|bottom
}
元素的json
格式支持以下几个预定义属性:
id
唯一标示属性,可通过formPane.getItemById(id)
获取添加到对应的item
对象borderColor
边框颜色,设置了该属性后元素会呈现该颜色的矩形边框background
背景颜色,设置了该属性后元素会呈现该颜色的矩形背景以下预定义属性,将会在element
属性未定义的情况下,自动根据json
信息构建出视图组件,并存放到元素的element
属性上,
这种通过json
信息自动构建element
视图组件的方式也同样适用于ht.widget.Toolbar
的元素定义:
textField
文本输入框,设置了该属性后HT
将根据属性值自动构建ht.widget.TextField
对象,并保存在element
属性上textArea
文本域,设置了该属性后HT
将根据属性值自动构建ht.widget.TextArea
对象,并保存在element
属性上button
按钮,设置了该属性后HT
将根据属性值自动构建ht.widget.Button
对象,并保存在element
属性上checkBox
复选框,设置了该属性后HT
将根据属性值自动构建ht.widget.CheckBox
对象,并保存在element
属性上image
图片,设置了该属性后HT
将根据属性值自动构建ht.widget.Image
对象,并保存在element
属性上comboBox
组合框,设置了该属性后HT
将根据属性值自动构建ht.widget.ComboBox
对象,并保存在element
属性上slider
拉条,设置了该属性后HT
将根据属性值自动构建ht.widget.Slider
对象,并保存在element
属性上示例:
{
id: '679',
button: {
label: '图扑软件好公司',
icon: 'ht_logo',
toolTip: 'eric@hightopo.com',
onClicked: function(){
console.log('button is clicked.');
}
}
}
上例json
格式定义了一个id
为679
的元素,HT
会自动构建一个ht.widget.Button
的button
对象,
并通过button.setLabel('图扑软件好公司')
,button.setIcon('ht_logo')
、button.setToolTip('eric@hightopo.com')
和button.onClicked = function(){console.log('button is clicked.');}
这几步设置初始化该button
对象,
然后对json
格式新增加一个element
属性,其值为该button
对象。
ht.widget.Button
为按钮类,其主要可配置属性和函数如下:
label
属性通过getLabel
和setLabel
获取和设置文字标签labelFont
属性通过getLabelFont
和setLabelFont
获取和设置文字字体labelColor
属性通过getLabelColor
和setLabelColor
获取和设置文字颜色labelSelectColor
属性通过getLabelSelectColor
和setLabelSelectColor
获取和设置文字选中颜色borderColor
属性通过getBorderColor
和setBorderColor
获取和设置边框颜色background
属性通过getBackground
和setBackground
获取和设置背景颜色selectBackground
属性通过getSelectBackground
和setSelectBackground
获取和设置背景颜色icon
属性通过getIcon
和setIcon
获取和设置图标iconColor
属性通过getIconColor
和setIconColor
获取和设置图标颜色disabled
属性通过isDisabled
和setDisabled
获取和设置是否使能功能,默认值为false
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示orientation
属性通过getOrientation
和setOrientation
获取和设置文字和图标的排列方式,
可设置horizontal
和vertical
的水平和垂直方式,也可采用h
和v
的简写方式selected
属性通过isSelected
和setSelected
获取和设置按钮是否处于选中状态pressed
属性通过isPressed
和setPressed
获取和设置按钮是否处于按下状态clickable
属性通过isClickable
和setClickable
获取和设置按钮是否处于可按状态togglable
属性通过isTogglable
和setTogglable
获取和设置按钮是否处于开关状态groupId
属性通过getGroupId
和setGroupId
获取和设置组编号,属于同组的togglable
按钮具有互斥功能ht.widget.RadioButton
为单选按钮类,其主要可配置属性和函数如下:
label
属性通过getLabel
和setLabel
获取和设置文字标签labelFont
属性通过getLabelFont
和setLabelFont
获取和设置文字字体labelColor
属性通过getLabelColor
和setLabelColor
获取和设置文字颜色icon
属性通过getIcon
和setIcon
获取和设置图标iconColor
属性通过getIconColor
和setIconColor
获取和设置图标颜色disabled
属性通过isDisabled
和setDisabled
获取和设置是否使能功能,默认值为false
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示selected
属性通过isSelected
和setSelected
获取和设置单选按钮是否处于选中状态pressed
属性通过isPressed
和setPressed
获取和设置单选按钮是否处于按下状态pressBackground
属性通过getPressBackground
和setPressBackground
获取和设置按下状态背景颜色padding
属性通过getPadding
和setPadding
获取和设置间距,默认值为0
getRadioIcon
函数选中时返回radioOn
图标,非选中时返回radioOff
图标,可重载自定义groupId
属性通过getGroupId
和setGroupId
获取和设置组编号,属于同组的togglable
单选按钮具有互斥功能ht.widget.CheckBox
为复选框类,其主要可配置属性和函数如下:
label
属性通过getLabel
和setLabel
获取和设置文字标签labelFont
属性通过getLabelFont
和setLabelFont
获取和设置文字字体labelColor
属性通过getLabelColor
和setLabelColor
获取和设置文字颜色icon
属性通过getIcon
和setIcon
获取和设置图标iconColor
属性通过getIconColor
和setIconColor
获取和设置图标颜色disabled
属性通过isDisabled
和setDisabled
获取和设置是否使能功能,默认值为false
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示selected
属性通过isSelected
和setSelected
获取和设置复选框是否处于选中状态pressed
属性通过isPressed
和setPressed
获取和设置复选框是否处于按下状态pressBackground
属性通过getPressBackground
和setPressBackground
获取和设置按下状态背景颜色padding
属性通过getPadding
和setPadding
获取和设置间距,默认值为0
getCheckIcon
函数选中时返回check
图标,非选中时返回uncheck
图标,可重载自定义ht.widget.TextField
为文本框类,其主要可配置属性和函数如下:
getElement()
函数返回内部的html
原生input
文本框元素,可对其直接增加监听或修改风格type
属性通过getType()
和setType()
获取和设置文本框类型,该值设置到原生elemenet
的type
属性,如number
类型只允许输入数字editable
属性通过isEditable
和setEditable
获取和设置文本框是否允许输入编辑,为boolean
类型,默认为true
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示getText
或getValue
获取,setText
或setValue
进行设置,最终都是操作原生element
的value
属性值getColor
和setColor
进行获取和设置,最终都是操作原生element
的style.color
属性值getFont
和setFont
进行获取和设置,最终都是操作原生element
的style.font
属性值getBackground
和setBackground
进行获取和设置,最终都是操作原生element
的style.background
属性值ht.widget.TextArea
为文本区类,其主要可配置属性和函数如下:
getElement()
函数返回内部的html
原生input
文本区元素,可对其直接增加监听或修改风格editable
属性通过isEditable
和setEditable
获取和设置文本区是否允许输入编辑,为boolean
类型,默认为true
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示getText
或getValue
获取,setText
或setValue
进行设置,最终都是操作原生element
的value
属性值getColor
和setColor
进行获取和设置,最终都是操作原生element
的style.color
属性值getFont
和setFont
进行获取和设置,最终都是操作原生element
的style.font
属性值getBackground
和setBackground
进行获取和设置,最终都是操作原生element
的style.background
属性值ht.widget.Image
为图片类,其主要可配置属性和函数如下:
borderColor
属性通过getBorderColor
和setBorderColor
获取和设置边框颜色background
属性通过getBackground
和setBackground
获取和设置背景颜色icon
属性通过getIcon
和setIcon
获取和设置图标iconColor
属性通过getIconColor
和setIconColor
获取和设置图标颜色toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示stretch
属性通过getStretch
和setStretch
获取和设置图片拉伸方式,默认值为centerUniform
,可取值如下:fill
图片填充满整个矩形区域,如果图片宽高比例和矩形不一致会导致图片拉伸失真uniform
图片始终保持原始宽高比例不变化,并尽量填充满矩形区域centerUniform
当矩形区域大于图片尺寸时图片以原始大小绘制在中心位置,空间不够时采用uniform
的绘制方式ht.widget.Slider
为滑动条类,其主要可配置属性和函数如下:
value
属性通过getValue
和setValue
获取和设置当前值,为数字类型,默认值为50
min
属性通过getMin
和setMin
获取和设置最小值,为数字类型,默认值为0
max
属性通过getMax
和setMax
获取和设置最大值,为数字类型,默认值为100
step
属性通过getStep
和setStep
获取和设置步进,为数字类型,默认值为空代表连续button
属性通过getButton
和setButton
获取和设置滑动条按钮图标thickness
属性通过getThickness
和setThickness
获取和设置滑动条粗细,为数字类型,默认值为3
padding
属性通过getPadding
和setPadding
获取和设置滑动条水平边界间距,为数字类型,默认值为4
background
属性通过getBackground
和setBackground
获取和设置滑动条背景颜色,为字符串类型leftBackground
属性通过getLeftBackground
和setLeftBackground
获取和设置滑动条左侧背景颜色,为字符串类型disabled
属性通过isDisabled
和setDisabled
获取和设置是否使能功能,默认值为false
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示instant
属性通过isInstant
和setInstant
获取和设置是否处于即时状态,默认为true
,代表作为表格和属性页的编辑器时,将实时改变模型值ht.widget.ComboBox
为组合框类,其主要可配置属性和函数如下:
value
属性通过getValue
和setValue
获取和设置当前值,可为任意类型values
属性通过getValues
和setValues
获取和设置下拉可选值,为Array
类型数组,其值类型需与value
一致labels
属性通过getLabels
和setLabels
获取和设置下拉可选值对应文本,为Array
类型数组,数组长度需与values
一致icons
属性通过getIcons
和setIcons
获取和设置下拉可选值对应图标,为Array
类型数组,数组长度需与values
一致background
属性通过getBackground
和setBackground
获取和设置背景色,字符串类型selectBackground
属性通过getSelectBackground
和setSelectBackground
获取和设置选中背景色,字符串类型indent
属性通过getIndent
和setIndent
获取和设置图标缩进,为数字类型editable
属性通过isEditable
和setEditable
获取和设置组合框是否允许输入编辑,为boolean
类型,默认为false
selectIcon
属性通过getSelectIcon
和setSelectIcon
获取和设置下拉勾选图标dropDownIcon
属性通过getDropDownIcon
和setDropDownIcon
获取和设置下拉箭头图标dropDownWidth
属性通过getDropDownWidth
和setDropDownWidth
获取和设置下拉列表宽,默认为组合框宽度dropDownBackground
属性通过getDropDownBackground
和setDropDownBackground
获取和设置下拉列表背景色,默认为组合框背景色disabled
属性通过isDisabled
和setDisabled
获取和设置是否使能功能,默认值为false
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示ht.widget.MultiComboBox
为模板组合框类,其主要可配置属性和函数如下:
value
属性通过getValue
和setValue
获取和设置当前值background
属性通过getBackground
和setBackground
获取和设置背景色,字符串类型indent
属性通过getIndent
和setIndent
获取和设置图标缩进,为数字类型editable
属性通过isEditable
和setEditable
获取和设置组合框是否允许输入编辑,为boolean
类型,默认为false
dropDownIcon
属性通过getDropDownIcon
和setDropDownIcon
获取和设置下拉箭头图标dropDownWidth
属性通过getDropDownWidth
和setDropDownWidth
获取和设置下拉框宽,默认为组合框宽度disabled
属性通过isDisabled
和setDisabled
获取和设置是否使能功能,默认值为false
toolTip
属性通过getToolTip
和setToolTip
获取和设置文字提示,可通过enableToolTip()
和disableToolTip()
启动和关闭文字提示dropDownComponent
属性通过setDropDownComponent
和getDropDownComponent
设置下拉框模版类,此类要从ht.widget.BaseDropDownTemplate
继承open()
打开下拉框close()
关闭下拉框模板组合框和普通组合框类似,不过它下拉的内容是开发人员自定义的,因此下拉框中可以放入任意组件(HT
的组件或普通的DOM
元素),要自定义下拉框的内容,需要自定义一个类继承ht.widget.BaseDropDownTemplate
,并重载几个方法:
getView()
重载此方法返回要显示在下拉框中的DOM
对象onOpened(value)
此方法在下拉框弹开时被回调,重载此方法将value
参数显示在下拉框中onClosed()
下拉框关闭时被回调,可以重载此方法做一些清理工作getValue()
下拉框关闭时被回调,重载此方法返回下拉框的值getWidth()
重载此方法返回下拉框的宽度,如果没有重载此方法,下拉框的宽度和MultiComboBox
的宽度保持一致getHeight()
重载此方法返回下拉框的高度ht.widget.ColorPicker
为颜色选择框,从MultiComboBox
继承,除了从MultiComboBox
继承的属性和函数,此类还增加两个属性:
instant
属性通过isInstant
和setInstant
获取和设置是否处于即时状态,默认为true
,代表作为表格和属性页的编辑器时,将实时改变模型值clearButtonVisible
通过isClearButtonVisible
和setClearButtonVisible
获取和设置清除按钮是否可见,默认为true