Introduction

The shop implements a JavaScript Module Engine for handling JavaScript operations easily and consistently. It features useful libraries, extensions and widgets which can boost up the UI development for the whole GX3 system.

Continue reading in order to learn how to use the widgets for the Gambio Admin through the provided examples and demos. Keep in mind that you will need to place the "gx-container" class only once in your page and not for every container element as shown in the examples. The "gx-compatibility" class will be automatically added into old pages that use the "header.php" file.

Widgets define JavaScript UI controls that can be easily manipulated in order to provide advanced functionality that will enhance the user experience. The engine wraps the functionality of major JavaScript projects and plugins such as the jQuery UI library, the DataTables plugin and many more.

Simply use the data-attributes, shown in the following examples, to bind the needed widget on your HTML structure. The styling will be applied by the gx-admin.css which is included by every page using the "header.php".

Checkbox Widgets

By applying this to your structure the normal checkboxes are replaced by specific structures in gx-admin style.

Checkbox widget for one single checkbox:

• Use data-single_checkbox if a singel checkbox and no switcher is needed.
• If data-single_checkbox is not added to the html structure, a switcher is generated.

By adding data-gx-widget="checkbox" on a wrapping element which contians two radio buttons, the radio buttons will be transformed to a switcher.

To call different URLs on different states of a switcher data-checkbox-on_url and data-checkbox-off_url can be applied to the widget element.

• data-checkbox-on_url: URL that is called when the switcher state changes to "checked"
• data-checkbox-off_url: URL that is called when the switcher state changes to "unchecked"

If the switcher symbols should be replaced by custom labels following data-attributes can be used:

• data-checkbox-on_label: Label for the "checked" state of the switcher
• data-checkbox-off_label: Label for the "unchecked" state of the switcher
• data-checkbox-class="labeled": To tell the widget that a custom labeling is needed

Tooltip Icon

If additional informations should displayed in a tooltip, data-gx-widget="tooltip_icon" is used.

• data-tooltip_icon-type="warning" generates a warning icon.
• data-tooltip_icon-type="info" generates an info icon.

CKEditor

To apply a CKEditor on a textarea, the following widget is used.

• data-ckeditor-height is used to define a custom height of the CKEditor

Colorpicker

To generate a colorpicker element the following widget can be used.

DataTable

To tranform a normal table into a data table with a pagination and a possibility to search for values of the table, the following widget can be used.

Datepicker

To generate a datepicker, following structure can be applied to an input field.

• data-datepicker-gx-container is used to apply the gx-admin styles for the datepicker

Datetimepicker

To generate a datetimepicker, following structure can be applied to an input field.

Progress Bar

To generate a progress bar following elements can be used.

• data-gx-widget="progressbar" is used for a normal progress bar
• data-progressbar-value defines the position of the progress bar

To generate an animated progress bar, the second code example can be used.

Slider

To generate a slider the following widget can be used.

Spinner

To generate a spinner the following widget can be used.

• data-spinner-min: Minimum value of the spinner.
• data-spinner-max: Maxiumum value of the spinner

Tabs

Following html structure will generate a tab system:

Button Dropdown

To generate a button with multiple values, combined in a dropdown, following widget can be used.