eziConfirm: jQuery Confirm Control

• Download source code - 38 KB

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.

<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')}
    }
) 

Custom Button(s)

eziConfirm shows 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 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

...
        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 (Alert, Message, ...)
• 2013/02/12: First release (version 0.1)