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格式定义了一个id679的元素,HT会自动构建一个ht.widget.Buttonbutton对象, 并通过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