caphDialog

'caph-dialog' is a floating window that contains title area, content area and button area. Each area can represent with each template described below.

Options

This plugin's init function need option object to define behavior. It's properties can be defined like below.

center

If this is true, the dialog will locate center of the screen.

position

The dialog's position which contains properties such as 'x' and 'y'. This value is available when 'center' is not defined.

focusOption

When the dialog is opened, focusable depth is changed to this value for focus control. Depth and group in properties are available for buttons of the dialog.

timeout

The time in milliseconds to hide after.

onOpen

After opening a dialog, this callback function is called.

onClose

After closing a dialog, this callback function is called.

Templates

This plugin consists of 3 templates : 'caph-dialog-title', 'caph-dialog-content', 'caph-dialog-buttons'. Each template represents each area. So, If you put html tags into 'caphDialog' tag with other templates, then you can customize the layout of dialog. You also put html into template for decorating.

 <div id="dialog3" class="caph-dialog" style="width: 1000px;">
     <div style="float:right;width: 80%;">
         <div class="caph-dialog-title" style="color:red;">My Title</div>
     </div>
 </div>

'caph-dialog-buttons' template has an attribute: 'button-type'.

button-type

You can set 'button-type' as 'confirm' or 'alert'. Then dialog will have the buttons that is already defined.

• confirm : Dialog have 2 buttons named 'Yes' and 'No'.
• alert : Dialog have 1 button named 'OK'. button-type can be added in the future.

Methods

You can open or close by using 'open' or 'close' method. After opening or closing a dialog, the callback function is called that defined by option 'onOpen' or 'onClose'.

 dialog2.caphDialog('open'); // Use with 'close' if you want to close the dialog.

Example

js

 var dialog1 = $('#dialog1').caphDialog({
     center: true,
     focusOption: {
         depth: 1
     },
     onOpen: function(){
         console.log('dialog1 is opened.');
     },
     onClose: function(){
         console.log('dialog1 is closed.');
     },
     onSelectButton: function(buttonIndex, event){
         console.log('dialog1 buttonCallback' + buttonIndex, event);
         dialog1.caphDialog('close');
     }
 });

html

 <div id="dialog1" class="caph-dialog">
     <div class="caph-dialog-title" style="color:red;">My Title</div>
     <div class="caph-dialog-content" style="color:orange">
         There is immeasurable power in it.<br/>
         There is immeasurable power in it.
     </div>
     <div class="caph-dialog-buttons" button-type="confirm"></div>
 </div>