HT for Web 表单手册

索引

概述

HT for Web提供了表单插件，其包含了下拉菜单、滑动条和按钮等组件，及具有组件布局功能的表单面板。 html也提供了部分类似的组件，但不同浏览器平台的呈现甚至交互效果都有很多差异，且有些组件风格无法自定义， HT提供的这些组件为了就是统一各个平台的差异，提供一致的风格和交互方式，并支持丰富的自定义扩展功能。

使用表单插件需要在引入ht.js核心库之后，再引入一个ht-form.js的表单插件库。

表单面板

HT for Web提供了表单面板组件，该组件具备布局组件功能，添加到表单面板的组件可为普通的html元素， 也可为HT内置的任意视图组件。表单面板组件以添加行的模式设计，每行添加任意定义组件，通过指定每个组件的宽度信息， 以及每行的行高信息，来达到整体所有组件的布局，对于更复杂的界面可通过嵌套表单面板来实现。

属性函数

ht.widget.FormPane为表单面板组件类，其主要可配置属性和函数如下：

布局参数

绝对值与相对值：

例如[80, 0.1, 60, 0.2, '20+0.3']代表：

组件元素

组件元素有三种类型：

原生对象的添加方式可参考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格式支持以下几个预定义属性：

以下预定义属性，将会在element属性未定义的情况下，自动根据json信息构建出视图组件，并存放到元素的element属性上， 这种通过json信息自动构建element视图组件的方式也同样适用于ht.widget.Toolbar的元素定义：

示例：

{
    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为按钮类，其主要可配置属性和函数如下：

单选按钮

ht.widget.RadioButton为单选按钮类，其主要可配置属性和函数如下：

复选框

ht.widget.CheckBox为复选框类，其主要可配置属性和函数如下：

文本框

ht.widget.TextField为文本框类，其主要可配置属性和函数如下：

文本区

ht.widget.TextArea为文本区类，其主要可配置属性和函数如下：

图片

ht.widget.Image为图片类，其主要可配置属性和函数如下：

滑动条

ht.widget.Slider为滑动条类，其主要可配置属性和函数如下：

组合框

ht.widget.ComboBox为组合框类，其主要可配置属性和函数如下：

模板组合框

ht.widget.MultiComboBox为模板组合框类，其主要可配置属性和函数如下：

模板组合框和普通组合框类似，不过它下拉的内容是开发人员自定义的，因此下拉框中可以放入任意组件(HT的组件或普通的DOM元素)，要自定义下拉框的内容，需要自定义一个类继承ht.widget.BaseDropDownTemplate，并重载几个方法：

颜色选择框

ht.widget.ColorPicker为颜色选择框，从MultiComboBox继承，除了从MultiComboBox继承的属性和函数，此类还增加两个属性:

欢迎交流 service@hightopo.com