Index
The HT for Web
provides form plug-ins that contain components such as drop-down menus, sliders and buttons, and form panels with component layout features.
html
also provides part of a similar component, however, there are many differences between the rendering of different browser platforms and even interactive effects, and some component styles cannot be customized, and the components provided by HT
provide consistent style and interaction and support rich custom extensibility capabilities.
Using the form plug-in requires the introduction of the ht.js
core library and the introduction of a ht-form.js
form plug-in library.
The HT for Web
provides a form panel component that features layout components that can be added to the table single-sided component for normal html
elements or any view component built into HT
. The form panel component is designed to add a row, each line adds any defined component, and by specifying the width information for each component, and the row height information for each row, to achieve the overall layout of all components, for a more complex interface can be implemented through nested form panels.
ht.widget.FormPane
is a form panel component class whose main configurable properties and functions are as follows:
vPadding
Gets and sets the spacing between the top and top of the form and the contents of the component through getVPadding
and setVPadding
, with the default value 8
hPadding
Gets and sets the spacing between the left and right of the form and the contents of the component through getHPadding
and setHPadding
, with the default value 8
vGap
Gets and sets the form component's horizontal spacing by getVGap
and setVGap
, with the default value 6
hGap
Gets and sets the form component's vertical spacing by getHGap
and setHGap
, with the default value 6
rowHeight
Gets and sets default row height by getRowHeight
and setRowHeight
labelVPadding
Gets and sets the spacing between the top and top of the text through getLabelVPadding
and setLabelVPadding
, with the default value 0
labelHPadding
Gets and sets the spacing between the left and right of the text through getLabelHPadding
and setLabelHPadding
, with the default value 2
scrollBarColor
Gets and sets the scroll bar color through getScrollBarColor
and `setScrollBarColorscrollBarSize
Gets and sets the scroll bar width through getScrollBarSize
and setScrollBarSize
autoHideScrollBar
Gets and sets whether auto hide the scroll bar, the default is true
addRow(items, widths, height, params)
Adds a line of componentsitems
An array of elements that can be string, json
format to describe component parameter information, html
elements, or null
widths
Each element width information array, width value greater than 1
represents fixed absolute value, less than or equals 1
represents relative value, also can be 80+0.3
combinationheight
The row height information, the value is greater than 1
means fixed absolute value, less than or equals 1
represents the relative value, also can be a combination of 80+0.3
, with default row height for nullparams
Additional parameters with json
format, such as inserting row index and row border or background color, etc., such as {index: 2, background: 'yellow', borderColor: 'red'}
removeRow(index)
Deletes the specified rowclear()
Clears all line informationgetItemById(id)
Find the corresponding item
element according to id
getValue(id)
Gets the corresponding item
element according to id
, and the shorthand function is v(id)
setValue(id, value)
Sets corresponding item
element according to id
, and the shorthand function is v(id, value)
v(jsonObj)
Batch jsonObj
all key
and value
pairs, set id
and value
to the corresponding item
elementAbsolute and relative values:
HT
system set the absolute value while a value is greater than 1
1
indicates that the true assignment value is the total width or total height after deducting all absolute values redistributionFor example, [80, 0.1, 60, 0.2, '20+0.3']
represents:
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))
There are three types of component elements:
HTML
Native element, set primitive element object, or use json
to set to element
attributeFormPane
Internally drawn text information that can be set to a string or used json
to set to element
attributeHT
Self-band components such as Button
, CheckBox
and ComboBox
, etc., can set the component object, or use json
to set to element
attributeNative objects can be added in reference to the www.hightopo.com
hyperlink at the bottom of the control panel in Easing Instance
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]);
For added elements, if a string
string is displayed as a label text, and if you need to define additional parameters for the text, you can use the json
format
{
element: 'Hightopo', // Text content
color: 'red' // Text color
font: 'bold 24px arial', // Text font
align: 'left', // Text align, optional value: left|center|right
vAlign: 'top', // Text vertical align, optional value: top|middle|bottom
}
The json
format of the element supports the following predefined properties:
id
Uniquely identifies the attribute and can be added to the corresponding item
object through formPane.getItemById(id)
borderColor
Border color, when the property is set, the element renders the rectangle border of the colorbackground
Background color, when the property is set, the element renders the rectangle background of the colorThe following predefined properties will automatically build the view component according to json
information and be stored on the element's element
attribute while the element
attribute is undefined, which is also true of defining ht.widget.Toolbar
element by using json
information automatically build the element
view component:
textField
Text field, after setting this property, HT
will automatically build the ht.widget.TextField
object based on the property value and is stored on the element
attributetextArea
Text area, after setting this property, HT
will automatically build the ht.widget.TextArea
object based on the property value and is stored on the element
attributebutton
Button, after setting this property, HT
will automatically build the ht.widget.Button
object based on the property value and is stored on the element
attributecheckBox
Check box, after setting this property, HT
will automatically build the ht.widget.CheckBox
object based on the property value and is stored on the element
attributeimage
Image, after setting this property, HT
will automatically build the ht.widget.Image
object based on the property value and is stored on the element
attributecomboBox
Combo box, after setting this property, HT
will automatically build the ht.widget.ComboBox
object based on the property value and is stored on the element
attributeslider
Slider, after setting this property, HT
will automatically build the ht.widget.Slider
object based on the property value and is stored on the element
attributeExample:
{
id: '679',
button: {
label: 'Hightopo Company',
icon: 'ht_logo',
toolTip: 'eric@hightopo.com',
onClicked: function(){
console.log('button is clicked.');
}
}
}
The example json
format defines an element of id
for 679
, and HT
automatically constructs a button
object for the ht.widget.Button
and passes button.setLabel('Hightopo Company')
, button.setIcon('Ht_logo')
, button.setToolTip('Eric@hightopo.com')
and button.onClicked = function () {console.log('button is clicked');}
these steps set to initialize the button
object, and then add an element
attribute to the json
format, whose value is the button
object.
The ht.widget.Button
is the buttons class whose main configurable properties and functions are as follows:
label
Gets and sets label by getLabel
and setLabel
labelFont
Gets and sets label font by getLabelFont
and setLabelFont
labelColor
Gets and sets label color by getLabelColor
and setLabelColor
labelSelectColor
Gets and sets selected label color by getLabelSelectColor
and setLabelSelectColor
borderColor
Gets and sets border color by getBorderColor
and setBorderColor
background
Gets and sets background by getBackground
and setBackground
selectBackground
Gets and sets selected background by getSelectBackground
and setSelectBackground
icon
Gets and sets icon by getIcon
and setIcon
iconColor
Gets and sets icon color by getIconColor
and setIconColor
disabled
Gets and sets whether use the feature by isDisabled
and setDisabled
, the default is false
toolTip
Gets and sets tooltip by getToolTip
and setToolTip
, can enable and disable the tooltip by enableToolTip()
and disableToolTip()
orientation
Gets and sets the sort of the label and icon by getOrientation
and setOrientation
, can set horizontal and vertical by horizontal
and vertical
, or the shorthand h
and v
selected
Gets and sets whether the button is selected by isSelected
and setSelected
pressed
Gets and sets whether the button is pushed by isPressed
and setPressed
clickable
Gets and sets whether the button is clickable by isClickable
and setClickable
togglable
Gets and sets whether the button is togglable by isTogglable
and setTogglable
groupId
Gets and sets group id by getGroupId
and setGroupId
, the togglable
button of the same group has the mutex function
ht.widget.RadioButton
is a radio button class whose main configurable properties and functions are as follows:
label
Gets and sets label by getLabel
and setLabel
labelFont
Gets and sets label font by getLabelFont
and setLabelFont
labelColor
Gets and sets label color by getLabelColor
and setLabelColor
icon
Gets and sets icon by getIcon
and setIcon
iconColor
Gets and sets icon color by getIconColor
and setIconColor
disabled
Gets and sets whether use the feature by isDisabled
and setDisabled
, the default is false
toolTip
Gets and sets tooltip by getToolTip
and setToolTip
, can enable and disable the tooltip by enableToolTip()
and disableToolTip()
selected
Gets and sets whether the button is selected by isSelected
and setSelected
pressed
Gets and sets whether the button is pushed by isPressed
and setPressed
pressBackground
Gets and sets the background while pressed by getPressBackground
and setPressBackground
padding
Gets and sets padding by getPadding
and setPadding
, the default is 0
getRadioIcon
Returns radioOn
icon while this function is selected, which is not selected then return the radioOff
icon, can be overloaded with customgroupId
Gets and sets group id by getGroupId
and setGroupId
, the togglable
button of the same group has the mutex function
ht.widget.CheckBox
is a check box class whose main configurable properties and functions are as follows:
label
Gets and sets label by getLabel
and setLabel
labelFont
Gets and sets label font by getLabelFont
and setLabelFont
labelColor
Gets and sets label color by getLabelColor
and setLabelColor
icon
Gets and sets icon by getIcon
and setIcon
iconColor
Gets and sets icon color by getIconColor
and setIconColor
disabled
Gets and sets whether use the feature by isDisabled
and setDisabled
, the default is false
toolTip
Gets and sets tooltip by getToolTip
and setToolTip
, can enable and disable the tooltip by enableToolTip()
and disableToolTip()
selected
Gets and sets whether the button is selected by isSelected
and setSelected
pressed
Gets and sets whether the button is pushed by isPressed
and setPressed
pressBackground
Gets and sets the background while pressed by getPressBackground
and setPressBackground
padding
Gets and sets padding by getPadding
and setPadding
, the default is 0
getRadioIcon
Returns radioOn
icon while this function is selected, which is not selected then return the radioOff
icon, can be overloaded with custom
ht.widget.TextField
is a text field class whose main configurable properties and functions are as follows:
getElement()
Returns the internal html
native input
text field element, which can add the listening or modifying styletype
Gets and sets the text field type by getType()
and setType()
, which is set to the type
attribute of the native elemenet
, such as number
type only allows to enter numberseditable
Gets and sets whether the text field editable by isEditable
and setEditable
, boolean
type, the default is true
toolTip
Gets and sets the tooltip by getToolTip
and setToolTip
, enable or disable the tooltip by enableToolTip()
and disableToolTip()
getText
or getValue
, setText
or setValue
, and ultimately is the style.value
property value of the native element
.getColor
and setColor
, and ultimately is the style.color
property value of the native element
.getFont
and setFont
, and ultimately is the style.font
property value of the native element
.getBackground
and setBackground
, and ultimately is the style.background
property value of the native element
.ht.widget.TextArea
is a text area class whose main configurable properties and functions are as follows:
getElement()
Returns the internal html
native input
text field element, which can add the listening or modifying styleeditable
Gets and sets whether the text field editable by isEditable
and setEditable
, boolean
type, the default is true
toolTip
Gets and sets the tooltip by getToolTip
and setToolTip
, enable or disable the tooltip by enableToolTip()
and disableToolTip()
getText
or getValue
, setText
or setValue
, and ultimately is the style.value
property value of the native element
.getColor
and setColor
, and ultimately is the style.color
property value of the native element
.getFont
and setFont
, and ultimately is the style.font
property value of the native element
.getBackground
and setBackground
, and ultimately is the style.background
property value of the native element
.
ht.widget.Image
is a image class whose main configurable properties and functions are as follows:
borderColor
Gets and sets border color by getBorderColor
and setBorderColor
background
Gets and sets background by getBackground
and setBackground
icon
Gets and sets icon by getIcon
and setIcon
iconColor
Gets and sets icon color by getIconColor
and setIconColor
toolTip
Gets and sets tooltip by getToolTip
and setToolTip
, enable and disable tooltip by enableToolTip()
and disableToolTip()
stretch
Gets and sets image stretch type by getStretch
and setStretch
, the default is centerUniform
, optional value as follows:fill
Image fills the entire rectangular area, and if the picture's width and height ratio and the rectangle is inconsistent, it will cause the picture to stretch and distortuniform
Image always keep the original width and height ratio unchanged, and fill the rectangular area as far as possiblecenterUniform
When the rectangular area is larger than the picture size, the picture is drawn in the center position in the original size, and the uniform
is used when the space is not enough.
ht.widget.Slider
is a slider class whose main configurable properties and functions are as follows:
value
Gets and sets the current value by getValue
and setValue
, number type, the default is 50
min
Gets and sets minimum by getMin
and setMin
, , number type, the default is 0
max
Gets and sets maximum by getMax
and setMax
, number type, the default is 100
step
Gets and sets the step by getStep
and setStep
, number type, the default is null represent continuousbutton
Gets and sets slider button by getButton
and setButton
thickness
Gets and sets slider thickness by getThickness
and setThickness
, number type, the default is 3
padding
Gets and sets slider padding by getPadding
and setPadding
, number type, the default is 4
background
Gets and sets slider background by getBackground
and setBackground
, string typeleftBackground
Gets and sets slider left background by getLeftBackground
and setLeftBackground
, string typedisabled
Gets and sets whether enable the feature by isDisabled
and setDisabled
, the default is false
toolTip
Gets and sets tooltip by getToolTip
and setToolTip
, enable and disable tooltip by enableToolTip()
and disableToolTip()
instant
Property to obtain an immediate state by isInstant
and setInstant
, the default is true
, to represent real-time changes to model values as an editor of the table and property pages
ht.widget.ComboBox
is a combo box class whose main configurable properties and functions are as follows:
value
Gets and sets the current value by getValue
and setValue
, can be any typevalues
Gets and sets drop-down optional value by getValues
and setValues
, Array
type, with the array length consistent with value
labels
Gets and sets the corresponding text for the drop-down optional value by getLabels
and setLabels
, Array
type, with the array length consistent with values
icons
Gets and sets the corresponding icon for the drop-down optional value by getIcons
and setIcons
, Array
type, with the array length consistent with values
background
Gets and sets background by getBackground
and setBackground
, string typeselectBackground
Gets and sets selected background by getSelectBackground
and setSelectBackground
, string typeindent
Gets and sets icon indent by getIndent
and setIndent
, number typeeditable
Gets and sets whether the combo box is editable by isEditable
and setEditable
, boolean
type, the default is false
selectIcon
Gets and sets the drop-down selected icon by getSelectIcon
and setSelectIcon
dropDownIcon
Gets and sets the drop-down arrow icon by getDropDownIcon
and setDropDownIcon
dropDownWidth
Gets and sets the width of drop-down by getDropDownWidth
and setDropDownWidth
, the default is the width of combo boxdisabled
Gets and sets whether enable the feature by isDisabled
and setDisabled
, the default is false
toolTip
Gets and sets tooltip by getToolTip
and setToolTip
, enable and disable tooltip by enableToolTip()
and disableToolTip()
ht.widget.MultiComboBox
is a multi-combo box class whose main configurable properties and functions are as follows:
value
Gets and sets the current value by getValue
and setValue
background
Gets and sets background by getBackground
and setBackground
, string typeindent
Gets and sets icon indent by getIndent
and setIndent
, number typeeditable
Gets and sets whether the combo box is editable by isEditable
and setEditable
, boolean
type, the default is false
dropDownIcon
Gets and sets the drop-down arrow icon by getDropDownIcon
and setDropDownIcon
dropDownWidth
Gets and sets the width of drop-down by getDropDownWidth
and setDropDownWidth
, the default is the width of combo boxdisabled
Gets and sets whether enable the feature by isDisabled
and setDisabled
, the default is false
toolTip
Gets and sets tooltip by getToolTip
and setToolTip
, enable and disable tooltip by enableToolTip()
and disableToolTip()
dropDownComponent
Sets the drop-down component class by setDropDownComponent
and getDropDownComponent
, inherit from ht.widget.BaseDropDownTemplate
open()
Open the drop-downclose()
Close the drop-downTemplate combo box and normal combo box are similar, however, it is a developer customization, so the drop-down box can be placed in any component (HT
component or normal DOM
element), to customize the content of the drop-down box, you need to customize a class inheritance ht.widget.BaseDropDownTemplate
and overloads several methods:
getView()
Overload this method returns the DOM
object to be displayed in the drop-down boxonOpened(value)
This method is call backed when the drop-down is open, overloading this method to display the value
parameter in the drop-down boxonClosed()
This method is call backed when the drop-down is close, overloading this method to do some cleanup workgetValue()
This method is call backed when the drop-down is close, overloading this method returns the value of the drop-down getWidth()
Overloads this method returns the width of the drop-down, and if this method is not overloaded, the width of the drop-down and the width of MultiComboBox
remain consistentgetHeight()
Overloads this method returns the height of the drop-downht.widget.ColorPicker
is the color selection box, inherited from MultiComboBox
, which adds two additional attributes, except for the property and function inherited from MultiComboBox
:
instant
Gets and sets immediate state by isInstant
and setInstant
, the default is true
, to represent real-time changes to model values as an editor of the table and property pagesclearButtonVisible
Gets and sets whether the clear button is visible by isClearButtonVisible
and setClearButtonVisible
, the default is true