SlideToggle
SlideToggle field is a variation of Checkbox with a sliding toggle instead of box with check mark.
It wraps <input type="checkbox">.
Color can be specified, and you can optionally configure text to display in a label to the right of
the toggle in addition to a standard field label.
Slide toggle
//<code-header>
fiddle.title = 'Slide toggle';
//</code-header>
// Using default look
new SlideToggle({
appendTo : targetElement,
text : 'Off'
});
// Using default look
new SlideToggle({
appendTo : targetElement,
checked : true,
text : 'On'
});
// Using green color
new SlideToggle({
appendTo : targetElement,
color : 'b-green',
checked : true,
text : 'Green'
});
// Using orange color, initially checked
new SlideToggle({
appendTo : targetElement,
color : 'b-orange',
checked : true,
text : 'Orange'
});
// Starting disabled
new SlideToggle({
appendTo : targetElement,
disabled : true,
text : 'Disabled (Off)'
});
// Starting disabled
new SlideToggle({
appendTo : targetElement,
disabled : true,
text : 'Disabled (On)',
checked : true
});Configs
112
Configs
112Common
listenersEvents
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
titleWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Input element
autoCompleteField
inputAlignField
inputAttributesField
inputTagField
inputTypeField
inputWidthField
spellCheckField
tabIndexField
validateOnInputField
Label
hintField
hintHtmlField
labelLabelable
labelClsLabelable
labelPositionLabelable
labelsField
labelWidthLabelable
Layout
alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
Misc
badgeBadge
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
tooltipWidget
Other
autoCollapseCheckbox
autoSelectField
callOnFunctionsWidget
checkedCheckbox
checkedValueCheckbox
clearableField
colorCheckbox
columnWidget
editableField
keyStrokeChangeDelayField
nameField
placeholderField
readOnlyField
requiredField
revertOnEscapeField
rtlRTL
skipValidationField
spanWidget
textCheckbox
triggersField
uncheckedValueCheckbox
valueCheckbox
Scrolling
scrollableWidget
Properties
85
Properties
85Class hierarchy
Identifies an object as an instance of SlideToggle class, or subclass thereof.
Identifies an object as an instance of SlideToggle class, or subclass thereof.
isBadgeBadge
isCheckboxCheckbox
isDelayableDelayable
isEventsEvents
isFieldField
isKeyMapKeyMap
isLabelableLabelable
isLocalizableLocalizable
isRTLRTL
isValidatableValidatable
isWidgetWidget
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
badgeBadge
callOnFunctionsEvents
cellInfoWidget
disabledWidget
errorTipValidatable
labelLabelable
localeHelperLocalizable
localeManagerLocalizable
refWidget
tabWidget
tooltipWidget
Functions
67
Functions
67Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Other
addListenerEvents
announceAriaLiveWidget
checkCheckbox
clearField
clearErrorValidatable
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
focusWidget
getErrorsValidatable
hasListenerEvents
maskWidget
onEvents
recomposeWidget
relayAllEvents
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resumeEventsEvents
revertFocusWidget
selectField
setErrorValidatable
suspendEventsEvents
syncInputFieldValueField
toggleCheckbox
triggerEvents
unEvents
uncheckCheckbox
unmaskWidget
Widget hierarchy
closestWidget
containsWidget
eachAncestorWidget
eachWidgetWidget
ownsWidget
queryWidget
queryAllWidget
upWidget
Events
21
Events
21actionCheckbox
beforeChangeCheckbox
beforeDestroyEvents
beforeHideWidget
beforeShowWidget
catchAllEvents
changeCheckbox
clearField
clickCheckbox
destroyEvents
elementCreatedWidget
focusInWidget
focusOutWidget
hideWidget
inputField
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
triggerField
Event handlers
21
Event handlers
21onActionCheckbox
onBeforeChangeCheckbox
onBeforeDestroyEvents
onBeforeHideWidget
onBeforeShowWidget
onCatchAllEvents
onChangeCheckbox
onClearField
onClickCheckbox
onDestroyEvents
onElementCreatedWidget
onFocusInWidget
onFocusOutWidget
onHideWidget
onInputField
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
onTriggerField
Typedefs
7
Typedefs
7AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
FieldTriggerConfigField
KeyMapConfigKeyMap