A button.
TYPES |
Standard buttons | Round corner buttons | Pointing buttons |
| | | | | |
by default | 'default' | 'form' | 'round' | 'prev' | 'next' |
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
click - (function) the function which will be executed on button click.
css - (css class) additional css class for parent <div> container.
id - (string,integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
popup - (
id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to the button (possible values:
right,
left. Default value -
center). By default, popup appears under the button but if space is limited it'll appear over (know more
here)
type - ('default', 'form', 'next', 'prev', 'round') - the type of button. In case you don't specify the parameter, the control will look like the button shown in the first column of the table above ( stated as by default).
width - (integer) the width of area assigned to control.
{ view:"button", id:"button1", type:"round", label: "Button", inputWidth:100, align:"center"}
Related sample: 02_form/10_styling_buttons.html
API Reference: Methods, properties, events
Back to top
A check-box.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
labelAlign - (left, right or center) the alignment of label within the defined width.
labelWidth - (integer) the width of label.
labelPosition - (left, right) the position of label relative to check box.
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
value - (boolean:true/false or 0/1) the initial value of element (the default value is 0 - check box is not checked).
width - (integer) the width of area assigned to control.
{ view:"checkbox", id: "field_a", label:"find hotels", labelWidth: 150, value: 1, labelPosition: "left"}
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
A combo box.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
data - specifies select options of control.
id - (string,integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
labelAlign - (left, right or center) the alignment of label within the defined width.
labelWidth - (integer) the width of label.
maxLength - (integer) the maximum number of characters that a user can enter in the field.
options - specifies select options of control. A simpler alternative to data parameter.
placeholder - (string) sets text of a placeholder ( text which is displayed when the field is empty and not focused).
readonly - (boolean) makes the field read-only, i.e. disallows users to enter data. By default - false.
value - (string,integer) the id of initial option.
width - (integer) the width of area assigned to control.
yCount - (integer) specifies the number of options.
iconCss - (string or boolean) defines a css class for the control icon. By default - “dhx_list_icon” . The value false allows you to hide the icon.
iconWidth - (integer) the width of the control icon.
//using 'data' parameter to specify select options
{ view:"combo",id: "field_b", label: "Combo", value:1, yCount:"3", data:[
{ id:1, value:"One" },
{ id:2, value:"Two" },
{ id:3, value:"Three" }
]}
//or
//using 'options' parameter to specify select options
{ view:"combo",id: "field_b", label: "Combo", value:1, yCount:"3", options:[
{ value:1, label:"One" },
{ value:2, label:"Two" },
{ value:3, label:"Three" }
]}
You can refer to the inner pop-up list through $$(“comboId_list”):
dhx.ui({ view:"combo",id: "myCombo", options:[
{ value:1, label:"One" },
{ value:2, label:"Two" },
{ value:3, label:"Three" }]
})
var items=$$('myCombo_list').dataCount();
alert(items);
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
An element area which contains a label and a counter.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string,integer) identification name. Used for referring to component.
label - (string) the text label of control.
labelAlign - (left, right or center) the alignment of label within the defined width.
labelWidth - (integer) the width of label.
max - (integer) the maximum value of element.
min - (integer) the minimum value of element.
labelPosition - (left, right) the position of label relative to the field which represents the current value.
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
step - (integer) the difference between two successive values of the element.
value - (integer) the initial value of control.
valueWidth - (integer or “auto”) the width of the field which represents the current value.
width - (integer) the width of area assigned to control.
{view:"counter", id:"field_c", label: 'Quantity', step: 10, valueWidth: "auto", value: 150, min: 100, max: 200, labelWidth: 100, labelPosition: "left", labelAlign: "left"}
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
A control area that contains label and pop-up calendar.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
labelWidth - (integer) the width of label.
labelAlign - (left, right or center) the alignment of label within the defined width.
value - (
string) the initial value of the control (available
date formats).
width - (integer) the width of area assigned to control.
iconCss - (string or boolean) defines a css class for the control icon. By default - “dhx_list_icon” . The value false allows you to hide the icon.
iconWidth - (integer) the width of the control icon.
Note, in addition to native datePicker properties, you can use any of calendar properties.
{ view:"datepicker", id:"calendar", label:'Date', timeSelect:true, labelAlign:"left", labelWidth:100 }
You can refer to the inner pop-up calendar through $$(“datepickerId_calendar”):
dhx.ui({ view:"datepicker",id: "myDatepicker", value:"12-03-2011"})
var currentDate=$$('myDatepicker_calendar').getValue();
alert(currentDate);
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
A ready-to-use icon.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
-
id - (string, integer) identification name. Used for referring to component.
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
width - (integer) the width of area assigned to control.
{ view:"icon", icon: 'refresh', align:"left"}
API Reference: Methods, properties, events
Back to top
A text input field.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
disabled - (boolean) disables the field. Once set, the field becomes grey. By default - false.
id - (string,integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
maxLength - (integer) the maximum number of characters that a user can enter in the field.
placeholder - (string) sets text of a placeholder ( text which is displayed when the field is empty and not focused).
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
readonly - (boolean) makes the field read-only, i.e. disallows users to enter data. By default - false.
type - (password, text) sets the type of the field. By default - text.
value - (string,integer) the initial text in the field.
width - (integer) the width of area assigned to control.
{view:"input", placeholder:"some text", type:"password"}
API Reference: Methods, properties, events
Back to top
An element that represents text label and an image.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
click - (function) the function which will be executed when you click on control (both label and image).
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
label - (string) the text label of control.
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
src - (
URL) the path to the image.
width - (integer) the width of area assigned to control.
{ view:"imagebutton", src:"imgs/true.gif", label:"Check", align:"center"}
API Reference: Methods, properties, events
Back to top
A normal text label.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
width - (integer) the width of area assigned to control.
{ view:"label", label: "Label", inputWidth:100, align:"center"}
API Reference: Methods, properties, events
Back to top
A block of the radio buttons (can contain only one radio button). Use height (inherited from view) and labelWidth parameters to set the desired position of buttons.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
labelAlign - (left, right or center) the alignment of labels within the defined width.
labelWidth - (integer) the width of labels.
options - specifies radio buttons of control.
labelPosition - (left, right) the position of labels relative to radio buttons.
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
value - (string, integer) the initial value of control (sets the value of button which will be checked initially).
width - (integer) the width of area assigned to control.
{ view:"radio",id:"radio1", labelPosition: "left", labelWidth: 90, labelAlign: "left", value:"a2", options:[
{ label:"option 1", value: "a1" },
{ label:"option 2", value: "a2" }]
}
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
Non-editable combo box.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
data - specifies select options of control.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
labelAlign - (left, right or center) the alignment of label within the defined width.
labelWidth - (integer) the width of label.
options - specifies select options of control. A simpler alternative to data parameter.
value - (string, integer) the id of initial option.
width - (integer) the width of area assigned to control.
yCount - (integer) specifies the number of options.
iconCss - (string or boolean) defines a css class for the control icon. By default - “dhx_list_icon” . The value false allows you to hide the icon.
iconWidth - (integer) the width of the control icon.
//using 'data' parameter to specify select options
{ view:"richselect",id: "list2", label: 'richselect', value:1, yCount:"3", data:[
{ id:1, value:"One" },
{ id:2, value:"Two" },
{ id:3, value:"Three" }
]}
//or
//using 'options' parameter to specify select options
{ view:"richselect",id: "list2", label: 'richselect', value:"1", yCount:"3", options:[
{ value:1, label:"One" },
{ value:2, label:"Two" },
{ value:3, label:"Three" }
]}
You can refer to the inner pop-up list through $$(“richselectId_list”):
dhx.ui({ view:"richselect",id: "myRichselect", options:[
{ value:1, label:"One" },
{ value:2, label:"Two" },
{ value:3, label:"Three" }]
})
var items=$$('myRichselect_list').dataCount();
alert(items);
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
A holistic panel contained several buttons (two and more).
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
multiview - (boolean) allows to link tabbar with multiview. Default value - false.
options - defines individual segments (buttons).
label - (string) the text label of segment.
value - (string, integer) the identification name of segment.
popup - (id, pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
width - (integer) the width of area assigned to control.
{view:"segmented", multiview:true, options:[
{ value:1, label:"Section A" },
{ value:2, value:"Section B" },
{ value:3, value:"Section C" }]
}
API Reference: Methods, properties, events
Back to top
A dropdown list.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
disabled - (boolean) disables the field. Once set, the field becomes grey. By default - false.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
options - specifies select options of control.
label - (string) the text label of option.
selected - (boolean) defines whether or not an element will be selected initially.
value - (string, integer) the value of option.
width - (integer) the width of area assigned to control.
{view:"select",id: "list2", options:[
{ value:1, label:"One" },
{ value:2, value:"Two", selected:"true" },
{ value:3, value:"Three" }]
}
API Reference: Methods, properties, events
Back to top
A small bar that slides along a visible line.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
max - (integer) the maximum value of the scale. Default value - 100. The parameter is ignored if options is set.
min - (integer) the minimum value of the scale. Default value - 0. The parameter is ignored if options is set.
step - (integer) the step of the scale. Default value - 1. The parameter is ignored if options is set.
options - sets the steps of the bar. The value returned by the slider is rounded to the nearest step.
slide - (function) the function which will be executed on sliding motion.
value - (string, integer) the initial value of control.
{ view:"slider", label:"Level", value:2, name:"s1", options:[
{value:0, label:"none"},
{value:1, label:"mild"},
{value:2, label:"moderate"},
{value:3, label:"severe"}
]}
//or
{ view:"slider", label:"Level", value:2, name:"s1", max:50, min:10, step:10}
So, you have 2 variants to set scale items:
Through the options parameter;
Through the max, min, step parameters. In this case the related 'options' (with empty labels) are created automatically.
Related sample: 02_form/09_slider.html
API Reference: Methods, properties, events
Back to top
A panel contained several buttons.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
multiview - (boolean) allows to link tabbar with multiview. Default value - false.
options - defines individual tabs (buttons).
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
selected - (string,integer) value of the tab which will be selected initially.
width - (integer) the width of area assigned to control.
{view:"tabbar",id:"tabbar1", inputWidth:100,selected:"tabbar_2", align:"center", options: [
{ label: 'Games', src: '../multiview/images/tabbar/games.png', value: 'tabbar_1'},
{ label: 'Video', src: '../multiview/images/tabbar/video.png', value: 'tabbar_2'},
{ label: 'Music', src: '../multiview/images/tabbar/music.png', value: 'tabbar_3'}]
}
API Reference: Methods, properties, events
Back to top
A text input field with a label.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
labelAlign - (left, right or center) the alignment of label within the defined width.
labelWidth - (integer) the width of label.
labelPosition - (left, right) the position of label relative to input field.
maxLength - (integer) the maximum number of characters that a user can enter in the field.
placeholder - (string) sets text of a placeholder ( text which is displayed when the field is empty and not focused).
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
readonly - (boolean) makes the field read-only, i.e. disallows users to enter data. By default - false.
type - (password, text) sets the type of field. By default - text.
value - (string, integer) the initial text in the field.
width - (integer) the width of area assigned to control.
{view:"text",label:"text", type:"password", align:"left"}
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
A multi-line text input.
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputHeight - (integer) the height of control.
inputWidth - (integer) the width of control.
popup - (id,pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
value - (string, integer) the initial value of control.
width - (integer) the width of area assigned to control.
{view:"textarea",label:"type here", align:"left"}
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top
An element area that contains label and a toggle (left and right buttons).
align - (left, right or center) the alignment of component inside designated area.
batch - (
string) assigns a group to control. The parameter is used by
showBatch() method for manipulating group visibility.
css - (css class) additional css class for parent <div> container.
id - (string, integer) identification name. Used for referring to component.
inputWidth - (integer) the width of control.
label - (string) the text label of control.
labelAlign - (left, right or center) the alignment of label within the defined width.
labelPosition - (left, right) the position of label relative to toggle.
labelWidth - (integer) the width of label (default value - 80).
options - defines individual tabs (buttons).
label - (string) the label of tab.
value - (string, integer) the value of tab.
width - (integer) the width of tab.
popup - (id, pos) the first property is the id of popup object you'd like to attach. The second property - the position of popup relative to control (possible values: right, left. Default value - center).
width - (integer) the width of area assigned to control.
{view:"toggle", label:"toggle", labelPosition:"left", labelWidth:60, options:[{value:1, label:"yes"},
{value:2, label:"no"}]
}
//or, if you want to use simplified version of the parameter 'options'
{view:"toggle", label:"toggle", labelPosition:"left", labelWidth:60, options:["yes", "no"]}
//in this case 'label' and 'value' values will agree
Related sample: 02_form/01_init.html
API Reference: Methods, properties, events
Back to top