轻量级Material Design风格jquery对话框插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > 轻量级Material Design风格jquery对话框插件
轻量级Material Design风格jquery对话框插件
分享:

    插件介绍

    jquery.msgBox.js是一款轻量级的Material Design风格jquery对话框插件。它压缩后的版本仅1kb,并且允许自定义对话框的图标,以及设置回调函数。

    浏览器兼容性

    浏览器兼容性
    时间:2016-10-31
    阅读:
简要教程

jquery.msgBox.js是一款轻量级的Material Design风格jquery对话框插件。它压缩后的版本仅1kb,并且允许自定义对话框的图标,以及设置回调函数。

使用方法

在页面引入jquery.msgBox.min.css,jquery,jquery.msgBox.min.js文件。

<link rel="stylesheet" href="jquery.msgBox.min.css">
<script src="jquery.min.js"></script>
<script src=jquery.msgBox.min.js"></script>          
                
调用对话框

可以使用下面的方法来调用对话框。

$('.msgBox-testArea').msgBox({
  title: '对话框的标题',
  message: '对话框中的内容。。。'
});

                

你也可以为对话框添加自定义的按钮。

$('.msgBox-testArea').msgBox({
  title: '对话框的标题',
  message: '对话框中的内容。。。',
  buttons: [{
    text: 'Show',
    callback: function() {
      // 这里是回调函数
    }
  },
  {
    text: 'Hide',
    callback: function() {
      // 这里是回调函数
    }
  }],
});
                  
                

还可以为对话框设置淡入淡出效果。

$('.msgBox-testArea').msgBox({
  title: '对话框的标题',
  message: '对话框中的内容。。。',
  buttons: [{
    text: 'Show',
    callback: function() {
      // 这里是回调函数
    }
  },
  {
    text: 'Hide',
    callback: function() {
      // 这里是回调函数
    }
  }],
  blend: true,
  blendDuration: 400
});
                  
                
设置对话框的图标

你可以为对话框设置一些内置的图标,可用的图标有:

  • check
  • download
  • exclamation
  • info
  • lock
  • unlock
  • play
  • plus
  • question
  • remove
  • stop

例如:

$('.msgBox-testArea').msgBox({
  type: 'question'
});                  
                

jquery.msgBox.js对话框插件的github地址为:https://github.com/marwils/jquery.msgBox.js

网友评论