Click here to Skip to main content
15,867,756 members
Articles / Web Development / HTML

eziConfirm: jQuery Confirm Control

Rate me:
Please Sign up or sign in to vote.
4.72/5 (12 votes)
15 Feb 2013CPOL1 min read 26.8K   359   20   6
jQuery based confirm plugin that will enhance build in confirm-function in JavaScript

Introduction

This is a jQuery based confirm plugin that will enhance built in confirm-function in JavaScript.

Background

I hate built in confirm and alert functions in JavaScript, so I ended up with my own confirm and alert function.

The code was not ready for the public, so I decide to convert it to a jQuery plug-in.

Here, I am presenting to you eziConfirm jQuery plug-in.

Using the Code

Files

The attached zip file contains all you need.

All you need is to include jQuery, eziconfirm.js and eziconfirm.css.

HTML
<link rel="stylesheet" type="text/css" href="eziConfirm.css" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="eziConfirm.js"></script>

Simple Confirm Window

The easiest way to use eziConfirm is by calling the jqConfirm plugin with only FireFunction parameter:

JavaScript
$(document.body).eziConfirm(
    { 
        FireFunction: function () {alert('You Click Yes')}
    }
) 

Image 1

Custom Button(s)

eziConfirm shows two buttons (Yes and No) as default, but you can add your custom button(s).

JavaScript
$(document.body).eziConfirm(
    {
        Button:   
            [
                { Title: "Delete", FireFunction: function (){ alert('You Click Delete') } },
                { Title: "Cancle", ClassName: 'red' }
            ]
    }
);

Image 2

Changing Title, Description, Width and Height

JavaScript
$(document.body).eziConfirm(
    {
        Title: 'Are you sure you want to delete this file?',
        Desc: 'File01.pdf<br/>Type:PDF<br/>Size:40KB',
        Width:320,
        Height:200,
        Button:   
            [
                { Title: "Delete", FireFunction: function (){ alert('You Click Delete') } },
                { Title: "Cancle", ClassName: 'red' }
            ]
    }
);

Image 3

Hide Close Button

JavaScript
$(document.body).eziConfirm({ 
    CloseButton: false,
        FireFunction: function () { alert('You Click Yes') } 
});

Image 4

Use As Alert Window

JavaScript
$(document.body).eziConfirm({
    Title: 'Alert Window',
    Desc: 'Description Description Description Description 
           Description Description Description Description',
    Button: [{ Title: 'OK', ClassName: 'red'}]
});

Image 5

Use As Message Window

JavaScript
$(document.body).eziConfirm({
    Title: 'Message',
    Desc: 'Message Message Message Message Message Message Message Message',
    Button: []
});

Image 6

Buttons Position

eziConfirm supports 4 different buttons positioning:

  • RenderMode.horizontal: Render buttons horizontally
  • RenderMode.vertical: Render buttons vertically
  • RenderMode.auto: Render buttons in n*m table
  • RenderMode.manual: Render buttons in given number of columns
JavaScript
...
        RenderMode: RenderMode.horizontal,
... 

Image 7

JavaScript
...
        RenderMode: RenderMode.vertical,
... 

Image 8

JavaScript
...
        RenderMode: RenderMode.auto,
... 

Image 9

JavaScript
...
        RenderMode: RenderMode.manual,
        Cols:3,
... 

Image 10

Right To Left Support

JavaScript
$(document.body).eziConfirm({
    Direction: 'rtl',
    FireFunction: function () { alert('You Click Yes') }
});

Image 11

Advance Sample: Calculator

The below sample shows many eziConfirm options and abilities.

JavaScript
$(document.body).eziConfirm(
    {
        Title: 'Calculator',
        Desc: '<div id=\'result\' 
        style=\'font-weight:bold;font-size:16px;height:22px;background-color:#ffffff\'></div>',
        Height: 170,
        Width: 240,
        RenderMode: RenderMode.manual,
        Cols: 4,
        ButtonDefault: { Width: 33, AutoClose: false },
        Button:
            [
                { Title: "1", FireFunction: function () { CalcKeyPress('1') } },
                { Title: "2", FireFunction: function () { CalcKeyPress('2') } },
                { Title: "3", FireFunction: function () { CalcKeyPress('3') } },

                { Title: "AC", ClassName: 'red', FireFunction: function () { CalcKeyPress('ac') } },

                { Title: "4", FireFunction: function () { CalcKeyPress('4') } },
                { Title: "5", FireFunction: function () { CalcKeyPress('5') } },
                { Title: "6", FireFunction: function () { CalcKeyPress('6') } },

                { Title: "+", ClassName: 'red', FireFunction: function () { CalcKeyPress('+') } },

                { Title: "7", FireFunction: function () { CalcKeyPress('7') } },
                { Title: "8", FireFunction: function () { CalcKeyPress('8') } },
                { Title: "9", FireFunction: function () { CalcKeyPress('9') } },

                { Title: "-", ClassName: 'red', FireFunction: function () { CalcKeyPress('-') } },

                { Title: "0", FireFunction: function () { CalcKeyPress('0') } },

                { Title: "*", ClassName: 'red', FireFunction: function () { CalcKeyPress('*') } },
                { Title: "/", ClassName: 'red', FireFunction: function () { CalcKeyPress('/') } },
                { Title: "=", ClassName: 'tra', FireFunction: function () { CalcKeyPress('=') } }
            ]
    }
);
 
function CalcKeyPress(key) {
 
    switch (key) {
        case 'ac':
            $('#result').html('');
            break;
        case '=':
            $('#result').html(eval($('#result').html()));
            break;
        default:
            $('#result').html($('#result').html() + key);
            break;
    }
}

Image 12

Options

This section describes the options available to eziConfirm. These are set with the argument to the $('#selector').eziConfirm(options) function.

Options are described with the following convention:

JavaScript
attribute: default,                    // description 
JavaScript
var defaultParam = {
    Title: "Are You Sure?", 	       //Title of Confirm Window
    ClassName : "",                    // specifies css class for confirm window
    Desc: "",                          // specifies description displayed above buttons
    Width: 320,                        // width of confirm window
    Height: 60,                        // height of confirm window
    RenderMode: RenderMode.horizontal, // RenderMode.auto | RenderMode.vertical | 
                                       // RenderMode.horizontal | RenderMode.manual:4
    Cols: 1,                           // Number of columns when RenderMode set to manual
    Button:  [ Button1, Button2, ...] ,
    ButtonDefault : { 
    Width: 100,                        // Default button width 
    Height: 18,                        //Default button height
    ClassName: '',                     //Default button css Class
    AutoClose:true,                    //Default Button Click Action 
    FireGlobalFunction: false,         //Default FireFunction Mode (Global or Local)
    FireFunction: function () { }      //Default FireFunction
    },
    FireFunction: function () {} ,     // Global Fire Function
    CloseButton: true,                 // Show/Hide close button 
    Direction: 'ltr'                   // 'ltr' | 'rtl' 
};
 
var Button = {  
    Title: "Yes",                      // Title for button
    FireGlobalFunction: true ,         // if true on button click Global FireFunction fired
    Width: 100,                        // Width of button
    Height: 18,                        // Height of button
    ClassName: '',                     // specifies css class for button
    AutoClose:true,                    // if true after clicking button confirm window will close
    FireFunction: function () { }},    // Fire function for button
}

Code

The attached zip file contains all you need.

What's Next?

  • Template base buttons position
  • Auto Close Timer

History

  • 2013/02/16: Version 0.2
    • Right to Left Support
    • Button Default Options
    • Option to Hide/Show Close Button
    • New Samples (Alert, Message, ...)
  • 2013/02/12: First release (version 0.1)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionMy vote of 5 Pin
gideonseroney@yahoo.com28-May-13 17:40
gideonseroney@yahoo.com28-May-13 17:40 
AnswerRe: My vote of 5 Pin
Pooya Paridel28-May-13 22:08
Pooya Paridel28-May-13 22:08 
GeneralMy vote of 5 Pin
AndrewGoel112-Feb-13 18:06
AndrewGoel112-Feb-13 18:06 
GeneralRe: My vote of 5 Pin
Pooya Paridel12-Feb-13 18:52
Pooya Paridel12-Feb-13 18:52 
GeneralMy vote of 5 Pin
Akinmade Bond12-Feb-13 3:34
professionalAkinmade Bond12-Feb-13 3:34 
Nice work.
GeneralRe: My vote of 5 Pin
Pooya Paridel12-Feb-13 17:47
Pooya Paridel12-Feb-13 17:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.