Basic Dialogs¶
dialogtest.htm
(hint: right click, save as)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | <!-- Test/Development/Documentation page - enable web server file access - upload to web dir, e.g. scp testpage.htm test1.local:/sd/dev/ - open in framework by e.g. http://test1.local/#/dev/testpage.htm --> <div class="panel panel-primary"> <div class="panel-heading">Dialog Test/Demo</div> <div class="panel-body"> <h4>Core Widget</h4> <button class="btn btn-default" id="action-load">Dialog 1</button> <button class="btn btn-default" id="action-save">Dialog 2</button> <button class="btn btn-default" id="action-both">Both together</button> <button class="btn btn-default" id="action-dyn">Dynamic custom</button> <hr /> <h4>Utility Wrappers</h4> <button class="btn btn-default" id="action-info">Alert</button> <button class="btn btn-default" id="action-confirm">Confirm</button> <button class="btn btn-default" id="action-choice">Choice</button> <button class="btn btn-default" id="action-prompt">Prompt</button> <button class="btn btn-default" id="action-password">Password</button> <hr /> <h4>Log</h4> <pre id="log" /> </div> </div> <div id="dialog1" /> <div id="dialog2" /> <div id="dialog3" /> <script> // ======================================================================================= // Dialog core widget: // options: { // title: '', // body: '', // show: false, / true = open directly on init // remote: false, // backdrop: true, background overlay // keyboard: true, ESC = close // transition: 'fade', / '' // size: '', / 'sm' / 'lg' // contentClass: '', added to .modal-content // onShown: null, function(input) // onHidden: null, function(input) // onShow: null, function(input) // onHide: null, function(input) // onUpdate: null, function(input) // buttons: [{}], see example // timeout: 0, in seconds // input: null, predefined/shared input object to use // }, // Note: use static dialogs (attached to the document) for speed and to store reusable // input, e.g. for a promptdialog. // The default dialog will contain just a "Close" button: $('#dialog1').dialog({ title: 'Please note', body: '<p>This is just a test.</p>' }); $('#dialog2').dialog({ title: 'Alert', body: '<p>Danger, Will Robinson, danger!</p>', contentClass: 'alert-danger', // note: looks strange, just an example -- don't use }); // You can simply open preconfigured dialogs like this: $('#action-load').on('click', function(){ $('#dialog1').dialog('show'); }); $('#action-save').on('click', function(){ $('#dialog2').dialog('show'); }); // …or you can reconfigure dialogs on the fly like this: // Note: the new configuration is stored in the dialog. $('#action-both').on('click', function(){ $('#dialog1').dialog('show', { body: '<p>This is now another test.</p>' }); // This example also opens a second dialog on top of the first: $('#dialog2').dialog('show', { body: '<p>This is a second layer dialog.</p>' }); }); // Use dynamic dialogs for single shot purposes: $('#action-dyn').on('click', function(){ $("#log").text(""); $('<div />').dialog({ title: 'Dynamic…', body: '<p>…dialog with custom buttons.</p>', buttons: [ // Buttons default to auto hiding the dialog: { label: "Nope" }, // You can get the button clicked in the onHidden callback, or you can // add specific action callbacks to each button. { label: "Maybe…", btnClass: "warning", autoHide: false, action: function(input) { // input is the data container of the widget, with only predefined // member being "button" = the button clicked (or null). // You can use this container for custom extensions: input.clicked_maybe = true; $(this).find(".modal-body").append("<p>You're now a maybe person.</p>"); } }, // autoHide callbacks are called on the hidden event, so a fade out // is guaranteed to be finished in the callback. { label: "Done", btnClass: "primary", action: function(input) { $("#log").text(JSON.stringify(input, null, 2)); } }, ], }); }); // ======================================================================================= // Dialog utility wrappers: // confirmdialog(title, body, buttons, [callback,] timeout) // promptdialog(type, title, body, buttons, callback) // Both can be used plugin style or standalone for dynamic dialogs. // Dynamic alert() style dialog with 5 seconds timeout: $('#action-info').on('click', function(){ confirmdialog("Sorry…", "I'm afraid I can't do that, Dave.", ["OK"], 5); // Note: you can also add a callback here to know when the dialog is dismissed. }); // Dynamic confirm() style dialog: $('#action-confirm').on('click', function(){ $("#log").text(""); confirmdialog("Load file", "Discard unsaved changes?", ["No", "Yes"], function(confirmed){ if (confirmed) $("#log").text("Loading now…"); else $("#log").text("Load aborted."); }); }); // The callback argument is the index of the button clicked (or null), so // simple choice dialogs can be done like this: $('#action-choice').on('click', function(){ $("#log").text(""); confirmdialog("Select", "Please select the slot to use:", ["1", "2", "3", "4"], function(button){ if (button != null) $("#log").text("Using slot " + (button+1)); else $("#log").text("Abort."); }); }); // Static prompt() style text input dialog (with #dialog3 keeping the dialog): $('#action-prompt').on('click', function(){ $("#log").text(""); $('#dialog3').promptdialog("text", "Save data", "Please enter file name:", ["Cancel", "Save"], function(button, input){ if (button && input) $("#log").text("Saving to file: " + input); else $("#log").text("Save aborted."); }); }); // All single field HTML5 input types can be used: $('#action-password').on('click', function(){ $("#log").text(""); promptdialog("password", "Authentication", "Please enter PIN:", ["Cancel", "Continue"], function(button, input){ if (button && input) $("#log").text("PIN entered: " + input); else $("#log").text("Auth aborted."); }); }); </script> |