Checkbox Widget
This extension can serve multiple types of checkboxes (simple switchers, text switchers and gambio-styled checkboxes, radio-button switcher). Apply the widget in a parent container and it will search and convert all the instances into fine checkboxes
Options
Filter | data-checkbox-filter | String | Optional
Provide a jQuery selector string for filtering the children elements of the parent container.
Checked State URL | data-checkbox-on_url | String | Optional
If provided the user will be navigated to the given URL once he clicks a checked instance of the widget.
Unchecked State URL | dat-acheckbox-off_url | String | Optional
If provided the user will be navigated ot the given URL once he clicks an unchecked instance of the widget.
Checked State Text | data-checkbox-on_text | String | Optional
If provided it will be displayed instead of the normal check icon.
Unchecked State Text | data-checkbox-off_text | String | Optional
If provided it will be displayed instead of the normal X icon.
Custom Checkbox Class | data-checkbox-class | String | Optional
Provide additional custom classes to the checkbox element.
Check Status | data-checkbox-check | Boolean | Optional
Defines whether the checkbox is checked or not. Use this option to override the original checkbox state.
Examples
Single Checkbox Example
A single checkbox is just a better styled checkbox that can be used for seamless integration into the Gambio Admin pages.
<label for="my-checkbox">Single Checkbox (checked)</label>
<input type="checkbox" id="my-checkbox" title="Single Checkbox" data-single_checkbox checked />
Switcher Checkbox
Displays a nice mobile-like switcher that is bound on the original checkbox. That means that any change done on the switcher will affect the original checkbox element.
<label for="my-checkbox">Receive Notifications</label>
<input type="checkbox" id="my-checkbox" title="Receive Notifications" />
Radio Checkbox
The checkbox widget can also serve cases with two radio buttons that define a yes or no use case. Consider the following example where the first radio element contains the "activate" and the second "deactivate" status.
<input type="radio" name="status" value="1" title="Activated" checked />
<input type="radio" name="status" value="0" title="Deactivated" />
URL Switcher
If you need to change the status of something by navigating the user to a specific url use the "on_url" and "off_url" options which will forward the user to the required URL.
<div data-gx-widget="checkbox"
data-checkbox-checked="true"
data-checkbox-on_url="#installed"
data-checkbox-off_url="#uninstalled"
data-checkbox-on_label="Installed"
data-checkbox-off_label="Uninstalled"
data-checkbox-class="labeled"></div>
Notice: This widget was highly modified for use in compatibility pages. It's complexity and performance are not optimal anymore. Use the single_checkbox and switcher widgets instead.