viscreation/vis-ui.js

JavaScript UI generator framework based on jQuery UI and some other elements

0.2.84 2021-02-24 11:35 UTC

Requires

• components/bootstrap: 3.*
• components/font-awesome: ^3.0 || ^4.0 || ^5.0
• components/jquery: 1.* || 2.*
• components/jqueryui: 1.*
• components/underscore: 1.8.*
• datatables/datatables: ^1.10.16
• debugteam/bootstrap-colorpicker: 1.*
• medialize/jquery-context-menu: 1.*
• robloach/component-installer: 0.2.*
• select2/select2: ^4.0
• wheregroup/jquerydialogextendjs: 2.x

Conflicts

• mapbender/digitizer: <1.1.67

MIT

• Andriy Oblivantsev

• assets
• jquery
• vis-ui

README

This package provides JavaScript UI generator based on Bootstrap and jQuery UI.

Features

• Generate form and input elements
• Check and fill form
• Tab navigation

Examples

• Basic

Elements

Description how to use element generator.

Input

$("<div/>").generateElements({
    type: "input",
    name: "name",
    title: "Input",
    placeholder: "Enter the name",
    mandatory: true,
    cssClass: "input-css", 
    css: {width: "80%"}
})

Options

• name: Field name
• title: Title string
• placeholder: Place holder in the input field
• mandatory: Mandatory field: true, false or ReExpr ("/^\d+$/g" - only decimals)
• cssClass: CSS class name
• css: Custom CSS styles object. Example: {width: "80%"}
• value: Default value

Text area

$("<div/>").generateElements({
    type: "textArea",
    name: "description" ,
    title: "Description",
    placeholder: "Enter the description",
})

Options

• name: Field name
• title: Title string
• placeholder: Place holder in the input field
• mandatory: Mandatory field: true, false or ReExpr ("/^\d+$/g" - only decimals)
• cssClass: CSS class name
• css: Custom CSS styles object. Example: {width: "80%"}
• value: Default value

Check box

$("<div/>").generateElements({
    type: "checkbox",
    name: "check1",
    title: "Checkbox",
    mandatory: true,
    cssClass: "input-css", 
    css: {width: "80%"}
})

Options

• name: Field name
• title: Title string
• placeholder: Place holder in the input field
• mandatory: Mandatory field: true, false or ReExpr ("/^\d+$/g" - only decimals)
• cssClass: CSS class name
• css: Custom CSS styles object. Example: {width: "80%"}
• value: Default value

Radio button

$("<div/>").generateElements({children:[{
        type: "radio",
        name: "yesNo",
        title: "Yes",
        css: {width: 50%}
    },{
        type: "radio",
        name: "yesNo",
        title: "no",
        css: {width: 50%}
}]})

Options

• name: Field name
• title: Title string
• placeholder: Place holder in the input field
• mandatory: Mandatory field: true, false or ReExpr ("/^\d+$/g" - only decimals)
• cssClass: CSS class name
• css: Custom CSS styles object. Example: {width: "80%"}
• value: Default value

Select

$("<div/>").generateElements({type: "select", value: "de", options: {en:"English", de: "German"} })

Options

• name: Field name
• title: Title string
• mandatory: Mandatory field: true, false or ReExpr ("/^\d+$/g" - only decimals)
• cssClass: CSS class name
• css: Custom CSS styles object. Example: {width: "80%"}
• value: Default value
• options: key/values object or array
• multiply: Multiply selection. Default false

Basic usage example:

var $div = $("<div/>");
$div.generateElements({children:[{
    type:  'input',
    title: "Input",
    placeholder: "placeholder value",
    mandatory: true
},{
    type:  'input',
    name: "input2",
    title: "Input #2",
    placeholder: "placeholder value #2"
}]});

$div.popupDialog({
    title:       "Demo",
    maximizable: true,
    buttons:     [{
        text:  "OK",
        click: function(e) {
            var div = $(e.currentTarget).closest(".ui-dialog").find(".popup-dialog");
            div.popupDialog('close');
        }
    }]
});

Integration

Extend composer dependencies with eslider/vis-ui.js and update composer.

composer update

Load JS library to HTML.

<script src="web/assets/vis-ui.js/vis-ui.js-built.js"></script>

Add CSS styles.

<link media="all" type="text/css" rel="stylesheet" href="web/assets/require.css">

Package Managers

• Composer: viscreation/vis-ui.js