Material Design对话框生成器 – duDialog
栏目分类:模态 / 弹出窗口   发布日期:2021-08-31   浏览次数:

duDialog 是一个纯 JavaScript 插件,用于创建受Material Design启发的警报、确认、选择对话框弹出窗口,没有任何依赖项。

使用:

首先,将 duDialog 的 JavaScript 和 CSS 文件插入页面。

<link href="duDialog.css" rel="stylesheet">
<script src="duDialog.js"></script>

创建一个带有 OK 按钮的基本警报对话框。

new duDialog('Alert 标题', 'Alert 信息内容.');

创建一个带有回调的确认对话框。

new duDialog('html369.cn', '你确认吗?', duDialog.OK_CANCEL, { 
    okText: 'Confirm',
    callbacks: {
      okClick: function(){
        // 做些事情
      },
      cancelClick: function(){
        // 做些事情
      }
    }
});
new duDialog('选择一个项目', ['html', '369', 'cn'], {
  selection: true, 
  callbacks: {
    itemSelect: function(e, item){
      // this.value
    }
  }
});
 
// 或
new duDialog('选择一个项目', 
    [{ name: 'html', id: 1 }, { name: '369', id: 2 }, { name: 'cn', id: 3 }], 
    {
    selection: true,
    textField: 'name',
    valueField: 'id',
    callbacks: {
      itemSelect: function(e, i){
        // this.value
      }
    }
});

具有默认值的所有可选设置。

// 对话框容器的 id 属性
id: null,
 
// 确定是否只初始化
init: false,
 
// 确定黑暗主题是否在
dark: false,
 
// 1 - 默认操作按钮 (OK); 
// 2 - 确定和取消按钮; 
// 3 - 是、否和取消按钮
// 4 - 无操作按钮(用于单选对话框)
buttons: 1,
 
// “确定”按钮的文本
okText: 'Ok',
 
// “取消”按钮的文本
cancelText: 'Cancel',
 
// 确定对话框是否用于项目选择
selection: false,
 
// 确定(单个)选择对话框是否会显示 OK_CANCEL 按钮以供确认
confirmSelect: false,
 
// 判断是否多选
multiple: false, 
 
// 确定所需的最小选择(仅限多选)
minSelect: 1,
 
// 确定所需的最大选择(仅限多选)
maxSelect: null,
 
// 确定是否多重选择(用于选择对话框)
multiple: false,
 
// 确定搜索输入是否可见/启用
allowSearch: false,
 
// 默认选中项值
selectedValue: null,
 
// 选择项值的变量名;将此用于自定义对象结构
valueField: 'value',
 
// 选择项显示文本的变量名;将此用于自定义对象结构
textField: 'item',
 
// 回调函数:okClick、cancelClick、itemSelect(选择对话框)、onSearch(选择对话框)、itemRender(选择对话框)
callbacks: null

所有可能的回调函数。

callbacks: {
  /**
   * 点击确定按钮触发;回调中的“this”指的是对话框对象
   * @param {Event} e - 事件对象;
   */
  okClick(e);
  /**
   * 取消按钮点击触发;回调中的“this”指的是对话框对象
   * @param {Event} e - 事件对象;
   */
  cancelClick(e);
  /**
   * 触发项目选择更改(选择对话框);回调中的“this”指的是单选按钮。
   * 对于多选对话框,点击OK按钮会触发(okClick不会被执行);'this' 不是指复选框
   * @param {Event} e - 事件对象; 
   * @param {string|Object} i - 绑定到单选按钮的选定项(字符串或对象);用于多选的选定项(字符串或对象)数组
   */
  itemSelect(e, i);
  /**
   * 自定义搜索功能,在搜索输入键上触发(选择对话框);回调中的“this”指的是对话框对象。
   * @param {string|Object} i - 选择项目对象或字符串;
   * @param {string} k - 搜索查询字符串
   * @returns boolean (用于匹配项/s)
   */
  onSearch(i, k);
  /**
   * 自定义物品渲染功能;回调中的“this”指的是对话框对象。
   * 注意:如果使用,需要添加自己的样式
   * @param {string|Object} i - 选择项目对象或字符串
   * @returns string/html 标记(用于渲染项目标签)
   */
  itemRender(i);
  /**
   * 如果选中的项目小于最小值(minSelect 配置),则在确定按钮单击时触发
   * @param {number} min - minSelect 值(配置)
   */
  minRequired(min);
  /**
   * 如果选中的项目等于最大值(maxSelect 配置),则触发项目点击
   * @param {number} max - maxSelect 值(配置)
   */
  maxReached(max);
}

官方网站:https://github.com/dmuy/duDialog

相关热词: duDialog对话框

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库