Index
The HT for Web
provides a toolbar component class ht.widget.Toolbar
, the elements on the toolbar can be native html
elements, as well as the components in the ht-form.js
form plug-ins provided by the HT
, and built-in buttons, radio buttons, check box, and so on.
The toolbar supports horizontal pan
hand-grab panning, when the user clicks on the original or form plug-in components when the toolbar no longer interactive control, when the user clicks on the built-in components, if the subsequent horizontal moving toolbar will be translated hand grab effect operation, if you do not pan before you let go the toolbar will be a built-in component of the click operation, so if the toolbar elements need more translation capabilities, it is recommended to try to use the toolbar built-in components, on the one hand to help more space can be translated, on the other hand built-in components take up less memory resources to help system performance
Through toolbar = new ht.widget.Toolbar(items);
initialize build a toolbar object, items
argument is an array type, each object in the array generates a toolbar element (button, separator, native html
, or form plug-in component ).
The main configurable properties and functions of the toolbar are as follows:
getItems()
and setItems(items)
Gets and sets the array of toolbar elementsitemGap
Gets and sets the gap between elements by getItemGap
and setItemGap
separatorColor
Gets and sets the separator bar color by getSeparatorColor
and setSeparatorColor
stickToRight
Gets and sets whether the toolbar is aligned to the right by isStickToRight
and setStickToRight
, the default is false
addItem(item, index)
can insert the new element in the specified index
position, inserts to the last while index
is emptyremoveItem(item)
to delete the specified elementremoveItemById(id)
can delete the element of the specified number id
, id
value is defined by id
attribute on the item
elementgetItemById(id)
can get the element of the specified number id
, id
value is defined by id
attribute on item
elementdrawItem(g, item, x, height)
to customize the drawing of elements, the function returns the width value of the elementgetLabelFont(item)
to customize the label fontsgetLabelColor(item)
to customize the label colorgetSelectBackground(item)
to customize the background colorredraw()
function can be used to refresh drawing when the item
element changesenableToolTip()
and disableToolTip()
Enable and disable the tooltipisDisabled()
and setDisabled(true/false, iconURL)
Gets and sets the entire component in an unusable stategetValue(id)
Gets the corresponding item
element value according to id
, and the shorthand function is v(id)
setValue(id, value)
According to the id
setting corresponds to the item
element value, the shorthand function is v(id, value)
The item
element format description in the array:
separator
String that represents the separator barid
The uniquely labeled of toolbar element, if the setting can be got by getItemById
label
Label text of the toolbar elementicon
Icon of the toolbar elementtoolTip
Tooltip of the toolbar element, notice that it need to combine Toolbar#enableToolTip()
type
Type of the toolbar element, check
represents the check box, toggle
represents the switch button, radio
represents the click buttonselected
Whether the toolbar element has been selected, optional value true
or false
, is valide in check box, switch button and click buttonvisible
Whether the toolbar element visiable, the default is true
, if false
then hidden the elementunfocusable
Whether the toolbar element is not able to get focus, while mouse slide will display a rectangular border in default, set to true
to close this effectdisabled
Whether the toolbar element is disabled and the default is false
groupId
Grouping for toolbar element and the selection of elements within the same grouping automatically results in mutually exclusive effects element
Sets elements html
or form component elements on this propertywidth
Toolbar element width, often combined with element
, toolbar built-in components do not need to set this valueaction
Function type, toolbar element is called when clickedThe built-in components and the form components described in the following section can meet most of the application requirements. However, the sidebar still allows users to place native html
components, such as the select
pull-down component, or the html
component that the user has encapsulated, and for all component toolbars will set the css
position
to absolute
, set box-sizing
to border-box
absolute positioning.
Using the native
element components in the configuration, only to set the item
configuration attribute element
on the HTML
elements of the object, but also note that item
action
propertie will not work, if you want to listen to the event changes in the component, the user needs to add native listen events in html
element.
For Form Plug-in provides components that can also be set on the element
attribute of item
, and the toolbar also supports the mechanism of using json
to describe the automatic building of element
.
The following code builds the ht.widget.Slider
组 component automatically by the keyword property slider
, and automatically stores the component on the element
attribute of item
, and the HT
interior constructs the component object with a non-parameter constructor, and then check is there have corresponding set
function by json
configuration information, and if a corresponding set
function is assigned to the object, if no corresponding function is found, the property name and value are set onto the object.
var toolbar = new ht.widget.Toolbar([
{
id: 'step',
label: 'Step',
unfocusable: true,
slider: {
width: 120,
step: 5,
min: 100,
max: 200,
value: 125,
thickness: 1,
onValueChanged: function(){
toolbar.getItemById('step').label = this.getValue();
toolbar.redraw();
},
onEndValueChanged: function(){
toolbar.getItemById('step').label = 'Step';
toolbar.redraw();
}
}
}
]);
The following code constructs the slider
object:
slider = new ht.widget.Slider();
item.element = slider;
slider.setWidth(120);
slider.setStep(5);
slider.setMin(100);
slider.setMax(200);
slider.setValue(125);
slider.setThickness(1);
slider.onValueChanged = function(){
toolbar.getItemById('step').label = this.getValue();
toolbar.redraw();
};
slider.onEndValueChanged: function(){
toolbar.getItemById('step').label = 'Step';
toolbar.redraw();
};
The following are several component keyword mapping relationships that HT
supports:
textField
-> ht.widget.TextField
textArea
-> ht.widget.TextArea
button
-> ht.widget.Button
checkBox
-> ht.widget.CheckBox
image
-> ht.widget.Image
comboBox
-> ht.widget.ComboBox
slider
-> ht.widget.Slider
function createToolbar(){
var toolbar = new ht.widget.Toolbar([
{
id: 'step',
label: 'Step',
unfocusable: true,
slider: {
width: 120,
step: 5,
min: 100,
max: 200,
value: 125,
thickness: 1,
onValueChanged: function(){
toolbar.getItemById('step').label = this.getValue();
toolbar.redraw();
},
onEndValueChanged: function(){
toolbar.getItemById('step').label = 'Step';
toolbar.redraw();
}
}
},
{
id: 'nation',
label: 'Nation',
unfocusable: true,
comboBox: {
width: 120,
value: 'Sweden',
values: ['Spain', 'Sweden', 'Switzerland'],
icons: ['images/spain.png', 'images/sweden.png', 'images/switzerland.png']
}
},
{
id: 'text',
unfocusable: true,
textField: {
width: 120,
color: 'red'
}
},
'separator',
{
label: 'Get Information',
action: function(){
alert('Slider:' + toolbar.v('step') + '\n' +
'Nation:' + toolbar.v('nation') + '\n' +
'Name:' + toolbar.v('text')
);
}
}
]);
toolbar.v('text', 'Eric Lin');
return toolbar;
}