jquery-confrim使用

最新推荐文章于 2024-09-13 22:10:59 发布

江流川

最新推荐文章于 2024-09-13 22:10:59 发布

阅读量1.4k

点赞数

http://www.jq22.com/demo/jqueryConfirm20160413/

jquery-confirm | 功能强大的jQuery对话框和确认框插件
A multipurpose plugin for alert, confirm & dialog, with Extended features

Quick features

These features can practically be used like so.

Elegant Alerts.

Stacked Confirmations

Need input?

Not so important modal

Its also a Dialog.

Loading from remote places

Some actions maybe critical

Keyboard actions?

Automatically centered

Loading images

Clean animations

Quick Usage

Dependencies:

Bootstrap by Twitter >= v2
jQuery library > v1.8

Alert

$.alert() Has only confirm button.

$.alert({
    title: 'Alert!',
    content: 'Simple alert!',
    confirm: function(){
        $.alert('Confirmed!'); // shorthand.
    }
});

Confirm

$.confirm() Has both confirm & cancel buttons.

$.confirm({
    title: 'Confirm!',
    content: 'Simple confirm!',
    confirm: function(){
        $.alert('Confirmed!');
    },
    cancel: function(){
        $.alert('Canceled!')
    }
});

Goto twitter

HTML

<a class="twitter" data-title="Goto twitter?" href="http://twitter.com/craftpip">Goto twitter</a>

Javascript

$('a.twitter').confirm(options);

The alias $.confirm was made to emulate the native confirm().
By default on "confirm" the window will be redirected to the href provided, but if the `options` has the confirm callback, it will be called instead. Use this.$target to get the clicked element.

Dialog

$.dialog() Hides both confirm & cancel buttons. (Shows close [x] button)

$.dialog({
    title: 'Text content!',
    content: 'Simple modal!',
});

Shorthand usage

The shorthand thingy takes in two string arguments, first one is the content of the dialog and second the title of the dialog. The second argument is optional.

$.alert('Content here', 'Title here');
$.confirm('A message', 'Title is optional');
$.dialog('Just to let you know');

Customizing

NOTE: The $.confirm(), $.dialog() & $.alert() methods are alias of jconfirm().
All three methods indirectly call the jconfirm base function altering the provided options.

ADVANCED: this.$body is the body div for jquery-confirm. You can find and alter any element at run time.

Button text

Change the button text for confirm and cancel.

$.confirm({
    confirmButton: 'Yes i agree',
    cancelButton: 'NO never !'
});

Button style

Apply the classes you want in the buttons.

Available bootstrap options are btn-primary btn-inverse btn-warning btn-info btn-danger btn-success

$.confirm({
    confirmButtonClass: 'btn-info',
    cancelButtonClass: 'btn-danger'
})

Hide elements

Hide the Title/Content/Confirm Button/Cancel Button/Close icon when u don't need them.

$.confirm({
    title: false, // hides the title.
    cancelButton: false // hides the cancel button.
    confirmButton: false, // hides the confirm button.
    closeIcon: false, // hides the close icon.
    content: false, // hides content block.
});

NOTE:

By default the closeIcon is visible if both confirm & cancel buttons are hidden. (dialog mode).
To explicitly show or hide closeIcon set closeIcon: true or closeIcon: false.
Shorthand to hide both buttons is to use $.dialog().

Custom width

Jquery-confirm uses bootstrap's grid system for its layout.
You can simply provide column classes to adjust the modal's width.

You can also set responsive layouts. Bootstrap grid docs

$.confirm({
    columnClass: 'col-md-4 col-md-offset-4'
});
$.confirm({
    columnClass: 'col-md-4'
});
$.confirm({
    columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8'
});

Icons

Give meaning to your dialog with custom icons.
Read about Font Awesome here.

$.confirm({
    icon: 'glyphicon glyphicon-heart',
    title: 'glyphicon'
});
$.confirm({
    icon: 'fa fa-warning',
    title: 'font-awesome'
});
$.alert({
    icon: 'fa fa-spinner fa-spin',
    title: 'Working!',
    content: 'Sit back, we are processing your request. <br>The animated icon is provided by Font-Awesome!'
});

Close icon

jQuery confirm uses × html entity for this close symbol, however you can use Any icon of your choice (fa, glyphicon, zmdi)

Using $.dialog will show the close Icon by default.

$.alert({
    closeIcon: true
});

Using your own class for icons.

$.alert({
    closeIcon: true,
    closeIconClass: 'fa fa-close' // or 'glyphicon glyphicon-remove'
});

Animations

Impression lies in what we see.
Different animations can be set for open and close events.

2D animations:

3D animations:

$.confirm({
    animation: 'zoom',
    closeAnimation: 'scale'
});
// Available animations:
// right, left, bottom, top, rotate, none, opacity, scale, zoom,
// scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)

Animation bounce

Some eye candy thats in fashion.

$.confirm({
        animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
    });

Animation speed

Adjust the duration of animation.

$.confirm({
    animationSpeed: 2000 // 2 seconds
});
$.confirm({
    animationSpeed: 200 // 0.2 seconds
});

Themes

The Light & Dark themes that suit any website design,

$.confirm({
    theme: 'white'
});
$.confirm({
    theme: 'black'
});
$.confirm({
    theme: 'supervan' // 'material', 'bootstrap'
});

Ajax loading

With jconfirm you have the power to load content directly when needed via ajax, no extra code.
Two methods are available to load content via Ajax:

Pass in String content the URL with "URL:" prepended.
Eg: content: "URL:http://example.com/getData?id=1"
Pass in Function that returns a jQuery ajax promise.
Eg: content: function(){ return $.get(...); }

The confirm / cancel buttons are disabled until the Ajax call is complete.

Using the "URL:" prefix

Using the url prefix is the quick way, however has some limitations like you cannot modify the ajax call's method, dataType, etc.
To use, prepend your URL with "URL:" ends up like "URL:http://example.com/file.extension".
When the call is complete the contentLoaded function is run with arguments Data, Status & Xhr object.

view text.txt

$.confirm({
    content: 'url:text.txt',
    title: 'Title'
});

The content is set before contentLoaded is called.

$.confirm({
    content: 'url:text.txt',
    title: 'Title',
    contentLoaded: function(data, status, xhr){
        var self = this;
        setTimeout(function(){
            self.setContent('<h1>OK! the status is: ' + status + '</h1><br>' + self.content);
            self.setTitle('Stuff is loaded');
        }, 2000);
    }
});

Using Ajax promise

This option provides full control over the ajax options and what data is to be inserted. The content takes a function that returns a jQuery promise ($.ajax, $.get, $.post, etc.). In this example a json object is requested, and a part of it is set as content.

view bower.json

$.confirm({
    content: function () {
        var self = this;
        return $.ajax({
            url: 'bower.json',
            dataType: 'json',
            method: 'get'
        }).done(function (response) {
            self.setContent('Description: ' + response.description);
            self.setContent(self.content + '<br>Version: ' + response.version); // appending
            self.setTitle(response.name);
        }).fail(function(){
            self.setContent('Something went wrong.');
        });
    },
    confirm: function(){
        this.setContent( this.content + '<h4>Adding a new sentence.</h4>');
        return false; // prevent modal from closing
    }
});

Auto close

Do a action if the user does not respond within the specified time.
This comes in handly when the user is about to do something critical.
The autoClose option takes in a string, like 'confirm|4000' where confirm is the action to trigger after 4000 milliseconds.
Practical examples of autoClose

$.confirm({
    title: 'Delete user?',
    content: 'This dialog will automatically trigger \'cancel\' in 6 seconds if you don\'t respond.',
    autoClose: 'cancel|6000',
    confirm: function(){
        alert('confirmed');
    },
    cancel:function(){
        alert('canceled');
    }
});

$.confirm({
    title: 'Logout?',
    content: 'Your time is out, you will be automatically logged out in 10 seconds.',
    autoClose: 'confirm|10000',
    confirm: function(){
        alert('confirmed');
    },
    cancel:function(){
        alert('canceled');
    }
});

Background dismiss

Whether the user can close the dialog by clicking outside the modal.

The 'cancel' action is trigged if the user click outside of the dialog.

$.confirm({
    backgroundDismiss: true,
    content: 'Click outside the dialog, and i shall close!'
});
$.confirm({
    backgroundDismiss: false,
    content: 'Click outside the dialog, and i will shake it off like taylor swift.'
});

Keyboard actions

Enables keyboard events on jquery-confirm dialog.
ENTER calls confirm(); & ESC calls cancel();

$.confirm({
    keyboardEnabled: true,
    content: 'Press ESC or ENTER to see it in action.',
    cancel: function(){
        $.alert('canceled');
    },
    confirm: function(){
        $.alert('confirmed');
    }
});

Setting custom keys

The confirmKeys, cancelKeys take an array of key numbers, in this example 65 is 'A' & 66 is 'B'.

If the modal has input elements, ENTER & SPACE buttons will not do anything for the focused input (when the user is typing)

Using custom keys like 'A' or 'B' when you have input elements inside the modal will cause the modal to close when user types those keys.

$.confirm({
    keyboardEnabled: true,
    content: 'Press "A" to confirm or "B" to cancel. <input type="text" placeholder="typing a or b will close the modal"/>',
    confirmKeys: [65],
    cancelKeys: [66],
    cancel: function () {
        $.alert('canceled');
    },
    confirm: function () {
        $.alert('confirmed');
    }
});

RTL support

If you need to show the confirm box in rtl then you should set the rtl option to true.

$.alert({
    title: 'پیغام',
    content: 'این یک متن به زبان شیرین فارسی است',
    confirmButton: 'تایید',
    cancelButton: 'انصراف',
    confirmButtonClass: 'btn-primary',
    closeIcon: true, // close icon will be moved to left if RTL is set to true.
    rtl: true,
    confirm: function () {
    alert('تایید شد.');
    }
    });

Callbacks

Get more control over the modal, mainly important for binding events for the modal elements.
contentLoaded callback is called when data from URL prefix in content is used.

$.confirm({
    content: 'Imagine this is a complex form and you have to attach events all over the form or any element <br>' +
             '<button type="button" class="examplebutton">I\'ve events attached!</button>',
    onOpen: function(){
        alert('after the modal is opened/rendered');
        // find the input element and attach events to it.
        // NOTE: `this.$content` is the jquery object for content.
        this.$content.find('button.examplebutton').click(function(){
            alert('I\'ve powers!');
        });
    },
    onClose: function(){
        alert('before the modal is closed');
    },
    onAction: function(action){
        // action is either 'confirm', 'cancel' or 'close'
        alert(action + ' was clicked');
    }
});

onOpen()

Is triggered after the modal is rendered and opened. If you're loading content via URL using the URL prefix, you will need the contentLoaded callback after the content is loaded. see URL prefix