Javascript

最新2.7.0Notiflix.js——前端消息提示框、通知框、对话框的使用,最新版不需要提前声明,可以直接使用,且可以自己设置属性。

本文主要是介绍最新2.7.0Notiflix.js——前端消息提示框、通知框、对话框的使用,最新版不需要提前声明,可以直接使用,且可以自己设置属性。,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

最新2.7.0Notiflix.js——前端消息提示框、通知框、对话框的使用,最新版不需要提前声明,可以直接使用,且可以自己设置属性。

  • Notiflix.js是一款非常精美的消息通知框对话框确认框和Loading插件,可生成漂亮网页消息通知框、对话框、确认框和Loading加载动画效果。如下部分:

1. 通知弹框


2. 报告弹框


3. 确认弹框


4. 加载动画


  • 官网(国内访问貌似有点儿慢,没有途径就等一等):https://www.notiflix.com/


  • 默认已经引入CDN:

<script type="text/javascript" src="http://yourjavascript.com/95122811714/notiflix-aio-2-7-0-min.js" ></script>


  • 使用方法(直接在JS中使用,在最新的版本中已经不需要提前声明,直接即可使用):

//通知弹框
Notiflix.Notify.Success('成功型的通知');
Notiflix.Notify.Failure('失败型的通知');
Notiflix.Notify.Warning('警告型的通知');
Notiflix.Notify.Info('普通型的通知');、
	//函数式用法,以成功型为例
Notiflix.Notify.Success('点击我', function(){
	//添加自己函数
});


//报告弹框
Notiflix.Report.Success( '成功型的报告,标题部分', '成功型的报告,主体内容部分', '确定按钮', ); 
Notiflix.Report.Failure( '失败型的报告,标题部分', '失败型的报告,主体内容部分', '确定按钮' ); 
Notiflix.Report.Warning( '警告型的报告,标题部分', '警告型的报告,主体内容部分', '确定按钮' ); 
Notiflix.Report.Info( '普通型的报告,标题部分', '普通型的报告,主体内容部分', '确定按钮' ); 
	//函数式用法,以成功型为例
Notiflix.Report.Success('标题','主体内容部分','按钮',function(){
	//添加自己函数
});


	
//确认弹框
 Notiflix.Confirm.Show( '标题部分', '你同意吗?', '同意', '不同意', function(){
	//添加自己的点击同意按钮后的函数
 }, function(){ 
	//添加自己的点击不同意按钮后的函数
 } ); 


//加载动画,五种类型
Notiflix.Loading.Standard('Loading...');
Notiflix.Loading.Hourglass('Loading...');
Notiflix.Loading.Circle('Please wait...');
Notiflix.Loading.Pulse();
Notiflix.Loading.Init({ customSvgUrl:'加载动画图标.svg', svgSize:'80px', }); 
	//去除加载动画函数
Notiflix.Loading.Remove(600);//括号里设置的持续时间,不填就是立刻结束
  • 当然像width、titleColor等属性也是可以设置的,如下,一般来说默认的就可以了,自己需要的可以去官网Documentation找一找:

 Notiflix.Report.Init({ success: {svgColor:"#35976a",titleColor:"#d49a9a",buttonBackground:"#6adca8",}, }); 
这篇关于最新2.7.0Notiflix.js——前端消息提示框、通知框、对话框的使用,最新版不需要提前声明,可以直接使用,且可以自己设置属性。的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!