vBocx.js
Documentation




Syntax,


var variable_name = new Vbocx();

variable_name.type({attributes});




Alert

The alert() attributes are given below,


  • position - Alertbox to be placed(top, middle, bottom).

  • type - Type of alertbox(success, warning, error).

  • id - Id for alertBoxes.

  • message - Message to be displayed.

  • timer - Milliseconds you want alertbox on your screen(in milliseconds:ms).


The above given attributes are for default vBocx alertboxes. If you want customizable alertboxes of your own foreground, background and position, refer below attributes.


  • position - Alertbox to be placed(% or px or pt).

  • id - Id for alertBoxes.

  • message - Message to be displayed.

  • color - Color of message(rgb() or hex or rgba()).

  • background - Background-color of alertboxes(rgb() or hex or rgba()).

  • timer - Milliseconds you want alertbox on your screen(in milliseconds:ms).



You may notice that position, id, message and timer are common attributes in both default and customizable alertboxes.

If you dont want alertbox to be vanished after some milliseconds, you can omit the timer attribute and the resultant will a cancellable alert.

All the attributes should be placed between { }(braces) which are treated as objects in JavaScript.

Take a look at the examples for better understanding,

You have to construct a vBocx constructor with new operator by assigning it to a variable and then make use of it for alerts, prompts and confirms as well.





Default alertboxes.

Success alert,


//Default top success alert
var myAlert = new Vbocx();
myAlert.alert({position:'top', type:'success', id:"topAlert", message:'I am top success alert', timer:3000});





//Default middle success alert
myAlert.alert({position:'middle', type:'success', id:"middleAlert", message:'I am middle success alert', timer:3000});





//Default bottom success alert
myAlert.alert({position:'bottom',  type:'success', id:"bottomAlert", message:'I am bottom success alert', timer:3000});






Warning alert,


//Default top warning alert
var myAlert = new Vbocx();
myAlert.alert({position:'top', type:'warning', id:"topAlert", message:'I am warning alert', timer:3000});





//Default middle warning alert
myAlert.alert({position:'middle', type:'warning', id:"middleAlert", message:'I am middle warning alert', timer:3000});





//Default bottom warning alert
myAlert.alert({position:'bottom',  type:'warning', id:"bottomAlert", message:'I am bottom warning alert', timer:3000});






Error alert,


//Default top error alert
var myAlert = new Vbocx();
myAlert.alert({position:'top', type:'error', id:"topAlert", message:'I am error alert', timer:3000});





//Default middle error alert
myAlert.alert({position:'middle', type:'error', id:"middleAlert", message:'I am middle error alert', timer:3000});





//Default bottom error alert
myAlert.alert({position:'bottom',  type:'error', id:"bottomAlert", message:'I am bottom error alert', timer:3000});







Customizable alertbox.


Example 1



//Customizable alert
var myAlert = new Vbocx();
myAlert.alert({position:'18%', id:'customizedAlert', message:'I am customized alert', color:'white', background:'#1277db', timer:3000});






Example 2(Cancellable)



//Customizable alert
var myAlert = new Vbocx();
myAlert.alert({position:'38%', id:'cancellableAlert', message:'I am cancellable alert', color:'white', background:'#1277db'});







Prompt

The prompt() attributes are given below,


  • element - Input or Select element.

  • id - Id of promptBoxes.

  • header - Message to be displayed.

  • action - Define your own function to be executed when user clicks on ✔ button.

  • animation - Animation of promptBoxes(top-in-crash, bottom-in-crash, left-in-crash, right-in-crash).


    • Above are the common attributes.




  • type - text, password, number, email, file, color, checkbox, radio, range, time, date, week, month are supported.

  • value - Value of type.

  • placeholder - Placeholder of type.

  • required - Type emptiness(true or false).

  • checked - Checkbox, Radio Button checked or unchecked(true or false).

  • label - Message to be displayed after Checkbox or Radio Button.


The above given attributes are for <input> tag promptBoxes.




    The attribute for <select> tag excluding common attributes is given below.

  • options - As name suggests its an array of options to be placed in select.





    • Input promptbox.

    You can change the type to any supported one as described in attributes section.

    Text prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"textId", type:"text", header:"Enter your name", placeholder:"Input Here", animation:"bottom-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Your name : " + output, timer:2000});
}});





    In the above example when user inputs a text and clicks on ✔ button the textbox value is accepted and stored. If you want make use of the value you have to declare a function using

    action:function(parameter){
    some action.....
    }

    The parameter may be of any name you like.


    Password prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"passId", type:"password", header:"Enter your password", placeholder:"Input Here", animation:"top-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Your password has been saved! ", timer:2000});
}});





    Number prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"numberId", type:"number", header:"Enter your Phone number", placeholder:"Input Here", animation:"bottom-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Your number is not matching! ", timer:2000});
}});





    Email prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"emailId", type:"email", header:"Enter your email-id", placeholder:"Input Here", animation:"top-in-crash", action:function(output){
var alertBox = new Vbocx();
if((/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/).test(output) === true){
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Valid email-id", timer:2000});
}
else{
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Invalid email-id", timer:2000});
}
}});





    File prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"fileId", type:"file", header:"Upload file",  animation:"left-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"You choosed " + output, timer:2000});
}});




    Color prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"colorId", type:"color", header:"Choose your color",  animation:"bottom-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"You choosed " + output, timer:2000});
}});




    Checkbox prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"checkId", type:"checkbox", header:"Terms and conditions*", label:"Agree", animation:"bottom-in-crash", action:function(output){
checked = document.getElementById("checkIdvBocxInput").checked ;
if(checked == true){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Thanks for choosing vBocx.js!", timer:2000});
}
else{
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Try again!", timer:2000});}}});




    Radio Button prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"radioId", type:"radio", header:"Terms and conditions*", label:"Agree", animation:"top-in-crash", action:function(output){
checked = document.getElementById("radioIdvBocxInput").checked ;
if(checked == true){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Thanks for choosing vBocx.js!", timer:2000});
}
else{
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Try again!", timer:2000});}}});




    Range prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"rangeId", type:"range", header:"Select the range",  animation:"bottom-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"The range was : " + output, timer:2000});
}});




    Time prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"timeId", type:"time", header:"Select the time",  animation:"left-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Time : " + output, timer:2000});
}});




    Date prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"dateId", type:"date", header:"Select the date",  animation:"left-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Date : " + output, timer:2000});
}});




    Week prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"weekId", type:"week", header:"Select the week",  animation:"left-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Week : " + output, timer:2000});
}});




    Month prompt,

    
var myPrompt = new Vbocx();
myPrompt.prompt({element:"input", id:"monthId", type:"month", header:"Select the month",  animation:"top-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Month : " + output, timer:2000});
}});







    Select prompt,

    
var myPrompt = new Vbocx();
promptBox.prompt({element:"select", id:"selectId", header:"Select your color", options:["Select", "Black", "White", "Red", "Blue"], animation:"left-in-crash", action:function(output){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"You selected " + output, timer:2000});
}});








Confirm

The confirm() attributes are given below,


  • id - Id of promptBoxes.

  • header - Message to be displayed.

  • animation - Animation of promptBoxes(top-in-crash, bottom-in-crash, left-in-crash, right-in-crash).

  • action - Define your own function to be executed when user clicks on ✔ button.



Lets take a look at an example,


var myConfirm = new Vbocx();
myConfirm.confirm({id:"confirmId", header:"Do you want to quit?", animation:"right-in-crash", action:function(){
var alertBox = new Vbocx();
alertBox.alert({position:"top", type:"success", id:"alertId", message:"Thanks for using vBocx.js", timer:2000});
}});







For further customization use following respective IDs(#) in CSS.


Alert


alert box - ID(id) provided in the attributes list (Eg: myAlert)




Prompt


prompt box - ID(id) provided in the attributes list + vBocx (Eg: myPromptvBocx)

header - ID(id) provided in the attributes list + Header (Eg: myPromptHeader)

input - ID(id) provided in the attributes list + vBoxInput (Eg: myPromptvBoxInput)

✔ button - ID(id) provided in the attributes list + Ok (Eg: myPromptOk)

✘ button - ID(id) provided in the attributes list + Cancel (Eg: myPromptCancel)




Confirm


confirm box - ID(id) provided in the attributes list + vBocx (Eg: myConfirmvBocx)

header - ID(id) provided in the attributes list + Header (Eg: myConfirmHeader)

✔ button - ID(id) provided in the attributes list + Ok (Eg: myConfirmOk)

✘ button - ID(id) provided in the attributes list + Cancel (Eg: myConfirmCancel)





Note: You should insert !important in every style.

Example,


#topAlert{
width:50% !important;
color:white !important;
background:green !important;
}