README

本包提供基于 Bootstrap 和 jQuery UI 的JavaScript UI生成器。

特性

• 生成表单和输入元素
• 检查和填写表单
• 标签导航

示例

• 基本

元素

描述如何使用元素生成器。

输入

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

选项

• name: 字段名称
• title: 标题字符串
• placeholder: 输入字段中的占位符
• mandatory: 必填字段：true, false 或 ReExpr ("/^\d+$/g" - 仅允许小数)
• cssClass: CSS类名称
• css: 自定义CSS样式对象。例如：{width: "80%"}
• value: 默认值

文本区域

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

选项

• name: 字段名称
• title: 标题字符串
• placeholder: 输入字段中的占位符
• mandatory: 必填字段：true, false 或 ReExpr ("/^\d+$/g" - 仅允许小数)
• cssClass: CSS类名称
• css: 自定义CSS样式对象。例如：{width: "80%"}
• value: 默认值

复选框

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

选项

• name: 字段名称
• title: 标题字符串
• placeholder: 输入字段中的占位符
• mandatory: 必填字段：true, false 或 ReExpr ("/^\d+$/g" - 仅允许小数)
• cssClass: CSS类名称
• css: 自定义CSS样式对象。例如：{width: "80%"}
• value: 默认值

单选按钮

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

选项

• name: 字段名称
• title: 标题字符串
• placeholder: 输入字段中的占位符
• mandatory: 必填字段：true, false 或 ReExpr ("/^\d+$/g" - 仅允许小数)
• cssClass: CSS类名称
• css: 自定义CSS样式对象。例如：{width: "80%"}
• value: 默认值

选择框

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

选项

• name: 字段名称
• title: 标题字符串
• mandatory: 必填字段：true, false 或 ReExpr ("/^\d+$/g" - 仅允许小数)
• cssClass: CSS类名称
• css: 自定义CSS样式对象。例如：{width: "80%"}
• value: 默认值
• options: 键/值对象或数组
• multiply: 多选。默认false

基本用法示例

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');
        }
    }]
});

集成

通过 eslider/vis-ui.js 扩展composer依赖项并更新composer。

composer update

将JS库加载到HTML中。

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

添加CSS样式。

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

包管理器

• Composer: viscreation/vis-ui.js