diff --git a/docs/form/api/api_overview.md b/docs/form/api/api_overview.md index 50b71ff7..22e5d35c 100644 --- a/docs/form/api/api_overview.md +++ b/docs/form/api/api_overview.md @@ -834,3 +834,28 @@ description: You can explore the API of Form in the documentation of the DHTMLX ### Timepicker properties [List of the Timepicker properties](form/api/timepicker/api_timepicker_properties.md) + +## Toggle API + +### Toggle methods + +| Name | Description | +| :------------------------------------------------- | :-------------------------------------------------------- | +| [](form/api/toggle/toggle_blur_method.md) | @getshort(form/api/toggle/toggle_blur_method.md) | +| [](form/api/toggle/toggle_destructor_method.md) | @getshort(form/api/toggle/toggle_destructor_method.md) | +| [](form/api/toggle/toggle_disable_method.md) | @getshort(form/api/toggle/toggle_disable_method.md) | +| [](form/api/toggle/toggle_enable_method.md) | @getshort(form/api/toggle/toggle_enable_method.md) | +| [](form/api/toggle/toggle_focus_method.md) | @getshort(form/api/toggle/toggle_focus_method.md) | +| [](form/api/toggle/toggle_getproperties_method.md) | @getshort(form/api/toggle/toggle_getproperties_method.md) | +| [](form/api/toggle/toggle_getvalue_method.md) | @getshort(form/api/toggle/toggle_getvalue_method.md) | +| [](form/api/toggle/toggle_hide_method.md) | @getshort(form/api/toggle/toggle_hide_method.md) | +| [](form/api/toggle/toggle_isdisabled_method.md) | @getshort(form/api/toggle/toggle_isdisabled_method.md) | +| [](form/api/toggle/toggle_isselected_method.md) | @getshort(form/api/toggle/toggle_isselected_method.md) | +| [](form/api/toggle/toggle_isvisible_method.md) | @getshort(form/api/toggle/toggle_isvisible_method.md) | +| [](form/api/toggle/toggle_setproperties_method.md) | @getshort(form/api/toggle/toggle_setproperties_method.md) | +| [](form/api/toggle/toggle_setvalue_method.md) | @getshort(form/api/toggle/toggle_setvalue_method.md) | +| [](form/api/toggle/toggle_show_method.md) | @getshort(form/api/toggle/toggle_show_method.md) | + + +### Toggle events + diff --git a/docs/form/api/checkbox/checkbox_blur_event.md b/docs/form/api/checkbox/checkbox_blur_event.md index 3fcd67c1..fd526266 100644 --- a/docs/form/api/checkbox/checkbox_blur_event.md +++ b/docs/form/api/checkbox/checkbox_blur_event.md @@ -17,6 +17,6 @@ description: You can explore the blur event of the Checkbox control of Form in t form.getItem("checkbox").events.on("blur", (value) => { console.log("blur", value); }); -@examplestop: + @changelog: added in v7.2 diff --git a/docs/form/api/toggle/toggle_afterchangeproperties_event.md b/docs/form/api/toggle/toggle_afterchangeproperties_event.md new file mode 100644 index 00000000..9553006b --- /dev/null +++ b/docs/form/api/toggle/toggle_afterchangeproperties_event.md @@ -0,0 +1,21 @@ +--- +sidebar_label: afterChangeProperties +title: JavaScript Form - afterChangeProperties Toggle Event +description: You can explore the afterChangeProperties event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# afterChangeProperties + +@short: fires after configuration attributes of the control have been changed dynamically + +@signature: {'afterChangeProperties: (properties: object) => void;'} + +@params: +- `properties: object` - an object with [configuration attributes](form/api/toggle/toggle_setproperties_method.md) of the control and their new values + +@example: +form.getItem("toggle").events.on("afterChangeProperties", function(properties) { + console.log("afterChangeProperties", properties); +}); + +@descr: \ No newline at end of file diff --git a/docs/form/api/toggle/toggle_afterhide_event.md b/docs/form/api/toggle/toggle_afterhide_event.md new file mode 100644 index 00000000..247fd42d --- /dev/null +++ b/docs/form/api/toggle/toggle_afterhide_event.md @@ -0,0 +1,22 @@ +--- +sidebar_label: afterHide +title: JavaScript Form - afterHide Toggle Event +description: You can explore the afterHide event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# afterHide + +@short: fires after a control is hidden + +@signature: {'afterHide: (value: string | number | boolean, init: boolean) => void;'} + +@params: +- `value: string | number | boolean` - the current value of the control +- `init: boolean` - *true*, if the event is triggered on the toggle control initialization; otherwise, *false* + +@example: +form.getItem("toggle").events.on("afterHide", function(value, init) { + console.log("afterHide", value, init); +}); + +@descr: diff --git a/docs/form/api/toggle/toggle_aftershow_event.md b/docs/form/api/toggle/toggle_aftershow_event.md new file mode 100644 index 00000000..7be8fb22 --- /dev/null +++ b/docs/form/api/toggle/toggle_aftershow_event.md @@ -0,0 +1,21 @@ +--- +sidebar_label: afterShow +title: JavaScript Form - afterShow Toggle Event +description: You can explore the afterShow event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# afterShow + +@short: fires after a control is shown + +@signature: {'afterShow: (value: string | number | boolean) => void;'} + +@params: +- `value: string | number | boolean` - the current value of the control + +@example: +form.getItem("toggle").events.on("afterShow", function(value) { + console.log("afterShow", value); +}); + +@descr: \ No newline at end of file diff --git a/docs/form/api/toggle/toggle_beforechange_event.md b/docs/form/api/toggle/toggle_beforechange_event.md new file mode 100644 index 00000000..6ec712cd --- /dev/null +++ b/docs/form/api/toggle/toggle_beforechange_event.md @@ -0,0 +1,25 @@ +--- +sidebar_label: beforeChange +title: JavaScript Form - beforeChange Toggle Event +description: You can explore the beforeChange event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# beforeChange + +@short: fires before changing the value of a control + +@signature: {'beforeChange: (value: string | number | boolean) => boolean | void;'} + +@params: +- `value: string | number | boolean` - the current value of the control + +@returns: +Return `false` to prevent changing the value of the control; otherwise, `true`. + +@example: +form.getItem("toggle").events.on("beforeChange", function(value) { + console.log("beforeChange", value); + return true; +}); + +@descr: diff --git a/docs/form/api/toggle/toggle_beforechangeproperties_event.md b/docs/form/api/toggle/toggle_beforechangeproperties_event.md new file mode 100644 index 00000000..bf0e9542 --- /dev/null +++ b/docs/form/api/toggle/toggle_beforechangeproperties_event.md @@ -0,0 +1,25 @@ +--- +sidebar_label: beforeChangeProperties +title: JavaScript Form - beforeChangeProperties Toggle Event +description: You can explore the beforeChangeProperties event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# beforeChangeProperties + +@short: fires before configuration attributes of the control are changed dynamically + +@signature: {'beforeChangeProperties: (properties: object) => boolean | void;'} + +@params: +- `properties: object` - an object with [configuration attributes](form/api/toggle/toggle_setproperties_method.md) of the control and their new values + +@returns: +Return `false` to cancel the default action of the event; otherwise, `true`. + +@example: +form.getItem("toggle").events.on("beforeChangeProperties", function(properties) { + console.log("beforeChangeProperties", properties); + return true; +}); + +@descr: diff --git a/docs/form/api/toggle/toggle_beforehide_event.md b/docs/form/api/toggle/toggle_beforehide_event.md new file mode 100644 index 00000000..82c9f95e --- /dev/null +++ b/docs/form/api/toggle/toggle_beforehide_event.md @@ -0,0 +1,26 @@ +--- +sidebar_label: beforeHide +title: JavaScript Form - beforeHide Toggle Event +description: You can explore the beforeHide event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# beforeHide + +@short: fires before a control is hidden + +@signature: {'beforeHide: (value: string | number | boolean, init: boolean) => boolean | void;'} + +@params: +- `value: string | number | boolean` - the current value of the control +- `init: boolean` - *true*, if the event is triggered on the control initialization; otherwise, *false* + +@returns: +Return `false` to prevent a control from being hidden; otherwise, `true`. + +@example: +form.getItem("toggle").events.on("beforeHide", function(value, init) { + console.log("beforeHide", value, init); + return true; +}); + +@descr: \ No newline at end of file diff --git a/docs/form/api/toggle/toggle_beforeshow_event.md b/docs/form/api/toggle/toggle_beforeshow_event.md new file mode 100644 index 00000000..34d229e9 --- /dev/null +++ b/docs/form/api/toggle/toggle_beforeshow_event.md @@ -0,0 +1,27 @@ +--- +sidebar_label: beforeShow +title: JavaScript Form - beforeShow Toggle Event +description: You can explore the beforeShow event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# beforeShow + +@short: fires before a control is shown + +@signature: {'beforeShow: (value: string | number | boolean) => boolean | void;'} + +@params: +- `value: string | number | boolean` - the current value of the control + +@returns: +Return `false` to prevent a control from being shown; otherwise, `true`. + +@example: +form.getItem("toggle").events.on("beforeShow", function(value) { + console.log("beforeShow", value); + return true; +}); + +@descr: + + diff --git a/docs/form/api/toggle/toggle_blur_event.md b/docs/form/api/toggle/toggle_blur_event.md new file mode 100644 index 00000000..fe73e2f1 --- /dev/null +++ b/docs/form/api/toggle/toggle_blur_event.md @@ -0,0 +1,19 @@ +--- +sidebar_label: blur +title: JavaScript Form - blur Toggle Event +description: You can explore the blur event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# blur + +@short: fires when a Toggle control has lost focus + +@signature: blur: (value: string | number | boolean) => void; + +@params: +- `value: string | number | boolean` - the current value of the control + +@example: +form.getItem("toggle").events.on("blur", (value) => { + console.log("blur", value); +}); diff --git a/docs/form/api/toggle/toggle_change_event.md b/docs/form/api/toggle/toggle_change_event.md new file mode 100644 index 00000000..3635e1fa --- /dev/null +++ b/docs/form/api/toggle/toggle_change_event.md @@ -0,0 +1,21 @@ +--- +sidebar_label: change +title: JavaScript Form - change Toggle Event +description: You can explore the change event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# change + +@short: fires on changing the value of a control + +@signature: {'change: (value: string | number | boolean) => void;'} + +@params: +- `value: string | number | boolean` - the current value of the control + +@example: +form.getItem("toggle").events.on("change", function(value) { + console.log("change", value); +}); + +@descr: \ No newline at end of file diff --git a/docs/form/api/toggle/toggle_focus_event.md b/docs/form/api/toggle/toggle_focus_event.md new file mode 100644 index 00000000..27e9048d --- /dev/null +++ b/docs/form/api/toggle/toggle_focus_event.md @@ -0,0 +1,21 @@ +--- +sidebar_label: focus +title: JavaScript Form - focus Toggle Event +description: You can explore the focus Toggle event of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# focus + +@short: fires when a Toggle control has received focus + +@signature: focus: (value: string | number | boolean) => void; + +@params: +- `value: string | number | boolean` - the current value of the control + +@example: +form.getItem("toggle").events.on("focus", (value) => { + console.log("focus", value); +}); + +@descr: diff --git a/docs/form/api/toggle/toggle_keydown_event.md b/docs/form/api/toggle/toggle_keydown_event.md new file mode 100644 index 00000000..0efee2ab --- /dev/null +++ b/docs/form/api/toggle/toggle_keydown_event.md @@ -0,0 +1,19 @@ +--- +sidebar_label: keydown +title: JavaScript Form - keydown Toggle Event +description: You can explore the keydown event of the Toggle control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# keydown + +@short: fires when any key is pressed and the Toggle control is in focus + +@signature: keydown: (event: KeyboardEvent) => void; + +@params: +- `event: KeyboardEvent` - a native KeyboardEvent object + +@example: +form.getItem("toggle").events.on("keydown", function(event) { + console.log(event); +}); diff --git a/sidebars.js b/sidebars.js index bda07965..64b793a9 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2250,8 +2250,20 @@ module.exports = { image: '/img/docusaurus.png' }, items: [ - /**/ - + "form/api/toggle/toggle_blur_method", + "form/api/toggle/toggle_destructor_method", + "form/api/toggle/toggle_disable_method", + "form/api/toggle/toggle_enable_method", + "form/api/toggle/toggle_focus_method", + "form/api/toggle/toggle_getproperties_method", + "form/api/toggle/toggle_getvalue_method", + "form/api/toggle/toggle_hide_method", + "form/api/toggle/toggle_isdisabled_method", + "form/api/toggle/toggle_isselected_method", + "form/api/toggle/toggle_isvisible_method", + "form/api/toggle/toggle_setproperties_method", + "form/api/toggle/toggle_setvalue_method", + "form/api/toggle/toggle_show_method" ], }, {