Click here to Skip to main content
Click here to Skip to main content

eziConfirm: jQuery Confirm Control

, 15 Feb 2013
Rate this:
Please Sign up or sign in to vote.
jQuery based confirm plugin that will enhance build in confirm-function in javascript

Introduction

This is a jQuery based confirm plugin that will enhance build in confirm-function in javascript.

Background

I hate build in confirm and alert function in javascript, so I ended up with my own confirm and alert function.

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

here, I am presenting 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

    <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:

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

Custon Button(s):

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

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

Changing Title, Description, Width and Height

$(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' }
            ]
    }
);

Hide Close Button

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

Use As Alert Window

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

Use As Message Window

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

Buttons Position

eziConfirm support 4 difrent 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
...
        RenderMode: RenderMode.horizontal,
... 

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

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

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

Right To Left Support

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

Advance Sample: Calculator

The below sample shows many eziConfirm options and abilities

$(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;
    }
}
 

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:

attribute: default, // description 

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 (Alret, 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)

About the Author

Pooya Paridel
Team Leader Tehran Securities Exchange Technology Management C
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
No Biography provided

Comments and Discussions

 
QuestionMy vote of 5 [modified] Pinmembergideonseroney@yahoo.com28-May-13 17:40 
AnswerRe: My vote of 5 PinmemberPooya Paridel28-May-13 22:08 
GeneralMy vote of 5 PinmemberAndrewGoel112-Feb-13 18:06 
GeneralRe: My vote of 5 PinmemberPooya Paridel12-Feb-13 18:52 
GeneralMy vote of 5 Pinmember GeekBond 12-Feb-13 3:34 
Nice work.
GeneralRe: My vote of 5 PinmemberPooya Paridel12-Feb-13 17:47 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 16 Feb 2013
Article Copyright 2013 by Pooya Paridel
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid