These functions have dependency on Boostrap CSS and Awesome Fonts for some awesomeness
This will create an error alert after the element
Usage
//Syntax
bs.ShowError (errorText,ElementObjID)
//Exampel 1
bs.ShowError ('Invaild User Name', $('.UserName'))
//Exampel 2
bs.ShowError ('Invaild Email Address', $('#UserEmail'))
This is ideal for when you are validating the user entries.
ExampleThis will clear all of the "bs.ShowError()" messgaes.
Usage//Syntax bs.ClearError();
If you are using the bs.ShowError funciton, then call this function at the top of your validation process.
This way all of the errorr messages are clear from your user screen.
When you are waiting for you process to finish doing its thing, generally it's a good practice to tell your user to please wait.
This function definitely makes it easier for you to do that.
Usage
//Syntax
bs.WaitingMsg(Msg)
//Example
var d = bs.WaitingMsg("Please wait....Processing your request");
//The element where you want to show the message
$('#UserMsg').html(d);
$('.UserMsg').html(d);
Alerts are a great way to inform your users of specific action you want them to take.
This function offers 4 different types of alerts you can easily use to inform your users.
//Syntax
bs.AlertMsg (MsgData,AlertType)
var d;
//Example 1
d = bs.AlertMsg("We have emailed you a new password", "success");
//Example 2
d = bs.AlertMsg("Oppss... invaild email address...", "error");
//Example 3
d = bs.AlertMsg("your request was submitted successfully....", "info");
//Example 4
d = bs.AlertMsg("Looks like this email is already taken", "warning");
//The element where you want to show the alert
$('#UserMsg').html(d);
$('.UserMsg').html(d);
If you ever wanted to confirm your users to action before actually performing the task, this function can easily let you do that.
Usage
//Syntax
var ObjArrOptions =
{
text: "Are you sure you want to delete that comment?",
title: "Confirmation required",
confirm: function(button)
{
//Call your delete function
delete();
//or run the delete process like this
var TopDiv = $('.Container').remove();
},
cancel: function(button)
{
// nothing to do
},
confirmButton: "Yes I am",
cancelButton: "No",
confirmButtonClass: "btn-danger", //Bootstrap button class
cancelButtonClass: "btn-default", //Bootstrap button class
dialogClass: "modal-dialog modal-lg" // Bootstrap classes for large modal
}
//Call is like this
bs.confirm(ObjArrOptions);
Example
When you click on the button below, it will show a confirmation modal
Another great way to show a message to your users is under the input field.
For example, if you are updating a field via an Ajax call, you can show a message that says "please wait updating" or something like that. This way your user know something is happening.
Usage
//Syntax
bs.CheckingMsg(ElementObjID,Msg)
//Example 1
bs.CheckingMsg($('#UserMsg'),"Please wait....Processing your request");
//Example 2
bs.CheckingMsg($('.UserMsg'),"Please wait....Processing your request");
This function easily allows you to create a button with just one line of code
Usage
//Syntax
bs.CreateButton (ButtonText,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the button element.
//i.e. custom attr (rec_id="1343")
//Example 1
//Just add the button text and id
var d = bs.CreateButton ("Save","btn_Save")
//Example 2
//Just add the button text and class name
//you can also use bootstrap button classese as well in the class parameter
var d = bs.CreateButton ("Save","", "btn_ClassSave btn-success")
//Example 3
//Just add the button text, id, and addon
var d = bs.CreateButton ("Save","btn_Save", "", 'rec_id="12456", post_id="500" ')
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
This function easily allows you to create an Input Field with just one line of code
Usage
//Syntax
bs.CreateInputField (Value,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example 1
//Empty input field with id
var d = bs.CreateInputField ("","user_email")
//Example 2
//InputField Value and class name
var d = bs.CreateInputField ("john smith","", "user_name")
//Example 3
//InputField value, id, and addon
var d = bs.CreateInputField ("john smith","user_name", "", 'rec_id="12456", post_id="500" ')
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
This function easily allows you to create a Hidden Input Field with just one line of code so you can store some data that you don't want your users to see.
But use the field value later on for your data processing
Usage
//Syntax
bs.CreateHiddenInputField (Value,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example 1
//Empty input field with id
var d = bs.CreateHiddenInputField ("","user_email")
//Example 2
//InputField Value and class name
var d = bs.CreateHiddenInputField ("john smith","", "user_name")
//Example 3
//InputField value, id, and addon
var d = bs.CreateHiddenInputField ("john smith","user_name", "", 'rec_id="12456", post_id="500" ')
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create a custom input field with one of the 12 html5 data types:
color
number
search
time
week
date
text
month
rage
tel
//Syntax
var d = bs.CreateCustomInputField(FieldType,Value,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example 1
var d = bs.CreateCustomInputField ("number",1234, 'rec_id')
//Example 2
var d = bs.CreateCustomInputField ('text',"john smith","", "user_name")
//Example 3
//for best result run your date or time value through js.FormatDateTime()
var d = bs.CreateCustomInputField ('date',js.FormatDateTime ('YourValue','YYYY-MM-DD'),"user_date", "", )
var d = bs.CreateCustomInputField ('time', js.FormatDateTime ('YourValue','kk:mm'),"user_date", "", )
var d = bs.CreateCustomInputField ('month', js.FormatDateTime ('YourValue','YYYY-MM'),"user_date", "", )
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create a group input field
Usage
//Syntax
var d = bs.CreateGroupInputField (GroupName,Value,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example
var d = bs.CreateGroupInputField ("User Name","John Smith", 'rec_id')
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create a custom group input field
Just like "Create Custom Input Field" function, you can use html5 data type for this function as well.
Usage
//Syntax
var d = bs.CreateCustomGroupInputField (FieldType,GroupName,Value,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example
var d = bs.CreateCustomGroupInputField ("date", "Today's Date", js.FormatDateTime ('','YYYY-MM-DD'), 'dte', '')
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create a text box with this function
Usage
//Syntax
var d = bs.CreateTextBox (Value,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example
var d = bs.CreateTextBox ('Thi is a text box text', 'user_txt')
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create a group text box with this function
Usage
//Syntax
var d = bs.CreateGroupTextBox(GroupName,Value,ID,Class,Addon)
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example
var d = bs.CreateGroupTextBox ('User Text', 'This is a text box text', 'user_txt')
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create a drop down list with this function
Usage
//Syntax
var d = bs.CreateDropDownList(LabelText,Options, Value, ID,Class,Addon);
//Note Addon can you be anything you would like to add to the element.
//i.e. custom attr (rec_id="1343")
//Example
var Options = 'Breakfast, Lunch, Dinner';
var d = bs.CreateDropDownList ('Meal Options', Options, '','meal_list');
var d = bs.CreateDropDownList ('Meal Options', Options, 'Lunch','','meal_list');
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create tabs with this function
Usage
//Example
var arr =
[
{tab_name:'tab 1', tab_content: "this is my tab 1 contain"},
{tab_name:'tab 2', tab_content: "this is my tab 2 "},
]
var d = bs.Tabs(arr);
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create Panel with this function
Usage
//Example
var object_data =
{
panel_header:'header',
panel_content: "this is my panel 1 content",
panel_footer: "footer",
panel_class: "default",
}
var d = bs.Panel(object_data);
//Out in a div
$('#MyDivID').html(d);
$('.MyDivClass').html(d);
You can easily create Modal with this function
Usage
//Syntax
bs.Modal(object_data);
//Example
$(document).on('click', '.btn_demo_modal', function(event)
{
var object_data =
{
ModalTitle:'Modal Title',
ModalBodyContent: "this is my Modal Body Content ",
}
bs.Modal(object_data);
});