配置为一个 JSON 对象,大致形式及说明如下:
var opts_submit = {
ajax_url: '', // 提交地址,默认由表单 action 属性定义
timeout: 30000, // ajax 提交超时
class_msg: {
// 消息样式定义
},
class_icon: {
// 图标样式定义
},
msg: {
// 消息定义
},
selector: {
// 选择器定义
},
tpl: '' // 容器模板
};
此处定义的选择器、类名都可以和 tpl 对象的默认值相对应
对象 | 定义 | 默认值 |
---|---|---|
submitting | 正在提交时 | text-info |
err | 出错时 | text-danger |
success | 成功时 | text-success |
var opts_submit = {
// ...
class_msg: {
submitting: 'text-info',
err: 'text-danger',
success: 'text-success'
},
// ...
}
此处定义的选择器、类名都可以和 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'
},
// ...
}
此处定义与表单相关的选择器
对象 | 定义 | 默认值 |
---|---|---|
submitting | 正在提交时 | Submitting ... |
complete | 清理完毕时 | Complete |
err | 出错时 | Error |
var opts_submit = {
// ...
msg: {
submitting: 'Submitting ...',
complete: 'Complete',
err: 'Error'
},
// ...
}
对象 | 定义 | 默认值 |
---|---|---|
content | 消息容器 | .bg-clear |
progress | 进度条 | .bg-progress |
msg | 消息 | .bg-jump |
msg_content | 消息内容 | .bg-msg-content |
var opts_submit = {
// ...
selector: {
content: '.bg-clear',
progress: '.bg-progress',
msg: '.bg-msg',
icon: '.bg-icon',
msg_content: '.bg-msg-content'
},
// ...
}
此处主要定义显示提交结果的消息,用到 bootstrap 的 progress 组件
请留意模板与 selector 对象的关联
默认值
<div class="bg-clear my-3 collapse">
<div class="mb-3">
<div class="bg-progress progress">
<div class="progress-bar progress-bar-info progress-bar-striped active"></div>
</div>
</div>
<div>
<div class="bg-msg">
<span class="bg-icon"></span>
<span class="bg-msg-content"></span>
</div>
</div>
</div>
如:
var opts_submit = {
// ...
tpl: '<div class="bg-clear my-3 collapse">' +
'<div class="mb-3">' +
'<div class="bg-progress progress">' +
'<div class="progress-bar progress-bar-info progress-bar-striped active"></div>' +
'</div>' +
'</div>' +
'<div>' +
'<div class="bg-msg">' +
'<span class="bg-icon"></span> ' +
'<span class="bg-msg-content"></span> ' +
'</div>' +
'</div>' +
'</div>',
// ...
}