前端提示框插件sweetalert

sweetalert是一款前端提示框插件,使用也非常简单,而且还内置了许多参数,他可以替代alert()本站即采用的该款插件提示,今天把使用方法提供给大家!

1、引入JS和CSS文件

可以直接进入官网下载然后到头部进入或者直接从CDN引入,需要引用jq

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

2、开始使用

在需要使用弹窗提示的地方加入以下代码

swal("操作完成", "一个完美的提示框!", "success")

也可以使用参数

swal({
    title:"成功",
    text:'文本',
    type:'success',
    // showCancelButton:false
    // showConfirmButton:false //确认按钮 ok
    html:true
})

其一: swal("恭喜","添加成功","success"); 第一个参数是title,第二个参数是text,第三个参数是提醒类型(success,error,warning,input),三个参数皆非必写项。最简便写法:swal("");就弹出一个框,上面有个确定按钮。不可写作:

swal();

该弹窗提供以下参数可供修改

参数默认值描述
titlenull(required)窗口的名称。可以通过对象的”title”属性或第一个参数进行传递。
textnull窗口的描述。可以通过对象的”text”属性或第二个参数进行传递。
type/iconnull窗口的类型。SweetAlert 有4种类型的图标动画:”warning”, “error”, “success” 和 “info”.可以将它放在”type”数组或通过第三个参数传递。
allowOutsideClickfalse如果设置为“true”,用户可以通过点击警告框以外的区域关闭警告框。
showConfirmButtontrue是否显示“确认/ok”按钮  可用参数  “false”   “true”
showCancelButtonfalse是否显示“取消”按钮  可用参数  “false”   “true”
confirmButtonText“OK”该参数用来改变确认按钮上的文字。如果设置为”true”,那么确认按钮将自动将”Confirm”替换为”OK”。
confirmButtonColor“#AEDEF4”该参数用来改变确认按钮的背景颜色(必须是一个HEX值)。
cancelButtonText“Cancel”该参数用来改变取消按钮的文字。
closeOnConfirmtrue如果希望以后点击了确认按钮后模态窗口仍然保留就设置为”false”。该参数在其他SweetAlert触发确认按钮事件时十分有用。
imageUrlnull添加自定义图片到警告框上。必须是图片的完整路径。
imageSize“80×80”当设定图片的路径后,你可以设定图片的大小,格式为两个数字中间带个”x”符号。
timernull

警告框自动关闭的时间。单位是ms。

 

 

animation:提示框弹出时的动画效果,如slide-from-top(从顶部滑下)等。

 html:是否支持html,默认false,写成true以后,text里就可以写html元素。

下面给出一个demo:

在一些情景模式中,我们需要点击一个按钮,然后有确定和取消的选择,选择了确定就执行取消,选择了取消,就什么也不做。

首先在html中有:
<button class="btn btn-danger center" onClick="check(${article.id })">删除</button>
表面我想删除一条信息,然后利用sweetalert给我们弹出对话框并做出选择。其中js中代码如下

function check(id){
    swal({
        title:"您确定要删除这条信息吗",
        text:"删除后将无法恢复,请谨慎操作!",
        type:"warning",
        showCancelButton:true,
        confirmButtonColor:"#DD6B55",
        confirmButtonText:"是的,我要删除!",
        cancelButtonText:"让我再考虑一下…",
        closeOnConfirm:false,
        closeOnCancel:false
    },function(isConfirm){
        if(isConfirm){
            swal({
                title:"删除成功!",
                text:"您已经永久删除了这条信息。",
                type:"success"
            },function(){
                window.location="${pageContext.request.contextPath}/admin?action=deleteArticleById&id="+id
            })
        }else{
            swal({
                title:"已取消",
                text:"您取消了删除操作!",
                type:"error"
            })
                }
                    }
        )
}

然后当我们点击一下删除按钮,就会利用sweetalert弹出确认删除的对话框,我们点击确定就删除,点击取消就取消了。sweetalert的对话框特别漂亮,
总的来说,它最基本的格式就是: swal({ 写弹的内容,样式,颜色},{ 写后面执行的代码; })我们所有需要执行的代码全部放到那个后面的那里。
上面的代码,点击删除后会出现下图:

可以发现成功的弹出来了对话框,此时注意下背后的id,显示共37条数据,然后我们测试点击取消。出现了下图

发现后面的没有变化。说明没有删除,然后再次点击删除并点击确定删除,如下图:

最后一个id已经变为36了,表面成功删除!上面的就是简单的利用
SweetAlert进行弹出对话框执行常规的删除确定取消等操作。

对于新手来说最重要的就是

 swal({ 写弹的内容,样式,颜色},{ 写后面执行的代码; })
 

原文:https://blog.csdn.net/qq_25821067/article/details/53365900 

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于前端开发,vscode有很多优秀的代码提示插件可供选择。其中一些主要的插件包括: 1. HTML CSS Support:该插件提供了对HTML和CSS的语法高亮和智能提示,使你在编写前端代码时更加高效准确。 2. Auto Close Tag:这个插件可以自动关闭HTML标签,避免标签不匹配的错误。 3. Auto Rename Tag:当你修改一个HTML标签的名称时,该插件会自动重命名与之对应的结束标签,避免手动修改的麻烦。 4. IntelliSense for CSS class names in HTML:这个插件可以根据你的CSS文件中定义的类名,为HTML标签提供智能提示,方便你快速选择正确的类名。 5. ESLint:这是一个JavaScript代码检查工具,它可以帮助你在编写代码时遵循一些最佳实践和代码风格规范,并给出相应的错误和警告。 6. Prettier - Code formatter:这个插件可以自动格式化你的代码,使其符合统一的代码风格,这在协作开发中非常有用。 7. Vue 2 Snippets:针对Vue.js框架,提供了一些常用代码片段,让你更快地编写Vue组件。 8. Vetur:这是一个专门为Vue.js开发而设计的插件,提供了对Vue文件的语法高亮、智能提示、格式化、错误提示等功能。 以上是一些常用的vscode前端代码提示插件,你可以根据自己的需求选择安装使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vscode推荐插件的安装](https://download.csdn.net/download/joyce198800/10270764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vscode css智能补全_高效率工具:web前端开发VScode必备插件大全](https://blog.csdn.net/weixin_39879522/article/details/110335132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值