jquery-confirm使用方法

更新时间:2023-07-08 08:19:43 阅读: 评论:0

jquery-confirm使⽤⽅法
简要教程
jquery-confirm是⼀款功能强⼤的对话框和确认框插件。它提供多种内置的主题效果,可以实现ajax远程加载内容,提供动画效果和丰富的配置参数等。它的特点还有:
可以使⽤键盘控制对话框。
通过ajax加载对话框的内容。
可以在指定时间之后⾃动关闭对话框。
提供丰富的参数和回调函数。
使⽤⽅法
基本调⽤
$.confirm({
confirm: function(){
console.log('the ur clicked confirm');
},
cancel: function(){
console.log('the ur clicked cancel');
}
});
全局默认参数
jconfirm.defaults = {
title: 'Hello',
content: 'Are you sure to continue?',
contentLoaded: function(){
},
icon: '',
confirmButton: 'Okay',
cancelButton: 'Clo',
confirmButtonClass: 'btn-default',
cancelButtonClass: 'btn-default',
theme: 'white',
animation: 'zoom',
cloAnimation: 'scale',
animationSpeed: 500,
animationBounce: 1.2,
keyboardEnabled: fal,
rtl: fal,
confirmKeys: [13], // ENTER key
cancelKeys: [27], // ESC key
container: 'body',
confirm: function () {
},
cancel: function () {
},
backgroundDismiss: fal,
绿宝石植物autoClo: fal,
cloIcon: null,向日葵有香味吗
columnClass: 'col-md-4 col-md-offt-4 col-sm-6 col-sm-offt-3 col-xs-10 col-xs-offt-1',
onOpen: function(){
},
onClo: function(){
},
onAction: function(){
}
};
配置参数
jquery-confirm插件的可⽤配置参数有:
参数类型默认值描述
爱的温度title String'Hello'对话框的标题
content String,
Function
'Are you sure to
continue?'对话框的内容,也可以通过⼀个函数返回ajax内容
颊骨
contentLoaded function function(){}如果通过url前缀来调⽤内容,如/xyz,该参数将是回调函数石门国家森林公园
icon String''标题前⾯的图标
confirmButton String'Okay'确认按钮的⽂本诗句接龙
cancelButton String'Clo'取消按钮的⽂本
confirmButtonClass String'btn-default'确认按钮的的class
cancelButtonClass String'btn-default'取消按钮的class
theme String'white'对话框的颜⾊主题,可选值有:'white', 'black', 'material' , 'bootstrap'
animation String'zoom'打开对话框时的动画效果。可选值有: right, left, bottom, top, rotate, none, opacity, scale, zoom, scaleY, scaleX, rotateY, rotateYR (rever),
rotateX, rotateXR (rever)
cloAnimation String'scale'关闭对话框时的动画,和animation参数的可选值相同
animationSpeed Number500动画的持续时间,单位毫秒
animationBounce Float  1.2打开对话框时添加弹性效果,1=没有弹性效果
keyboardEnabled Boolean fal使⽤回车键来确认,使⽤Esc键来取消
confirmKeys Array[13]当使⽤keyboardEnabled参数时,可以设置⼀组键来触发确认事件,默认为13
cancelKeys Array[27]当使⽤keyboardEnabled参数时,可以设置⼀组键来触发取消事件,默认为27
涉密人员rtl Boolean fal使⽤从右到左的布局
container String'body'指定⽣成的对话框代码被添加到哪⾥
confirm Function function(){}⽤户点击了确认按钮之后的回调函数
cancel Function function(){}⽤户点击了取消按钮之后的回调函数
backgroundDismiss Boolean fal是否允许点击对话框之外的区域来关闭对话框
autoClo String fal在指定的时间之后如果⽤户没有响应则⾃动关闭对话框。取值:'confirm|400'
cloIcon Boolean null在对话框没有按钮的情况下,关闭按钮是可见的。将该参数设置为true可看见关闭按钮
cloIconClass String fal默认使⽤'X'作为关闭按钮,你可以通过该参数来修改
columnClass String 'col-md-4 col-md-
offt-4
col-sm-6 col-sm-offt-
3
col-xs-10 col-xs-offt-
1'
使⽤Bootstrap⽹格系统来进⾏布局
onOpen Function function(){}当对话框元素被渲染之后触发
参数类型默认值描述
onClo Function function(){}当对话框被关闭时触发
onAction Function function(){}当任何指令被执⾏后都会触发该回调函数
watchInterval Number100Watch the modal for changes and gets centered on the screen API
通过var jc = $.confirm()会返回⼀个对象实例的引⽤。通过jc引⽤可以打开对话框。
var jc = $.confirm({title: 'awesome'}); // jc will be ud in the examples below
jc.clo():关闭对话框。
var jc = $.confirm({
...
})
jc.clo(); // destroy.
jc.isClod():返回对话框是否被关闭的布尔值。
jc.tTitle(string):设置标题。
jc.tContent(string):设置内容。
jc.tIcon(iconClass):设置按钮。
jc.tDialogCenter():将对话框居中显⽰。
jc.$body:别名:jc.$b,模态窗⼝对象。
jc.$content:别名:jc.contentDiv。可以通过该对象来访问对话框的内容。
var jc = $.confirm({
content: 'Yeah, this is awesome'
})
console.log(jc.$content.html()); // Yeah, this is awesom
jc.$title:可访问标题的对象。
叮咛拼音jc.$icon:可访问图标的对象。
jc.$confirmButton:可访问确认按钮的对象。
jc.$cancelButton:可访问取消按钮的对象。
jc.$cloButton:可访问关闭按钮的对象。
jc.$target:可访问点击元素的对象。

本文发布于:2023-07-08 08:19:43,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1072707.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:对话框   按钮   关闭   对象
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图