JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 4.4/5 ( 3 votes)
Your Rating:
Tiklsus dialog is a jquery plugin which can show any HTML content(plain text,tables,videos,pictures) inside a popup box. It also support alert,confirmation and prompt dialog creation. you can animate tikslus dialog with different transition effects. you can also create dialogs with custom buttons.
Source: tikslus.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="tikslus_dialogs.css"/> <script language="javascript" src="jquery.min.js"></script> <script language="javascript" src="tikslusdialog.js"></script>
2. HTML
<a href="#" id="info1">click here to open a dialog box</a>
3. JAVASCRIPT
$("#info1").click(function(e){
e.preventDefault();
$.fn.tdialog({
type:"info",
content:"This is an information dialog.",
title:"test",
icon:"info",
effect:'css3',
//css3EffectIn:'rotate-in',
//css3EffectOut:'rotate-out'
effect:'css3',
css3EffectIn:'flipY',
css3EffectOut:'bounce',
});
});
4. OPTIONS
| parameter | description | default value | value range |
|---|---|---|---|
| type | type of window: can be window,prompt,alert,warning,error,info,confirm. It must be given inside double or single quotes. | window |
can be
|
| icon | Icons can be displayed in title bar. It must be given inside double or single quotes. | not set (blank) |
can be
|
| title | title to be displayed in title bar. It must be given inside double or single quotes. | not set (blank) | can be any text or string |
| content | Content to be displayed in the dialog/window. It can be any text,image,videos,iframe,html code,google maps etc. It must be given inside double or single quotes. | not set (blank) | It can be any text,image,videos,iframe,html code,google maps etc. You can also return valid jquery function value as content. |
| promptCallback | callback function that is called when OK button is pressed in PROMPT dialog box. | not set (blank) |
must be a valid jquery function definition. example:
promptCallback:function(){
alert("hello "+$("#prompt").val());
}
|
| confirmCallback | callback function that is called when CONFIRM button is pressed in confirm dialog box. | not set (blank) |
must be a valid jquery function definition. example:
confirmCallback:function(){
alert("you clicked confirm button");
}
|
| position | Position of the dialog/window on the screen.It must be given inside double or single quotes. | center |
can be
|
| effect |
Animation effect for the window/dialog.
Tikslus Dialog can be used with predefined or CSS3 transition effects. Predefined Transition effects are: fade,slide,slide left,slide right We have also created some predefined CSS3 effects: rotate-in,roate-out,bench-in,bench-out,fly-in,fly-out,slideExpandUp,expandUp,bigEntrance,bounce,flipX,flipY. You can also use other CSS3 animations (like animate.css |
fade |
can be
|
| titleBar | decides whether to show or hide title bar in the window. It takes boolean value (true or false) | true |
can be
|
| showButtons | decides whether to show or hide buttons. For example, OK button on INFO dialog. | true |
can be
|
| showOverlay | decides whether to show or hide background overlay. It takes boolean value(true or false) | true |
can be
|
| closeKey | use ESC key from keyboard to close dialog. It takes boolean value(true or false) | true |
can be
|
| closeOverlay | close dialog on clicking overlay. It takes boolean value(true or false) | true |
can be
|
| autoClose | automatically close window/dialog without user interference. based on time interval. It takes boolean value(true or false) | false |
can be
|
| autoCloseInterval | This works with autoClose parameter. | 3000 (3 minutes) | can be any numeric value. 1000 means 1 minute. |
| animationSpeed | Time interval used as 'delay' in animation effects. | 300 milliseconds | can be any numeric value. 1000 means 1 minute. |
| draggable | Allow dragging of window/dialog. To drag dialog/window press left mouse button and try to move dialog. It won't work if you have set titleBar to false. | true |
can be
|
| showClose | decides whether to show or hide close button (button with 'x') on title bar. | true |
can be
|
| showMinimize | decides whether to show or hide minimize button (button with '-') on title bar. | false |
can be
|
