A prompt in the simplest of fashion.
$.prompt("Hello World!");
Lets add some buttons and a title.
$.prompt("Proceeding may be good for your site..", { title: "Are you Ready?", buttons: { "Yes, I'm Ready": true, "No, Lets Wait": false } });
Use the submit function to get the answer.
$.prompt("Open your javascript console to see the answer.", { title: "Are you Ready?", buttons: { "Yes, I'm Ready": true, "No, Lets Wait": false }, submit: function(e,v,m,f){ // use e.preventDefault() to prevent closing when needed or return false. // e.preventDefault(); console.log("Value clicked was: "+ v); } });
You can open multiple prompts at one time. Of course for a better user experience you may want to look at using states when possible, but multiple prompts can be open at once.
$.prompt will always control the most recent prompt. If you ever need direct access to the current instance, you can call $.prompt.getApi();
var multiplePromptsCounter = 1; function openMultiplePrompts(){ $.prompt("Do you want to open another?", { title: "A Prompt Has Opened: "+ multiplePromptsCounter++, buttons: { "Yes, Open Another": true, "No, Close This One": false }, persistent: false, submit: function(e,v,m,f){ if(v){ e.preventDefault(); openMultiplePrompts(); } } }); } openMultiplePrompts();
To use states pass in a collection (array or object) of objects with common properties (html, buttons, focus, submit, position..).
var statesdemo = { state0: { html:'Something really cool will happen when you click Next. Prepare yourself for amazement!...', buttons: { Cancel: false, Next: true }, focus: 1, submit:function(e,v,m,f){ if(v){ e.preventDefault(); $.prompt.goToState('state1'); return false; } $.prompt.close(); } }, state1: { html:'Was that awesome or what!?', buttons: { Back: -1, Exit: 0 }, focus: 1, submit:function(e,v,m,f){ e.preventDefault(); if(v==0) $.prompt.close(); else if(v==-1) $.prompt.goToState('state0'); } } }; $.prompt(statesdemo);
To use a substate create your states as normal, but use the subState option when calling $.prompt.goToState().
var statesdemo = { state0: { title: 'Terms of Use', html:'<p>These are the terms of use. You should agree to these terms before proceeding.</p><p>(This is just an example)</p>', buttons: { Cancel: false, Agree: true }, focus: 1, submit:function(e,v,m,f){ if(v){ e.preventDefault(); $.prompt.goToState('state1', true); return false; } $.prompt.close(); } }, state1: { html:'Are you sure?', buttons: { No: -1, Yes: 0 }, focus: 1, submit:function(e,v,m,f){ e.preventDefault(); if(v==0) $.prompt.goToState('state2'); else if(v==-1) $.prompt.goToState('state0'); } }, state2: { title: "You're Done!", html: "Congratulations, you've finished this example!", buttons: { Close: 0 }, focus: 0 } }; $.prompt(statesdemo);
To use tour or tooltip like features pass in a collection (array or object) of state objects with the position property.
var tourSubmitFunc = function(e,v,m,f){ if(v === -1){ $.prompt.prevState(); return false; } else if(v === 1){ $.prompt.nextState(); return false; } }, tourStates = [ { title: 'Welcome', html: 'Ready to take a quick tour of jQuery Impromptu?', buttons: { Next: 1 }, focus: 0, position: { container: 'h1', x: 200, y: 60, width: 200, arrow: 'tc' }, submit: tourSubmitFunc }, { title: 'Download', html: 'When you get ready to use Impromptu, you can get it here.', buttons: { Prev: -1, Next: 1 }, focus: 1, position: { container: '#Download', x: 170, y: 0, width: 300, arrow: 'lt' }, submit: tourSubmitFunc }, { title: "You've Got Options", html: 'A description of the options are can be found here.', buttons: { Prev: -1, Next: 1 }, focus: 1, position: { container: '#Options', x: -10, y: -145, width: 200, arrow: 'bl' }, submit: tourSubmitFunc }, { title: 'Examples..', html: 'You will find plenty of examples to get you going..', buttons: { Prev: -1, Next: 1 }, focus: 1, position: { container: '#Examples', x: 80, y: 10, width: 500, arrow: 'lt' }, submit: tourSubmitFunc }, { title: 'The Tour Code', html: 'Including this tour... See, creating a tour is easy!', buttons: { Prev: -1, Next: 1 }, focus: 1, position: { container: '#TourCode', x: 180, y: -130, width: 400, arrow: 'br' }, submit: tourSubmitFunc }, { title: 'Learn More', html: 'If you would like to learn more please consider purchasing a copy of Impromptu From I to U. If you found Impromptu helpful you can also donate to help fund development. If not, thanks for stopping by!', buttons: { Done: 2 }, focus: 0, position: { container: '.ebook', x: 370, y: 120, width: 275, arrow: 'lt' }, submit: tourSubmitFunc } ]; $.prompt(tourStates);
The bread and butter of Impromptu is forms. By simply including form fields in the html all form values are gathered and sent via the "f" (aka "form") parameter. The "m" (aka "message") parameter is a jQuery object of the message itself incase you need to modify the dom. Open your javascript console to view the object sent on submit.
var statesdemo = { state0: { title: 'Name', html:'<label>First <input type="text" name="fname" value=""></label><br />'+ '<label>Last <input type="text" name="lname" value=""></label><br />', buttons: { Next: 1 }, //focus: "input[name='fname']", submit:function(e,v,m,f){ console.log(f); e.preventDefault(); $.prompt.goToState('state1'); } }, state1: { title: 'Gender', html:'<label><input type="radio" name="gender" value="Male"> Male</label><br />'+ '<label><input type="radio" name="gender" value="Female"> Female</label>', buttons: { Back: -1, Next: 1 }, //focus: ":input:first", submit:function(e,v,m,f){ console.log(f); if(v==1) $.prompt.goToState('state2') if(v==-1) $.prompt.goToState('state0'); e.preventDefault(); } }, state2: { title: 'Transportation', html:'<label>Travels By <select name="travel" multiple>'+ '<option value="Car" selected>Car</option>'+ '<option value="Bus">Bus</option>'+ '<option value="Plane" selected>Plane</option>'+ '<option value="Train">Train</option>'+ '</select></label>', buttons: { Back: -1, Done: 1 }, focus: 1, submit:function(e,v,m,f){ console.log(f); e.preventDefault(); if(v==1) $.prompt.close(); if(v==-1) $.prompt.goToState('state1'); } }, }; $.prompt(statesdemo);
The following are example demonstrations of various useful utilities with Impromptu.