<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-Dialogize.js"></script>
<script type="text/javascript"> /*simple example*/ $(function(){/* Invoke on load */ $('.dialog_simple').click(function(){ $.dialogize({ content:'This is a simple dialog, with a simple text or html' }) }); </script>
Name | Type | Default | What Does |
content | STRING | '' | content of dialog box (HTML/TEXT or JQUERY SELECTOR eg:. $('#some_id').html()) |
pdf_src | STRING | '' | path of pdf that you want read, this option is valid only if type = "pdf" |
type | STRING | '' | type of dialog: pay attention: this option can have different value: 1) "empty" ----> this generates your dialogBox with your "content" 2) "pdf" ------> the dialogBox becomes a pdf Reader, its path is pdf_src option 3) "img" ------> in this case dialogBox becomes a zoom image.... N.B. there is another plugin that provide to image resize 4) "confirm" --> the dialogBox becomes a confirm form whith button "YES" or "NO" and function of callback |
img_dial | STRING | '' | you can put an image before your content (NOT PATH BUT ENTIRE TAG) eg:. < img src="......" /> |
delay_close | NUMBER | '' | this is delay in milliseconds before closing dialogBox (IF THIS OPTION NOT empty then option "CLOSABLE" is not aviable) |
closable | BOLEAN | true | indicates if dialogBox can be closed (IF DELAY NOT NULL THIS OPTION = FALSE) |
overlay | BOLEAN | true | overlay for dialogBox |
color_overlay | STRING | #666 | color of overlay |
overlay_opacity | NUMBER | 3 | opacity of overlay |
resizable | BOLEAN | true | if true , dialogBox is resizable .if you dont have jquery UI, plugin go on without resize |
draggable | BOLEAN | true | if true , dialogBox is draggable .if you dont have jquery UI, plugin go on without drag |
before_open_dial | FUNCTION | '' | function/s that are triggered immediately before dialogBox is opened |
post_close_dial | FUNCTION | '' | function/s that are triggered immediately after dialogBox is closed |
confirm | FUNCTION | '' | function/s that are triggered immediately after button "YES" is clicked |
img_scr_close | STRING | '' | image of close button (NOT PATH BUT ENTIRE TAG) eg:. < img src="......" /> |
text_close | STRING | 'Close' | text of close button |
w_dial | NUMBER | '' | You can specify a precise width to dialogBox else pluging do it automatically depending on window size |
h_dial | NUMBER | '' | You can specify a precise height to dialogBox else pluging do it automatically depending on window size |
text_yes | STRING | 'YES' | text of YES button |
text_no | STRING | 'NO' | text of NO button |
class_button_yes | STRING | '' | you can add more class to YES buttont, give them an interspace eg:. "class1 class2 class3" |
class_button_no | STRING | '' | you can add more class to NO buttont, give them an interspace eg:. "class1 class2 class3" |
other_class_container | STRING | '' | you can add more class to container of content, give them an interspace eg:. "class1 class2 class3" |
other_class_content | STRING | '' | you can add more class to content, give them an interspace eg:. "class1 class2 class3" |
other_class_close | STRING | '' | you can add more class to close button, give them an interspace eg:. "class1 class2 class3" |
CSS OPTION VIA OPTION | |||
/*********************************************************/ /** List of available css options for dialog container ***/ /*********************************************************/ border:true, border_size: '5', border_color: '#33ccff', border_radius:true, border_radius_size:'8', shadow: true, shadow_size:'30', shadow_color:'#666', /*********************************************************/ /** List of available css options for dialog content ***/ /*********************************************************/ color:'#666', background:'#fff', text_align:'left', /*********************************************************/ /** List of available css options for close button ***/ /*********************************************************/ background_close:'#33ccff', font_color_close:'#fff', |
|||
METHOD | |||
$.dialogize('destroy')--> this method provides to destroy all opened dialogs it's called when you close a dialog |
JS CODE INFO EXAMPLE:$('.simple_alert_info').click(function(){ $.dialogize({ content:'This is a sample example of alert DialogBox', img_dial:'<img src="img/info.png" lat="" />' }); }); JS CODE ERROR EXAMPLE:$('.simple_alert_error').click(function(){ $.dialogize({ $.dialogize({ overlay_opacity:1, color_overlay:'red', border_color:'red', shadow_color:'red', background_close:'red', color:'red', content:'This is a sample example of alert error DialogBox', img_dial:'<img src="img/error.png" lat="" />' }); }); JS CODE OK EXAMPLE:$('.simple_alert_ok').click(function(){ $.dialogize({ overlay_opacity:1, color_overlay:'#66FF33', border_color:'#66FF33', shadow_color:'#666', background_close:'#66FF33', color:'#36D700', content:'This is a sample example of alert error DialogBox', img_dial:'' }); }); JS CODE ATTENTION EXAMPLE:$('.simple_alert_attention').click(function(){ $.dialogize({ overlay_opacity:1, color_overlay:'#FEA303', border_color:'#FEA303', shadow_color:'#666', background_close:'#FEA303', color:'#CC6600', content:'This is a sample example of alert error DialogBox', img_dial:'' }); }); |
HTML CODE:<button class="myButton simple_alert_info"><img src="img/info.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE INFO EXAMPLE</button> <button class="myButton simple_alert_error"><img src="img/error.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE ERROR EXAMPLE</button> <button class="myButton simple_alert_ok"><img src="img/ok.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE OK EXAMPLE</button> <button class="myButton simple_alert_attention"><img src="img/attention.png" width="15" height="15" style="vertical-align:middle;margin-right:5px" />SIMPLE ATTENTION EXAMPLE</button> |
JS CODE:/*Resize intial images with integrated plugin "imgscale" , so no need Thumbnail*/ $(".img_sized").imgscale({ parent : '.cont', fade : 1000 , scale:'fit' }); /**********************/ $('.img_sized').click(function(){ var path = $(this).attr('src') $.dialogize({ type:'img',/* IMPORTANT */ content:'<img src="'+path+'"/>' }); }); |
HTML CODE:<div style="height:100px;cursor:pointer" title="CLICK TO ZOOM!" class="cont"><img class="img_sized" src="desert.jpg" alt="" /></div> <div style="height:100px;cursor:pointer" title="CLICK TO ZOOM!" class="cont"><img class="img_sized" src="Penguins.jpg" alt="" /></div> /* N.B. divs with class "cont" is necessary for the plugin imgscale and it must have a defined height */ |
JS CODE:$('.read_pdf').click(function(){ var path = $(this).attr('src') $.dialogize({ type:'pdf',/* IMPORTANT */ pdf_src:'lorem.pdf' }); }); |
HTML CODE:<button class="myButton read_pdf">READ PDF</button> |
JS CODE:$('.read_html').click(function(){ $.ajax({ type:'GET', url:'callpage.html', success:function(data){ $.dialogize({ content:data }); } }); }); |
HTML CODE:<button class="myButton read_html">READ HTML</button> |
JS CODE:$('.alert_confirm').click(function(){ $.dialogize({ type:'confirm',/* IMPORTANT */ img_dial:'<img src="img/questionmark.png" alt="" />', content:'<div style="text-align:center">Hi, do you want confirm?</div>', confirm:function(){ alert('you have click on YES') } }); }); |
HTML CODE:<button class="myButton read_html">CONFIRM ALERT</button> |
JS CODE:$('.simple_alert').click(function(){ $.dialogize({ img_dial:'<img src="img/questionmark.png" alt="" />', content:'This is a sample example of alert DialogBox.<br/>pay attemption to callback function after closing dialog!!', before_open_dial:function(){ alert('you are opening a dialog box with dialogize plug in, this is a callback function before its opening') }, post_close_dial:function(){ alert('You have closed a dialog box with dialogize plug in, this is a callback function after its closing') } }); }); |
HTML CODE:<button class="myButton simple_alert">SIMPLE EXAMPLE WITH CALL BACK FUNCTIONS</button> |