%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/ui/jquery-ui/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/ui/jquery-ui/dialog-tooltip.js |
/*========================================================================================= File Name: dialog-tooltips.js Description: jQuery UI dialogs and tooltips ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ $(document).ready(function(){ /**************************** * Basic Dialogs * ****************************/ $( ".default-dialog" ).dialog({ autoOpen: false, width: 400, }); $( ".animation-dialog" ).dialog({ autoOpen: false, width: 400, show: { effect: "fade", duration: 400 }, hide: { effect: "explode", duration: 1000 }, modal: true }); $( ".overlay-dialog" ).dialog({ autoOpen: false, width: 400, modal: true }); $( ".append-to-dialog" ).dialog({ autoOpen: false, width: 400, appendTo: ".content-wrapper", modal: true }); $( ".title-dialog" ).dialog({ autoOpen: false, width: 400, title: "Dialog Title", modal: true }); $( ".conf-modal-dialog" ).dialog({ autoOpen: false, resizable: false, height: "auto", width: 400, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } }, }); $( ".buttons-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, buttons: [{ text: "Ok", click: function() { $(this).dialog("close"); }, }], modal: true }); $( ".icons-buttons-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, buttons: [{ text: "Ok", icon: "ft-heart", click: function() { $(this).dialog("close"); } }], modal: true }); $( ".disable-escape-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, closeOnEscape: false, modal: true }); $( ".close-text-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, closeText: "hide", modal: true }); $( ".disable-drag-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, draggable: false, modal: true }); $( ".disable-resize-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, resizable: false, modal: true }); $( ".position-left-top-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, position: { my: "left top", at: "left top", of: window }, modal: true }); $( ".position-right-top-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, position: { my: "right top", at: "right top", of: window }, modal: true }); $( ".position-left-bottom-dialog" ).dialog({ autoOpen: false, height: "auto", width: 400, position: { my: "left bottom", at: "left bottom", of: window }, modal: true }); /******************************** * Open Basic Dialogs * ********************************/ $( ".default-dialog-btn" ).on("click",function(){ $( ".default-dialog" ).dialog("open"); }); $( ".animation-dialog-btn" ).on("click",function(){ $( ".animation-dialog" ).dialog("open"); }); $( ".overlay-dialog-btn" ).on("click",function(){ $( ".overlay-dialog" ).dialog("open"); }); $( ".append-to-dialog-btn" ).on("click",function(){ $( ".append-to-dialog" ).dialog("open"); }); $( ".title-dialog-btn" ).on("click",function(){ $( ".title-dialog" ).dialog("open"); }); $( ".conf-modal-dialog-btn" ).on("click",function(){ $( ".conf-modal-dialog" ).dialog("open"); }); $( ".buttons-dialog-btn" ).on("click",function(){ $( ".buttons-dialog" ).dialog("open"); }); $( ".icons-buttons-dialog-btn" ).on("click",function(){ $( ".icons-buttons-dialog" ).dialog("open"); }); $( ".disable-escape-dialog-btn" ).on("click",function(){ $( ".disable-escape-dialog" ).dialog("open"); }); $( ".close-text-dialog-btn" ).on("click",function(){ $( ".close-text-dialog" ).dialog("open"); }); $( ".disable-drag-dialog-btn" ).on("click",function(){ $( ".disable-drag-dialog" ).dialog("open"); }); $( ".disable-resize-dialog-btn" ).on("click",function(){ $( ".disable-resize-dialog" ).dialog("open"); }); $( ".position-left-top-dialog-btn" ).on("click",function(){ $( ".position-left-top-dialog" ).dialog("open"); }); $( ".position-right-top-dialog-btn" ).on("click",function(){ $( ".position-right-top-dialog" ).dialog("open"); }); $( ".position-left-bottom-dialog-btn" ).on("click",function(){ $( ".position-left-bottom-dialog" ).dialog("open"); }); /************************************ * Dialogs Height - Width * ************************************/ $( ".height-dialog" ).dialog({ autoOpen: false, height: 400, modal: true }); $( ".width-dialog" ).dialog({ autoOpen: false, width: 500, modal: true }); $( ".max-height-dialog" ).dialog({ autoOpen: false, maxHeight: 400, modal: true }); $( ".max-width-dialog" ).dialog({ autoOpen: false, maxWidth: 600, modal: true }); $( ".min-height-dialog" ).dialog({ autoOpen: false, minHeight: 200, modal: true }); $( ".min-width-dialog" ).dialog({ autoOpen: false, minWidth: 200, modal: true }); $( ".percent-width-dialog" ).dialog({ autoOpen: false, width: '50%', modal: true }); $( ".full-width-dialog" ).dialog({ autoOpen: false, width: '95%', modal: true }); /**************************************** * Open Height- Width Dialogs * ****************************************/ $( ".height-dialog-btn" ).on("click",function(){ $( ".height-dialog" ).dialog("open"); }); $( ".width-dialog-btn" ).on("click",function(){ $( ".width-dialog" ).dialog("open"); }); $( ".max-height-dialog-btn" ).on("click",function(){ $( ".max-height-dialog" ).dialog("open"); }); $( ".max-width-dialog-btn" ).on("click",function(){ $( ".max-width-dialog" ).dialog("open"); }); $( ".min-height-dialog-btn" ).on("click",function(){ $( ".min-height-dialog" ).dialog("open"); }); $( ".min-width-dialog-btn" ).on("click",function(){ $( ".min-width-dialog" ).dialog("open"); }); $( ".percent-width-dialog-btn" ).on("click",function(){ $( ".percent-width-dialog" ).dialog("open"); }); $( ".full-width-dialog-btn" ).on("click",function(){ $( ".full-width-dialog" ).dialog("open"); }); /**************************** * Form Dialogs * ****************************/ $( ".basic-form-dialog" ).dialog({ autoOpen: false, width: 400, modal: true }); $( ".grid-form-dialog" ).dialog({ autoOpen: false, width: 500, modal: true }); $( ".inline-form-dialog" ).dialog({ autoOpen: false, width: 550, modal: true }); /******************************** * Open Form Dialogs * ********************************/ $( ".basic-form-dialog-btn" ).on("click",function(){ $( ".basic-form-dialog" ).dialog("open"); }); $( ".grid-form-dialog-btn" ).on("click",function(){ $( ".grid-form-dialog" ).dialog("open"); }); $( ".inline-form-dialog-btn" ).on("click",function(){ $( ".inline-form-dialog" ).dialog("open"); }); /******************************** * Tooltips * ********************************/ $( ".default-tooltip" ).tooltip(); $( ".tooltip-content" ).tooltip({ items: "[title]", content: "Awesome title!" }); $( ".show-tooltip-animation" ).tooltip({ show: { effect: "slideDown", delay: 250 } }); $( ".hide-tooltip-animation" ).tooltip({ hide: { effect: "explode", delay: 250 } }); $( ".custom-tooltip-animation" ).tooltip({ show: null, position: { my: "left top", at: "left bottom" }, open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); } }); $( ".tooltip-track-mouse" ).tooltip({ track: true }); $( ".tooltip-position-top" ).tooltip({ position: { my: "center bottom-15", at: "center top" } }); $( ".tooltip-position-right" ).tooltip({ position: { my: "left+15 center", at: "right center" } }); $( ".tooltip-position-bottom" ).tooltip({ position: { my: "center top+15", at: "center bottom" } }); $( ".tooltip-position-left" ).tooltip({ position: { my: "right-15 center", at: "left center" } }); $( ".tooltip-primary" ).tooltip({ tooltipClass: "bg-primary", position: { my: "center top+15", at: "center bottom" } }); $( ".tooltip-info" ).tooltip({ tooltipClass: "bg-info", position: { my: "center top+15", at: "center bottom" } }); $( ".tooltip-warning" ).tooltip({ tooltipClass: "bg-warning", position: { my: "center top+15", at: "center bottom" } }); $( ".tooltip-success" ).tooltip({ tooltipClass: "bg-success", position: { my: "center top+15", at: "center bottom" } }); $( ".tooltip-danger" ).tooltip({ tooltipClass: "bg-danger", position: { my: "center top+15", at: "center bottom" } }); });