JQuery信息提示框插件 jquery.toast.js 的使用

最新推荐文章于 2024-06-12 09:52:23 发布

暗恋花香

最新推荐文章于 2024-06-12 09:52:23 发布

阅读量1.1w

点赞数 5

分类专栏： # JavaScript/jQuery 文章标签： JQuery信息提示框插件 JQuery toast

本文链接：https://blog.csdn.net/qq_42324086/article/details/99702035

版权

JavaScript/jQuery 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

1.下载

https://github.com/kamranahmedse/jquery-toast-plugin

在线预览地址

2.导入

在页面中引入jquery.toast.css文件，jquery和jquery.toast.js文件。

<link type="text/css" rel="stylesheet" href="css/jquery.toast.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.toast.js"></script>

bootcdn引入

<link href="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>

3.使用

你可以通过js事件去触发

简单文本的消息提示框：
$.toast('Here you can put the text of the toast');

自定义样式使用

 /**
     * 提示框
     * @param text
     * @param icon
     * @param hideAfter
     */
    function showMsg(text, icon, hideAfter) {
        if (heading == undefined) {
            var heading = "提示";
        }
        $.toast({
            text: text,//消息提示框的内容。
            heading: heading,//消息提示框的标题。
            icon: icon,//消息提示框的图标样式。
            showHideTransition: 'fade',//消息提示框的动画效果。可取值：plain，fade，slide。
            allowToastClose: true,//是否显示关闭按钮。(true 显示，false 不显示)
            hideAfter: hideAfter,//设置为false则消息提示框不自动关闭.设置为一个数值则在指定的毫秒之后自动关闭消息提框
            stack: 1,//消息栈。同时允许的提示框数量
            position: 'top-center',//消息提示框的位置：bottom-left, bottom-right,bottom-center,top-left,top-right,top-center,mid-center。
            textAlign: 'left',//文本对齐：left, right, center。
            loader: true,//是否显示加载条
	 //bgColor: '#FF1356',//背景颜色。
	 //textColor: '#eee',//文字颜色。
            loaderBg: '#ffffff',//加载条的背景颜色。

			beforeShow: function(){
				alert('The toast is about to appear');
			},

			afterShown: function () {
				alert('Toast has appeared.');
			},

			beforeHide: function () {
				alert('Toast is about to hide.');
			},

			afterHidden: function () {
				alert('Toast has been hidden.');
			}

			/*toast事件
			beforeShow 会在toast即将出现之前触发
			afterShown 会在toast出现后触发
			beforeHide 会在toast藏起来之前触发
			afterHidden 会在toast藏起来后被触发
			*/
        });
    }

4.示例（可以直接执行）

<!doctype html>
<html lang="zh">
 <head>
	<meta charset="utf-8">
	<title>JQuery信息提示框插件 jquery.toast.js 的使用</title>
	<link href="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
 </head>

 <body>
	 <button class="btn btn-success" name="success"id="simple"> 简单文本的消息提示框 </button>
	 <button class="btn btn-success" name="success"id="success"> 成功 </button>
     <button class="btn btn-info" name="info"id="info">提示</button>
     <button class="btn btn-warning" name="warning"id="warning">警告</button>
     <button class="btn btn-danger" name="error"id="error">错误</button>

	<script>
		 $(function(){
			$("#simple").click(function(){
				$.toast('Here you can put the text of the toast');
			})

			$("#success").click(function(){
				showMsg("成功样式！", "success", 2000);
			})
			$("#info").click(function(){
				showMsg("提示样式！", "info", 2000);
			});

			$("#warning").click(function(){
				showMsg("警告样式！", "warning", 2000);
			})
			$("#error").click(function(){
				showMsg("错误样式！", "error", 2000);
			})
		
    });
	
	 /**
     * 提示框
     * @param text
     * @param icon
     * @param hideAfter
     */
    function showMsg(text, icon, hideAfter) {
        if (heading == undefined) {
            var heading = "提示";
        }
        $.toast({
            text: text,//消息提示框的内容。
            heading: heading,//消息提示框的标题。
            icon: icon,//消息提示框的图标样式。
            showHideTransition: 'fade',//消息提示框的动画效果。可取值：plain，fade，slide。
            allowToastClose: true,//是否显示关闭按钮。(true 显示，false 不显示)
            hideAfter: hideAfter,//设置为false则消息提示框不自动关闭.设置为一个数值则在指定的毫秒之后自动关闭消息提框
            stack: 1,//消息栈。同时允许的提示框数量
            position: 'top-center',//消息提示框的位置：bottom-left, bottom-right,bottom-center,top-left,top-right,top-center,mid-center。
            textAlign: 'left',//文本对齐：left, right, center。
            loader: true,//是否显示加载条
			//bgColor: '#FF1356',//背景颜色。
			//textColor: '#eee',//文字颜色。
            loaderBg: '#ffffff',//加载条的背景颜色。

			beforeShow: function(){
				alert('The toast is about to appear');
			},

			afterShown: function () {
				alert('Toast has appeared.');
			},

			beforeHide: function () {
				alert('Toast is about to hide.');
			},

			afterHidden: function () {
				alert('Toast has been hidden.');
			}

			/*toast事件
			beforeShow 会在toast即将出现之前触发
			afterShown 会在toast出现后触发
			beforeHide 会在toast藏起来之前触发
			afterHidden 会在toast藏起来后被触发
			*/
        });
    }

	</script>
 </body>
</html>

5.示例下载

https://download.csdn.net/download/qq_42324086/11576289

暗恋花香

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
JQuery信息提示框插件 jquery.toast.js 的使用

1.下载https://github.com/kamranahmedse/jquery-toast-plugin在线预览地址2.导入在页面中引入jquery.toast.css文件，jquery和jquery.toast.js文件。<link type="text/css" rel="stylesheet" href="css/jquery.toast.css">...
复制链接

扫一扫