jQuery 插件 - ginkgo


配置

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

var opts_dialog = {
  selector: {
    // 选择器定义
  }
  btn_text: {
    // 按钮文字定义
  },
  tpl: '', // 对话框模板
  btn_tpl: '', // 按钮模板 1.0.1 新增
  input_tpl: '' // 输入框模板 1.0.1 新增
};

selector 选择器定义

对象 定义 默认值 备注
modal 对话框本体 .bg-confirm-modal
msg 对话消息 .bg-msg
cancel 取消按钮 .bg-cancel
confirm 确认按钮 .bg-confirm
ok OK 按钮 .bg-ok
group_confirm 用于 confirm 的按钮组 .bg-group-confirm
group_alert 用于 alert 的按钮组 .bg-group-alert 1.0.1 弃用
input_label input 的说明 .bg-input-label 1.0.1 新增
input_control input 的输入框 .bg-input-control 1.0.1 新增
var opts_dialog = {
  // ...
  selector: {
    modal: '.bg-confirm-modal',
    msg: '.bg-msg',
    cancel: '.bg-cancel',
    confirm: '.bg-confirm',
    ok: '.bg-ok',
    group_confirm: '.bg-group-confirm',
    group_alert: '.bg-group-alert'
  },
  // ...
};

btn_text 按钮文字定义

对象 定义 默认值
cancel 取消按钮文字 Cancel
confirm 确定按钮文字 Confirm
ok 确定按钮文字 OK
var opts_dialog = {
  // ...
  btn_text: {
    cancel: 'Cancel',
    confirm: 'Confirm',
    ok: 'OK'
  },
  // ...
};

tpl 对话框模板

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

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

默认值

<div class="modal bg-confirm-modal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <div class="bg-msg"></div>
      </div>
      <div class="modal-footer bg-footer"></div>
    </div>
  </div>
</div>

如:

var opts_dialog = {
  // ...
  tpl: '<div class="modal bg-confirm-modal">' +
    '<div class="modal-dialog modal-dialog-centered">' +
      '<div class="modal-content">' +
        '<div class="modal-body">' +
          '<p class="bg-msg"></p>' +
        '</div>' +
        '<div class="modal-footer bg-footer"></div>' +
      '</div>' +
    '</div>' +
  '</div>'
  // ...
};

btn_tpl 按钮模板

1.0.1 新增

此处主要定义按钮

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

默认值

var opts_dialog = {
  // ...
  btn_tpl: {
    alert: '<button type="button" class="btn btn-primary btn-sm bg-ok" data-dismiss="modal">OK</button>', // alert
    confirm: '<button type="button" class="btn btn-outline-secondary btn-sm bg-cancel bg-group-confirm" data-act="cancel">Cancel</button> <button type="button" class="btn btn-primary btn-sm bg-confirm bg-group-confirm" data-act="confirm">Confirm</button>' // confirm
  },
  // ...
};

input_tpl 输入框模板

1.0.1 新增

此处主要定义输入框

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

默认值

var opts_dialog = {
  // ...
  input_tpl: '<div class="form-group"><label class="bg-input-label"></label><input type="text" class="form-control bg-input-control"></div>'
  // ...
};

更新时间 10-15 12:23
Top