About pluginSet plugin structurePlugin customizationContact

Alert

Paremeter Description Code Example
alert_msg Select this method for the Alert message. $(element).TnControl('alert_msg', {}); Demo
message_type 4 different predefined types for alert messages:
success, warning, error and information

The value of message_type must always be the same as the css class name located in style.css

Example: message_type : 'warning' have same CSS class ''.warning' in style.css

Default message type is success
message_type : 'success' 		$(element).TnControl('alert_msg', {
'message_type' : 'warning'
}); 		Demo
$(element).TnControl('alert_msg', {
'message_type' : 'error'
}); 		Demo
$(element).TnControl('alert_msg', {
'message_type' : 'success'
}); 		Demo
$(element).TnControl('alert_msg', {
'message_type' : 'information'
});		 Demo
event_name Select the type of event using this parameter.

List of some events click, dblclick, mouseover, mouseout, focus, focusOut

Default event is click
event_name : 'click' 		$(element).TnControl('alert_msg', {
'event_name' : 'dblclick'
}); 		Double Click
$(element).TnControl('alert_msg', {
'event_name' : 'mouseover'
}); 		MouseOver
title_text Type the title text using this parameter. $(element).TnControl('alert_msg', {
'title_text' : 'Title Text'
}); 		Demo
message_text Compose message text using this parameter. $(element).TnControl('alert_msg', {
'message_text' : 'message Text'
}); 		Demo
HTML tags are also valid in message text. $(element).TnControl('alert_msg', {
'message_text' : '<strong>Lorem : </strong> <i>Ipsum</i> is'
}); 		Demo
animation_speed Manage the animation speed of the Alert message. $(element).TnControl('alert_msg', {
'animation_speed' : 100
}); 		Demo
$(element).TnControl('alert_msg', {
'animation_speed' : 1000
}); 		Demo
ok_function Trigger callback function after clicking on OK button. $(element).TnControl('alert_msg', {
'ok_function' : function() {
alert("You pressed OK!");
}}); 		Demo
scroll_effect The default alert box appears with scroll animation.

Using this parameter we can turn on or turn off the animation.

Default value is true
'scroll_effect' : true 		$(element).TnControl('alert_msg', {
'scroll_effect' : false
}); 		Demo

Confirm

All parameters available for the alert box you can use for the confirm box. Just pass 'confirm_msg' instaed of 'alert_msg' with the params.

Paremeter Description Code Example
confirm_msg Select this method for confirm message. $(element).TnControl('confirm_msg', {}); Demo
cancel_function Trigger callback function after clicking on cancel button.. $(element).TnControl('confirm_msg', {
'cancel_function' : function() {
alert("You pressed Cancel!");
}}); 		Demo

Notification

You can use message_type, event_name, and message_text parameters as same way you used in alert and confirm box. Just pass 'notification_msg' with the params.

Other parameters are not relevant for notification box.

Paremeter Description Code Example
notification_msg Select this method for notification message. $(element).TnControl('notification_msg', {}); Demo
animation_speed Manage animation speed and animation length of notifications

Example: 'animation_setting' : [2000, 50]
2000 is the animation speed time and 50 is the animation length i.e. the notification moves from 0px to 50px 		$(element).TnControl('notification_msg', {
'animation_setting' : [2000, 50]
}); 		Demo
$(element).TnControl('notification_msg', {
'animation_speed' : [6000, 400]
});		 Demo
$(element).TnControl('notification_msg', {
'animation_speed' : [6000, 10]
});		 Demo

Callback

All parameters available (except ok_function and cancel_function) for the alert box you can use for the callback box. Just pass 'callback_msg' instaed of 'alert_msg' with the params.

Just pass 'callback_msg' instaed of 'alert_msg' with the params.

Paremeter Description Code Example
callback_msg Select this method for callback message. $(element).TnControl('callback_msg', {}); Demo
callback_option Trigger callback function after clicking on each option.

Example: When you click on Option A then we can see an alert message "You pressed A!" which is defined in a_function()

And don't forgot to add comma between two options. 		$(element).TnControl('callback_msg', {
'callback_option' : [
['Option A', function a_function () {
alert("You pressed A!");
}],
['Option B', function b_function () {
alert("You pressed B!");
}],
['Option C', function c_function () {
alert("You pressed C!");
}]
}); 		Demo

Important notes

Notes Description
1 message_type, event_name and message_text are common parameters for all 4 methods
2 Notification messages may or may not disrupt the user and they are still informative.
Notification default position is right side but we can change position from style.css
3 We can use keybord Enter and Esc instead of OK and cancel
4 For Callback message we can use 1, 2, 3... keys instead of Option A, Option B, Option C buttons.