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('
+this.animate+'">
'
); /*创建标题信息*/ $('.yue-card-header').html(''+this.title+''); /*创建表单*/ $('.yue-card-container').html('
'
); /*设置表单属性*/ $('#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('') $('#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('
'
) }, /*创建输入框*/ initInput(i){ /*创建标签*/ $('.yue-input-group') .append('
' + 'i+'" for='+i+'>' + '
'
+ '
'
); $('.'+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('
'
) } }, /*创建下拉框*/ initSelect(i){ /*创建标签*/ $('.yue-input-group') .append('
' + 'i+'" for='+i+'>' + '
'); $('.'+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('
'
) }, /*显示事件*/ 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);

你可能感兴趣的:(JS,js,jquery,javascript)