PHPackages mapbender/vis-ui.js - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. mapbender/vis-ui.js ArchivedComponent[Framework](/categories/framework) mapbender/vis-ui.js =================== JavaScript UI generator framework based on jQuery UI and some other elements 0.2.84(5y ago)16.0k[1 PRs](https://github.com/mapbender/vis-ui.js/pulls)MITJavaScript Since May 4Pushed 4y ago10 watchersCompare [ Source](https://github.com/mapbender/vis-ui.js)[ Packagist](https://packagist.org/packages/mapbender/vis-ui.js)[ Docs](https://github.com/eSlider)[ RSS](/packages/mapbender-vis-uijs/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (10)Dependencies (11)Versions (99)Used By (0) vis-ui.js ========= [](#vis-uijs) This package provides JavaScript UI generator based on [Bootstrap](http://www.bootstrap.com) and [jQuery UI](www.jquery-ui.com). Features -------- [](#features) - Generate form and input elements - Check and fill form - Tab navigation Examples -------- [](#examples) - [Basic](https://rawgit.com/eSlider/vis-ui.js/master/index.html) Elements -------- [](#elements) Description how to use element generator. --- ### Input [](#input) ``` $("").generateElements({ type: "input", name: "name", title: "Input", placeholder: "Enter the name", mandatory: true, cssClass: "input-css", css: {width: "80%"} }) ``` #### Options [](#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 [](#text-area) ``` $("").generateElements({ type: "textArea", name: "description" , title: "Description", placeholder: "Enter the description", }) ``` #### Options [](#options-1) - 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 [](#check-box) ``` $("").generateElements({ type: "checkbox", name: "check1", title: "Checkbox", mandatory: true, cssClass: "input-css", css: {width: "80%"} }) ``` #### Options [](#options-2) - 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 [](#radio-button) ``` $("").generateElements({children:[{ type: "radio", name: "yesNo", title: "Yes", css: {width: 50%} },{ type: "radio", name: "yesNo", title: "no", css: {width: 50%} }]}) ``` #### Options [](#options-3) - 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 [](#select) ``` $("").generateElements({type: "select", value: "de", options: {en:"English", de: "German"} }) ``` #### Options [](#options-4) - 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: [](#basic-usage-example) ``` var $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 ----------- [](#integration) Extend composer dependencies with *eslider/vis-ui.js* and update composer. ``` composer update ``` Load JS library to HTML. ``` ``` Add CSS styles. ``` ``` Package Managers ---------------- [](#package-managers) - [Composer](http://packagist.org/packages/viscreation/vis-ui-js): `viscreation/vis-ui.js` ### Health Score 35 — LowBetter than 80% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community19 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~22 days Recently: every ~69 days Total 94 Last Release 1983d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/e93698c8e1784f88100eab35a186fab222bcbb5dc805d52f36cb6c459fa4743c?d=identicon)[werrolf](/maintainers/werrolf) ![](https://www.gravatar.com/avatar/0154eb5bdfa738d2bbc95bb345ba5f971d9395a2318f8724e42fa3bd384ae9c2?d=identicon)[LazerTiberius](/maintainers/LazerTiberius) ![](https://www.gravatar.com/avatar/4ad423c1a13233ac4486927fc68b246829f8c652582b058d4531a0e08968c076?d=identicon)[frwg](/maintainers/frwg) --- Top Contributors [![werrolf](https://avatars.githubusercontent.com/u/24895932?v=4)](https://github.com/werrolf "werrolf (166 commits)")[![eSlider](https://avatars.githubusercontent.com/u/1188335?v=4)](https://github.com/eSlider "eSlider (156 commits)")[![DavidPatzke](https://avatars.githubusercontent.com/u/5700151?v=4)](https://github.com/DavidPatzke "DavidPatzke (18 commits)")[![frwg](https://avatars.githubusercontent.com/u/44997160?v=4)](https://github.com/frwg "frwg (9 commits)")[![createreadupdate](https://avatars.githubusercontent.com/u/86948738?v=4)](https://github.com/createreadupdate "createreadupdate (4 commits)")[![chringel21](https://avatars.githubusercontent.com/u/6780575?v=4)](https://github.com/chringel21 "chringel21 (1 commits)")[![simonseyock](https://avatars.githubusercontent.com/u/8100558?v=4)](https://github.com/simonseyock "simonseyock (1 commits)") --- Tags jqueryassetsvis-ui ### Embed Badge ![Health badge](/badges/mapbender-vis-uijs/health.svg) ``` [![Health](https://phpackages.com/badges/mapbender-vis-uijs/health.svg)](https://phpackages.com/packages/mapbender-vis-uijs) ``` ### Alternatives [mistic100/jquery-querybuilder jQuery plugin for user friendly query/filter creator 1.7k54.1k2](/packages/mistic100-jquery-querybuilder)[skeeks/yii2-assets-auto-compress Automatically compile and merge files js + css + html in yii2 project 162437.6k6](/packages/skeeks-yii2-assets-auto-compress)[widmogrod/zf2-assetic-module Zend Framework 2 module that provides complete integration of Assetic library 144348.5k8](/packages/widmogrod-zf2-assetic-module)[yiisoft/assets Asset bundles and asset manager 21318.1k34](/packages/yiisoft-assets)[jupitern/table HTML table generation for PHP. integrates with your favourite orm and js library 2614.0k](/packages/jupitern-table)[tatter/frontend Opinionated suite of frontend tech for CodeIgniter 4 125.3k](/packages/tatter-frontend) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)