zoukankan      html  css  js  c++  java
  • jquery-confirm使用方法

    简要教程

    jquery-confirm是一款功能强大的jQuery对话框和确认框插件。它提供多种内置的主题效果,可以实现ajax远程加载内容,提供动画效果和丰富的配置参数等。它的特点还有:

    • 可以使用键盘控制对话框。
    • 通过ajax加载对话框的内容。
    • 可以在指定时间之后自动关闭对话框。
    • 提供丰富的参数和回调函数。

    使用方法

    基本调用
    $.confirm({
        confirm: function(){
                console.log('the user clicked confirm');
        },
        cancel: function(){
                console.log('the user clicked cancel');
        }
    });   
    全局默认参数
    jconfirm.defaults = {
        title: 'Hello',
        content: 'Are you sure to continue?',
        contentLoaded: function(){
        },
        icon: '',
        confirmButton: 'Okay',
        cancelButton: 'Close',
        confirmButtonClass: 'btn-default',
        cancelButtonClass: 'btn-default',
        theme: 'white',
        animation: 'zoom',
        closeAnimation: 'scale',
        animationSpeed: 500,
        animationBounce: 1.2,
        keyboardEnabled: false,
        rtl: false,
        confirmKeys: [13], // ENTER key
        cancelKeys: [27], // ESC key
        container: 'body',
        confirm: function () {
        },
        cancel: function () {
        },
        backgroundDismiss: false,
        autoClose: false,
        closeIcon: null,
        columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
        onOpen: function(){
        },
        onClose: function(){
        },
        onAction: function(){
        }
    }; 

    配置参数

    jquery-confirm插件的可用配置参数有:

    参数 类型 默认值 描述
    title String 'Hello' 对话框的标题
    content String, Function 'Are you sure to continue?' 对话框的内容,也可以通过一个函数返回ajax内容
    contentLoaded function function(){} 如果通过url前缀来调用内容,如url:http://abc.com/xyz,该参数将是回调函数
    icon String '' 标题前面的图标
    confirmButton String 'Okay' 确认按钮的文本
    cancelButton String 'Close' 取消按钮的文本
    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 (reverse), rotateX, rotateXR (reverse)
    closeAnimation String 'scale' 关闭对话框时的动画,和animation参数的可选值相同
    animationSpeed Number 500 动画的持续时间,单位毫秒
    animationBounce Float 1.2 打开对话框时添加弹性效果,1=没有弹性效果
    keyboardEnabled Boolean false 使用回车键来确认,使用Esc键来取消
    confirmKeys Array [13] 当使用keyboardEnabled参数时,可以设置一组键来触发确认事件,默认为13
    cancelKeys Array [27] 当使用keyboardEnabled参数时,可以设置一组键来触发取消事件,默认为27
    rtl Boolean false 使用从右到左的布局
    container String 'body' 指定生成的对话框代码被添加到哪里
    confirm Function function(){} 用户点击了确认按钮之后的回调函数
    cancel Function function(){} 用户点击了取消按钮之后的回调函数
    backgroundDismiss Boolean false 是否允许点击对话框之外的区域来关闭对话框
    autoClose String false 在指定的时间之后如果用户没有响应则自动关闭对话框。取值:'confirm|400'
    closeIcon Boolean null 在对话框没有按钮的情况下,关闭按钮是可见的。将该参数设置为true可看见关闭按钮
    closeIconClass String false 默认使用'X'作为关闭按钮,你可以通过该参数来修改
    columnClass String 'col-md-4 col-md-offset-4
    col-sm-6 col-sm-offset-3
    col-xs-10 col-xs-offset-1'
    使用Bootstrap网格系统来进行布局
    onOpen Function function(){} 当对话框元素被渲染之后触发
    onClose Function function(){} 当对话框被关闭时触发
    onAction Function function(){} 当任何指令被执行后都会触发该回调函数
    watchInterval Number 100 Watch the modal for changes and gets centered on the screen

    API

    通过var jc = $.confirm()会返回一个对象实例的引用。通过jc引用可以打开对话框。
    
    var jc = $.confirm({title: 'awesome'}); // jc will be used in the examples below  
    
            jc.close():关闭对话框。
            var jc = $.confirm({
                ...
            })
            jc.close(); // destroy. 
    
            jc.isClosed():返回对话框是否被关闭的布尔值。
            jc.setTitle(string):设置标题。
            jc.setContent(string):设置内容。
            jc.setIcon(iconClass):设置按钮。
            jc.setDialogCenter():将对话框居中显示。
            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.$closeButton:可访问关闭按钮的对象。
            jc.$target:可访问点击元素的对象。
  • 相关阅读:
    Jquery与mootools对比
    Maven + Eclipse + Tomcat
    一位老工程师前辈的忠告 (转载)
    如何利用JConsole观察分析JAVA程序的运行
    程序员该怎样放松?8个好网站推荐(转载)
    [转]关于程序员的59条搞笑但却真实无比的编程语录
    关于程序员的59条搞笑但却真实无比的编程语录
    [原]AppPoolService-IIS应用程序池辅助类(C#控制应用程序池操作)
    AppPoolService-IIS应用程序池辅助类(C#控制应用程序池操作)
    [译]C#控制管理VisualSVN Server
  • 原文地址:https://www.cnblogs.com/4job/p/10669922.html
Copyright © 2011-2022 走看看