【JS】封装的弹窗表单-xForm

弹窗表单

可以在资源处下载css样式，或者自己写css也可以的

• Js代码

'use strict';

const yue = {
    info:function (){
        console.log('WelCome to use xForm by XiaoLong!')
    }
};

(function (yue, document) {
    /*创建xForm模型*/
    let xForm = function (options) {
        yue.info();
        this.formInit(options);
    }
    /*实例xForm对象*/
    xForm.prototype = {
        formInit({
                     app='',
                     animate='',
                     title = '标题',
                     url='',
                     method ='post',
                     onsubmit = true,
                     element=([]),
                     button=([])
                 }) {
            /*表单属性传值*/
            yue.app = app;
            this.animate = animate;
            this.title = title;
            this.url = url;
            this.method = method;
            this.onsubmit = onsubmit;
            this.element = element;
            this.button = button;
            /*创建表单元素*/
            this.createFormElement();
            /*显示弹窗和遮罩*/
            this.xShow();
            /*绑定关闭事件*/
            this.xClose();
        },
        /*初始化表单元素*/
        createFormElement(){
            /*创建遮罩*/
            yue.overlay = document.createElement('div');
            yue.overlay.className='animated fadeIn xOverlay';
            /*创建卡片*/
            $(yue.app).html('<div class="animated yue-card '+this.animate+'"><div class="yue-card-header"></div><div class="yue-card-container"></div></div>');
            /*创建标题信息*/
            $('.yue-card-header').html('<span class="yue-title">'+this.title+'</span><button type="button" id="xClose" class="xClose"><span class="xClose-span" aria-hidden="true">&times;</span></button>');
            /*创建表单*/
            $('.yue-card-container').html('<form id="yue-mainForm"><div class="yue-input-group"></div><div class="yue-btn-group"></div></form>');
            /*设置表单属性*/
            $('#yue-mainForm')
                .attr("action",this.url)
                .attr('method',this.method)
                .attr('onsubmit','return '+this.onsubmit);

            /*创建表单元素*/
            for (let i=0;i<this.element.length;i++){
                if(this.element[i].type ==='select'){
                    this.initSelect(i);
                }else if (this.element[i].type ==='textarea'){
                    this.initTextArea(i);
                } else {
                    this.initInput(i);
                }

            }

            /*创建底部按钮*/
            for (let i=0;i<this.button.length;i++){
                $('.yue-btn-group').append('<button id="btn-'+i+'"></button>')
                $('#btn-'+i)
                            .attr('type',this.button[i].type)
                            .attr('value',this.button[i].value)
                            .attr('class',this.button[i].classes)
                    .text(this.button[i].text)
            }
            $('.yue-btn-group').append('<div class="xClear"></div>')
        },
        /*创建输入框*/
        initInput(i){
            /*创建标签*/
            $('.yue-input-group')
                .append('<div class="yue-row">' +
                    '<label class="yue-input-text col-sm-2 '+i+'" for='+i+'></label>' +
                    '<div class="col-sm-10"><input class="xForm-control" id='+i+'></div>' +
                    '</div>');
            $('.'+i).text(this.element[i].label);
            $('#'+i)
                .attr('type',this.element[i].type)
                .attr('name',this.element[i].name)
                .attr('disabled',this.element[i].disabled)
                .attr('value',this.element[i].value)
                .attr('readOnly',this.element[i].readOnly)
                .attr('hidden',this.element[i].hidden)
                .attr('placeholder',this.element[i].placeholder)
            if(this.element[i].hidden!=true){
                $('.yue-input-group').append('<div class="hr-line-dashed"></div>')
            }
        },
        /*创建下拉框*/
        initSelect(i){
            /*创建标签*/
            $('.yue-input-group')
                .append('<div class="yue-row">' +
                    '<label class="yue-input-text col-sm-2 '+i+'" for='+i+'></label>' +
                    '<div class="col-sm-10"><select class="xSelect" id='+i+'></div>' +
                    '</div>');
            $('.'+i).text(this.element[i].label);
            $('#'+i)
                .attr('name',this.element[i].name)
                .attr('value',this.element[i].value)
                .attr('hidden',this.element[i].hidden)
            if(this.element[i].hidden!=true){
                $('.yue-input-group').append('<div class="hr-line-dashed"></div>')
            }
            for (let j=0;j<this.element[i].option.length;j++){
                    $('#'+i).append('<option class="xOption" id="option'+i+''+j+'"></option>');
                    $('#option'+i+j)
                        .text(this.element[i].option[j].text)
                        .attr('value',this.element[i].option[j].value)
                        .attr('selected',this.element[i].option[j].selected);

                }
        },
        /*创建文本域*/
        initTextArea(i){
            $('.yue-input-group')
                .append('<div class="yue-row">' +
                    '<label class="yue-input-text col-sm-2 '+i+'" for='+i+'></label>' +
                    '<div class="col-sm-10"><textarea class="xText" id='+i+'></textarea>');
            $('.'+i).text(this.element[i].label);
            $('#'+i)
                .attr('name',this.element[i].name)
                .attr('cols',this.element[i].cols)
                .attr('rows',this.element[i].rows)
                .text(this.element[i].placeholder);
            $('.yue-input-group').append('<div class="hr-line-dashed"></div>')

        },
        /*显示事件*/
        xShow(){
            //把遮罩插入到页面中
            $(yue.app).show();
             document.body.appendChild(yue.overlay);
            setTimeout(() => {
               $(yue.app).css({position:'relative',zIndex:'6'})
                yue.overlay.style.opacity = "1";
            })
        },
        /*关闭事件*/
        xClose(){
            $('#xClose').on('click',function (){
                $('.yue-input-group').hide(400)
                $(yue.app).hide(600);
                setTimeout(() =>{
                    $(yue.app).html(null)
                },610)
                $('.xOverlay').fadeOut(600);
            })
        }
    }
    /*将xForm绑定到yue下*/
    yue.xForm = xForm;
})(yue, document);