jQuery plugins


配置

配置为一个 JSON 对象,大致形式及说明如下:

var opts_submit = {
    ajax_url: '', // 提交地址,默认由表单 action 属性定义
    timeout: 30000, // ajax 提交超时
    class_content: {
        // 消息样式定义
    },
    class_icon: {
        // 图标样式定义
    },
    msg_text: {
        // 消息定义
    },
    selector: {
        // 选择器定义
    }
    modal: {
        // 对话框定义
    },
    jump: {
        // 跳转定义
    }
};

class_content 消息样式定义

此处定义的选择器、类名都可以和 tpl 对象的默认值相对应

对象 定义 默认值
submitting 正在提交时 text-info
err 出错时 text-danger
success 成功时 text-success
var opts_submit = {
    // ...
    class_content: {
        submitting: 'text-info',
        err: 'text-danger',
        success: 'text-success'
    },
    // ...
}

class_icon 全局消息容器

此处定义的选择器、类名都可以和 tpl 对象的默认值相对应

对象 定义 默认值
submitting 正在提交时 spinner-grow spinner-grow-sm
err 出错时 fas fa-times-circle
success 成功时 fas fa-check-circle
var opts_submit = {
    // ...
    class_icon: {
        submitting: 'spinner-grow spinner-grow-sm',
        err: 'fas fa-times-circle',
        success: 'fas fa-check-circle'
    },
    // ...
}

msg_text 消息定义

此处定义与字段相关的选择器

对象 定义 默认值
submitting 正在提交时 Submitting ...
err 出错时 Error
var opts_submit = {
    // ...
    msg_text: {
        submitting: 'Submitting ...',
        err: 'Error'
    },
    // ...
}

selector 选择器定义

对象 定义 默认值
submit_btn 提交按钮 [type="submit"]
empty_input 需要清空的表单 :password
jump_link 跳转链接 .bg-jump
var opts_submit = {
    // ...
    selector: {
        submit_btn: '[type="submit"]',
        empty_input: ':password',
        jump_link: '.bg-jump'
    },
    // ...
}

modal 对话框定义

此处主要定义显示提交结果的对话框,用到 bootstrap 的 modal 组件

对象 定义 默认值
tpl 对话框模板
selector 相关选择器
btn_text 按钮文字
delay 对话框停留时间 5000

tpl 对话框模板

请留意模板与 selector 对象的关联

默认值

<div class="modal fade bg-submit-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body d-flex justify-content-between align-items-end">
                <p class="lead bg-content">
                    <span class="bg-icon mr-2"></span>
                    <span class="bg-msg"></span>
                </p>
                <p class="bg-jump"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm bg-close" data-dismiss="modal">Close</button>
                <a href="#" class="btn btn-primary btn-sm bg-ok">OK</a>
            </div>
        </div>
    </div>
</div>

selector 对象

对象 定义 默认值
modal 对话框选择器 .bg-submit-box
content 内容选择器 .bg-content
icon 图标选择器 .bg-icon
msg 消息选择器 .bg-msg
close 关闭按钮选择器 .bg-close
ok 确定按钮选择器 .bg-ok

btn_text 对象

对象 定义 默认值
close 关闭按钮文字 Close
ok 确定按钮文字 OK
var opts_submit = {
    // ...
    modal: {
        selector: {
            modal: '.bg-submit-modal',
            content: '.bg-content',
            icon: '.bg-icon',
            msg: '.bg-msg',
            close: '.bg-close',
            ok: '.bg-ok'
        },
        btn_text: {
            close: 'Close',
            ok: 'OK'
        },
        tpl: '<div class="modal fade bg-submit-modal">' +
            '<div class="modal-dialog modal-dialog-centered">' +
                '<div class="modal-content">' +
                    '<div class="modal-body d-flex justify-content-between align-items-end">' +
                        '<p class="lead bg-content">' +
                            '<span class="bg-icon mr-2"></span>' +
                            '<span class="bg-msg"></span>' +
                        '</p>' +
                        '<p class="bg-jump">' +
                        '</p>' +
                    '</div>' +
                    '<div class="modal-footer">' +
                        '<button type="button" class="btn btn-outline-secondary btn-sm bg-close" data-dismiss="modal">Close</button>' +
                        '<a href="#" class="btn btn-primary btn-sm bg-ok">OK</a>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>',
        delay: 5000
    },
    // ...
}

jump 跳转定义

此处用来定义提交成功后的调转,url 或 text 对象为空时,整个定义无效,页面不会跳转。

对象 定义 默认值
url 跳转地址
text 跳转显示文字
icon 跳转图标 spinner-grow spinner-grow-sm
attach_key 跳转附加参数名
delay 停留时间 3000

attach_key 说明

当定义了此对象,如服务器的返回结果中有与此一致的对象,则会以 attach_key={:attach_value} 的形式附加到 url 后,{:attach_value} 为服务器返回的值。

var opts_submit = {
    // ...
    jump: {
        url: '',
        text: '',
        icon: 'spinner-grow spinner-grow-sm',
        attach_key: '',
        delay: 3000
    },
    // ...
}