js msgbox 插件

javaScript msgBox 插件说明

初学 JS 参照 vb msgbox 造了一个 js msgBox 的轮子。源码下载链接：https://download.csdn.net/download/yxp_xa/10887656

参数

width : 220,	msgBox 窗体宽度，默认220，最小值为150
height : 170,	msgBox 窗体高度，默认170，最小值为120
title : '提示',	msgBox 窗体标题，默认: "提示"
mode : false,	true 模式对话框， false 非模式，默认为 false
text : '提示内容',	msgBox 提示内容，默认为当天日期
icoType : 'infor',	图标内置: error/infor/query/warning 四种，或者无
buttonText : '确定',	msgBox 按钮文字，多个按钮用字符";"分开, 最多3个按钮
autoClose : false,	true 开启 msgBox 自动关闭，默认 false
timeOut : 3,	msgBox 自动关闭时间，单位秒，默认为 5 秒

返回值

点击窗口关闭返回 0；点击第一个按钮返回 1；第二个返回 2；第三个返回 3

示例

示例1：无图标的简单模式，调用句法：$(this).msgBox('欢迎使用 JS msgBox 插件',function(){});

示例2：自动关闭模式，主要参数：{autoClose : true, icoType : 'query', ...}

示例3：3个按钮，主要参数： {buttonText : '终止/重试/忽略', icoType : 'warning', ...}，各按钮的返回值在回调函数中获取。

调用代码：

<!doctype html>
<html>
<head>
<title>msgBox测试</title>
<meta charset="utf-8"/>
<script src="jquery-3.3.1.min.js"></script>
<script src="msgbox.js"></script>
<style>
p input{width:240px}
</style>
</head>
<body>
<h2>javaScript msgBox 程序</h2>
<h3>参数</h3>
<table><tr><td>width : 220, <td>msgBox 窗体宽度，默认220，最小值为150
<tr><td>height : 170, <td>msgBox 窗体高度，默认170，最小值为120
<tr><td>title : '提示', <td>msgBox 窗体标题，默认: "提示"
<tr><td>mode : false, <td>true 模式对话框， false 非模式，默认为 false
<tr><td>text : '提示内容', <td>msgBox 提示内容，默认为当天日期
<tr><td>icoType : 'infor', <td>图标内置: error/infor/query/warning 四种，或者无
<tr><td>buttonText : '确定', <td>msgBox 按钮文字，多个按钮用字符";"分开, 最多3个按钮
<tr><td>autoClose : false, <td>true 开启 msgBox 自动关闭，默认 false
<tr><td>timeOut : 3, <td>msgBox 自动关闭时间，单位秒，默认为 5 秒
</table>
<h3>返回值</h3>
<p>点击窗口关闭返回 0；点击第一个按钮返回 1； 第二个返回 2； 第三个返回 3</p>
<h3>示例</h3>
<p><input type="text" value="欢迎使用 JS msgBox 插件!" />
<button>msgBox 示例 1</button> <span></span></p>
<p><input type="text" value="这里出现<b>问题</b>了吗？" />
<button>msgBox 示例 2</button> <span></span></p>
<p><input type="text" value="安装过程中源文件 s23.ico 未找到!" />
<button>msgBox 示例 3</button> <span></span></p>
<h3>说明</h3>
<p><span>本程序依赖 jQuery 库，只有一个 msgBox.js 文件，无图标、css 等其他资源文件<br>
用法: $(this).msgBox(prt, function(s){console.log(s);});<br>
参数: prt 也可以仅为字符串，此时 msgBox 进入极简模式<span></p>
<script>
//*******************  示例 1 **********************
$('button:first').click(function(){var prt=$('input:first').val();$(this).msgBox(prt,function(){});
});//*******************  示例 2 **********************
$('button:eq(1)').click(function(){var prt={width:260,height:200,autoClose:true,icoType:'query',title:'提示信息',text:$('input:eq(1)').val()};$(this).msgBox(prt,function(s){if(s==0) $('span:eq(1)').html('你点击了 关闭');if(s==1) $('span:eq(1)').html('你点击了 确定');});
});//*******************  示例 3 **********************
$('button:eq(2)').click(function(){var prt={width:320,icoType:'warning',buttonText:'终止/重试/忽略',text:$('input:eq(2)').val()};$(this).msgBox(prt,function(s){if(s==0) $('span:eq(2)').html('你点击了 关闭');if(s==1) $('span:eq(2)').html('你点击了 终止');if(s==2) $('span:eq(2)').html('你点击了 重试');if(s==3) $('span:eq(2)').html('你点击了 忽略');});
});</script>
</body>
</html>

说明

本程序依赖 jQuery 库，只有一个 msgBox.js 文件，无需图标和css 等其他资源文件
用法: $(this).msgBox(prt, function(s){console.log(s);});
参数: prt 也可以仅为字符串，此时 msgBox 进入极简模式
暂时不支持快捷键，浏览器快捷键太多了，一不小心就冲突，就一个信息框而已，还是算了。

js msgbox 插件相关推荐

WdatePicker，js日期插件，时间相加
//WdatePicker,js日期插件 //点击一个日期选择框后,得到日期,然后另一个日期选择框的日期自动加上一天 function pickedFunc(){ $ ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
webpack常用的三种JS压缩插件
这里讲解三种JS 打包插件: (1)UglifyJS 支持: babel present2015.webpack3 缺点: 它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文 ...
Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
js脚本锁计算机软件,JS使用插件cryptojs进行加密解密数据实例
本文实例讲述了JS使用插件cryptojs进行加密解密数据.分享给大家供大家参考,具体如下: Testing websockets var key = 'BOTWAVEE'; //CBC模式加密 fu ...
html图片编辑器插件,js图片编辑器插件Filerobot
Filerobot是一款js图片编辑器插件.Filerobot可以对图片进行修改尺寸,剪裁,旋转,以及使用内置的滤镜对图片进行过滤. 使用方法在页面中引入下面的文件. 初始化插件 filerbot的 ...
wordpress 调用css,WordPress折腾记-精简CSS及JS在插件中的调用
GD Star Rating loading... 爱折腾WP是我的一个习惯,不折腾就会手痒,哈哈~~此文仅作为一个精简CSS及JS在插件中调用的范例,其他插件的精简可以按照此文的方法来做. 众所周知 ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
js常用插件(三)之html2canvas生成海报
js常用插件之html2canvas截图生成海报欢迎点击: 个人官网博客先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/aja ...
vue原生js打印插件
##需求在vue单页面应用中打印目标区域 ##解决方案使用原生window.print var printhtml = window.getElementById(dom).innerHtml / ...

js msgbox 插件

javaScript msgBox 插件说明

参数

返回值

示例

说明

js msgbox 插件相关推荐

最新文章

热门文章