jquery小技巧:使用jquery.confirm和PNotify实现弹出提示和消息提示

简介: 在从UIKIT前端换到BOOSTRAP前端时,一些转换的技巧。 https://myclabs.github.io/jquery.confirm/ http://sciactive.github.io/pnotify/ 相关的JS: $.confirm({ text: "将发布单" + deploy_version + "从" + org_type + "部署到" + env_type + "环境。

在从UIKIT前端换到BOOSTRAP前端时,一些转换的技巧。

https://myclabs.github.io/jquery.confirm/

http://sciactive.github.io/pnotify/

相关的JS:

$.confirm({
            text: "将发布单" + deploy_version + "从" + org_type + "部署到" + env_type + "环境。是否确认?",
            confirm: function() {
                promiseJenkins = $.ajax({
                    url:'xxx',
                    type: 'post',
                    data:{
                        deploy_version: deploy_version,
                        env_type: env_type,
                        org_type: org_type,
                    },
                    dataType: 'json',
                    beforeSend: function(){
                        $(_self).attr('disabled',"true");
                        $(_self).append("<i class='fa fa-spinner'></i>");

                    },
                    error: function (jqXHR, textStatus, errorThrown){
                         new PNotify({
                          title: '错误',
                          text: '环境流转发生错误,请联系棱镜开发人员',
                          type: 'error',
                           nonblock: {
                              nonblock: true
                          },
                          hide: false,
                          styling: 'bootstrap3'

                         });
                    },
                    success: function(json){
                        $(_self).children('i').remove();
                        $(_self).append("<i class='fa fa-check'></i>")
                        window.location.reload();
                        new PNotify({
                          title: '成功',
                          text: '环境流转成功!',
                          type: 'success',
                          nonblock: {
                              nonblock: true
                          },
                          hide: false,
                          styling: 'bootstrap3'
                         });
                    }
                });

  效果:

 

目录
相关文章
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
291 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
545 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
267 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
157 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
JQuery重复校验导致出现双重提示的问题记录
最近在用JQuery Validate做表单校验时,由于需要校验用户名:1、是否符合注册规则;2、是否为空;3、是否已被注册;4、是否包含特殊字符,但问题来了,第一次点击是校验非空,但输入非法的用户名后会提示不符合注册规则,遂将其删掉,这时便出现了所述问题:既校验了非空,又校验了注册规则。
102 0
JQuery重复校验导致出现双重提示的问题记录
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
188 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
107 0
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
352 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
缓存 JavaScript 前端开发
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
469 0
JavaScript、jQuery实现“社区便利店收银系统”
|
JavaScript 前端开发
jQuery实现表格行的删除和增加
使用jQuery实现对表格元素行的删除和增加效果
266 0
jQuery实现表格行的删除和增加