summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorTrent Richardson <trentdrichardson@gmail.com>2012-11-26 16:57:12 -0500
committerTrent Richardson <trentdrichardson@gmail.com>2012-11-26 16:57:12 -0500
commit447dd3f7764be0099561d8c46f85bcc4828c0d8d (patch)
tree56851ad23b026684f575595f34911719044e2f27
parent205e1a37a97b9ceef515d51b452fac4674a0e918 (diff)
downloadjQuery-Impromptu-447dd3f7764be0099561d8c46f85bcc4828c0d8d.zip
jQuery-Impromptu-447dd3f7764be0099561d8c46f85bcc4828c0d8d.tar.gz
jQuery-Impromptu-447dd3f7764be0099561d8c46f85bcc4828c0d8d.tar.bz2
Revise docs and demos
Diffstat
-rw-r--r--demo.html153
-rw-r--r--demos/loan_calculator.html104
-rw-r--r--demos/select_filter.html176
-rw-r--r--demos/survey.html98
-rw-r--r--demos/user_manager.html181
-rw-r--r--index.html541
-rw-r--r--jquery-impromptu.css (renamed from default.css)6
7 files changed, 1103 insertions, 156 deletions
diff --git a/demo.html b/demo.html
deleted file mode 100644
index 4f41501..0000000
--- a/demo.html
+++ /dev/null
@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="UTF-8" />
- <title>Impromptu Tour</title>
-
- <style type="text/css">
- body,img,p,h1,h2,fieldset,form,pre,code{ margin:0; padding:0; border:0; }
- body {
- font: 12px/16px Arial, Helvetica, sans-serif;
- border-top: solid 5px #A04334;
- background-color: #FAF9F4;
- text-align: center;
- }
- noscript{ color: #ff0000; font-weight: bold; }
- h1{ font-family: Times, serif; color: #555; margin: 0 0 10px 0; letter-spacing: 2px; }
- p{ line-height: 18px; margin: 10px 0; }
- #wrapper{ text-align: left; margin: 0 auto; background-color: #ffffff; width: 500px; min-height: 200px; padding: 25px; }
-
- </style>
- <link href="themes/zoo.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="jquery-impromptu.js"></script>
-
- <script type="text/javascript">
-
- /*
- Tour: by adding a "position" entry for a state the prompt will animate to that position.
- There are also a couple events attached by using bind(). Open your firebug or console.
- */
- function tour(){
- var submitFunc = function(event,v,m,f){
- if(v === -1){
- $.prompt.prevState();
- return false;
- }
- else if(v === 1){
- $.prompt.nextState();
- return false;
- }
- },
- states = [
- {
- title: 'Welcome to the Tour',
- html: 'Get ready for a tour through the adventurous lands of Impromptzoo!',
- buttons: { Next: 1, 'Lets Go': true },
- position: { width: 250 },
- submit: submitFunc
- },
- {
- title: 'Before we Begin',
- html: 'Remember to stay seated with your seatbelts fastened. Keep your body parts and cameras inside the vehicle.',
- buttons: { 'Nope, Sorry': false, 'Ok, Promise!': 1 },
- position: { width: 400 },
- submit: submitFunc
- },
- {
- html: 'This is tour stop 1, Please do not feed the animals',
- buttons: { Prev: -1, Next: 1 },
- focus: 1,
- position: { container: '#header1', x: 10, y: 40, width: 200, arrow: 'tc' },
- submit: submitFunc
- },
- {
- html: 'Welcome to the bulls and bears den',
- buttons: { Prev: -1, Next: 1 },
- focus: 1,
- position: { container: '#header2', x: 170, y: -10, width: 200, arrow: 'lt' },
- submit: submitFunc
- },
- {
- html: "I'm not sure what this creature is",
- buttons: { Prev: -1, Next: 1 },
- focus: 1,
- position: { container: '#wrapper', x: 40, y: 540, width: 250, arrow: 'rm' },
- submit: submitFunc
- },
- {
- html: 'On the left you will see the ligers and giraffelants',
- buttons: { Prev: -1, Next: 1 },
- focus: 1,
- position: { container: '#header3', x: 215, y: -45, width: 300, arrow: 'lm' },
- submit: submitFunc
- },
- {
- html: 'This concludes our tour.<br>You may go back to: <select onchange="$.prompt.goToState(this.value);"><option value="2">Bears and Bulls</option><option value="3">Unknown Creature</option><option value="4">Ligers and Giraffelants</option></select>',
- buttons: { Done: 2 },
- focus: 1,
- position: { container: '#header4', x: 0, y: 30, width: 200 },
- submit: submitFunc
- }
- ];
- var $jqi = $.prompt(states, { prefix: 'jqizoo' });
-
- $jqi.bind('promptstatechanged', function(e,to){
- if(window.console) console.log(arguments);
-
- });
-
- $jqi.bind('promptclose', function(e){
- if(window.console) console.log('close');
-
- });
- }
-
- /*
- Standard: demonstrate a standard old school prompt
- There are also an events attached by using bind()
- */
- function standard(){
- var $jqi = $.prompt('<p>A simple prompt with the simplest of states.</p>',{
- overlayspeed:'fast',
- title: 'Standard Issue Prompt',
- prefix: 'jqizoo',
- //position: { width: 250, y: 200 },
- buttons: [
- { title: 'Ok', value: '1', classes: ['foo','bar'] },
- { title: 'Cancel', value: '0', classes: "test1 test2" },
- { title: 'Other', value: '-1' }
- ]
- });
-
- $jqi.bind('promptsubmit', function(e,v,m,f){
-
- if(window.console) console.log(arguments);
- });
- }
- $(function() {
-
-
- });
- </script>
- </head>
-
- <body>
- <div id="wrapper">
- <h1 id="header1">The Impromptu Tour</h1>
- <a href="javascript:tour();">Tour</a> | <a href="javascript:standard();">Standard</a>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie metus quis mi elementum sed condimentum arcu condimentum. Sed fringilla luctus sapien, in mollis velit viverra vehicula. Praesent lectus orci, dapibus id tempor commodo, rutrum sit amet risus. Nullam risus odio, tincidunt auctor lacinia et, feugiat eu metus. Vestibulum sed augue sed velit imperdiet adipiscing. Donec consequat neque ultrices ante aliquet pellentesque ullamcorper tortor pretium. Nam aliquet ante in diam hendrerit vel aliquet libero lobortis. Fusce nibh eros, sodales et condimentum vitae, porttitor ut nunc. Praesent aliquet dolor vitae lorem vulputate bibendum. In ut nulla non dui cursus vehicula. Donec in quam nisi, ut congue tellus. Suspendisse ligula nibh, rhoncus in interdum eu, adipiscing in leo. Integer pulvinar, justo lobortis semper venenatis, elit est pharetra augue, at facilisis sapien nulla sed arcu. Aenean sit amet nunc sem, nec sollicitudin ipsum. Phasellus sit amet risus ante. Quisque porta, massa et lacinia varius, risus lorem consectetur orci, id tempor eros nunc id massa.</p>
-
- <h2 id="header2">Bulls and Bears</h2>
- <p>Maecenas mattis rutrum est, et posuere lorem dignissim aliquam. Pellentesque quis accumsan leo. Duis massa felis, hendrerit in fermentum ut, adipiscing id velit. Nulla bibendum arcu eu augue blandit iaculis. Proin sodales, nunc vitae ultricies venenatis, erat orci vestibulum felis, vel suscipit erat justo a ligula. Curabitur venenatis magna consectetur ante mollis sed fringilla dui facilisis. Morbi odio felis, pellentesque ultrices tincidunt eget, euismod non nunc.</p>
-
- <h2 id="header3">Ligers and Giraffelants</h2>
- <p>Nam enim ante, dapibus sed accumsan ac, tristique et augue. In diam ante, dignissim ut ultricies a, condimentum rhoncus augue. Morbi quis massa urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce a tincidunt est. Phasellus sit amet urna nunc. Donec placerat nisl sed nunc eleifend pulvinar. Vivamus nec nisl turpis, at commodo lorem. In quis metus eget urna tincidunt fringilla. In hac habitasse platea dictumst. Nullam in purus at nibh iaculis aliquet sed eu felis. Nullam quis dolor eget tellus ornare fringilla. Praesent arcu erat, tincidunt ut interdum vitae, semper ac enim. Vestibulum nec elit id metus aliquam sollicitudin. Aliquam ut arcu in velit interdum sagittis.</p>
- <p>Nunc in cursus turpis. Quisque at turpis tortor, at rhoncus libero. Morbi at dui ut tortor elementum tincidunt. Pellentesque ac mollis enim. Suspendisse justo quam, ullamcorper vel semper ut, malesuada ac dolor. Maecenas aliquet semper velit, varius scelerisque ante scelerisque sed. Fusce accumsan venenatis libero, et blandit ante facilisis sed. In nec leo nec augue tempor volutpat non vitae magna. Cras lorem eros, suscipit at pellentesque quis, imperdiet id lacus. Aenean facilisis, justo ac gravida mattis, risus magna luctus elit, dignissim rutrum dolor purus eget metus. Pellentesque porttitor felis sit amet leo fermentum tempus.</p>
-
- <h2 id="header4">Exit to the Rear</h2>
- <p>Maecenas sit amet purus eu nisi condimentum dignissim eget id diam. Donec eget magna quis erat posuere iaculis id pretium felis. Nulla semper mi eget enim porttitor ac posuere sem sodales. Donec ante ligula, elementum venenatis tincidunt elementum, fermentum at nisl. Pellentesque tincidunt lectus sit amet nisi lacinia lobortis. Nullam eget est urna. Sed sit amet enim magna. Suspendisse lacinia augue ac ipsum aliquam commodo. Integer cursus lorem ut nisi imperdiet mollis. Mauris ac arcu velit. Cras ac orci magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia aliquam dignissim. Integer sit amet mi dui, in ornare tellus. Proin imperdiet, urna et commodo feugiat, dolor mauris feugiat tellus, ac scelerisque turpis magna at erat.</p>
- </div>
- </body>
-</html>
diff --git a/demos/loan_calculator.html b/demos/loan_calculator.html
new file mode 100644
index 0000000..5d27f4c
--- /dev/null
+++ b/demos/loan_calculator.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>jQuery Impromptu States Example - Loan Calculator</title>
+
+ <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" />
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+ <script type="text/javascript" src="../jquery-impromptu.js"></script>
+
+ <style type="text/css">
+ .jqi .errorBlock{ background-color: #FFC6A5; border: solid 1px #ff0000; color: #ff0000; padding: 5px 10px; font-weight: bold; }
+ .jqi .field{ margin: 4px 0; font-size: 11px; }
+ .jqi .field label{ font-weight: bold; display: block; width: 100px; float: left; clear: left; }
+ .jqi .field input { border: solid 1px #777777; width: 100px; }
+ </style>
+
+ <script type="text/javascript">
+ function openLoanCalculatorPrompt(o){
+ o = jQuery.extend({},{ amount:100000, down: 1500, years:15, rate:5 },o);
+
+ var formstr = '<p>Calculate monthly payments:</p>'+
+ '<div class="field"><label for="intamount">Amount</label><input type="text" name="intamount" id="intamount" value="'+ o.amount +'" /></div>'+
+ '<div class="field"><label for="intdown">Down Payment</label><input type="text" name="intdown" id="intdown" value="'+ o.down +'" /></div>'+
+ '<div class="field"><label for="intyears">Years</label><input type="text" name="intyears" id="intyears" value="'+ o.years +'" /></div>'+
+ '<div class="field"><label for="intrate">Rate</label><input type="text" name="intrate" id="intrate" value="'+ o.rate +'" /></div>';
+
+ jqistates = {
+ state0: {
+ html: formstr,
+ focus: 1,
+ buttons: { Cancel: false, Calculate: true },
+ submit: function(e, v, m, f){
+ var e = "";
+ m.find('.errorBlock').hide('fast',function(){ jQuery(this).remove(); });
+
+ if (v) {
+
+ if(isNaN(f.intamount))
+ e += "Please enter a numeric amount (No commas)<br />";
+
+ if(isNaN(f.intdown))
+ e += "Please enter a numeric down payment (No commas)<br />";
+
+ if(isNaN(f.intyears))
+ e += "Please enter a numeric number of years<br />";
+
+ if(isNaN(f.intrate))
+ e += "Please enter a numeric interest rate<br />";
+
+ if (e == "") {
+
+ var interest = f.intrate/100;
+ var years = f.intyears;
+ var amount = f.intamount-f.intdown;
+ var n = years * 12;
+
+ if(f.intrate == 0){
+ var m = amount / n;
+ }
+ else{
+ var i = interest / 12;
+ var i_to_n = Math.pow((i + 1), n);
+
+ var p = amount * ((i * i_to_n) / (i_to_n - 1));
+ var m = Math.round(p * 100) / 100;
+ }
+
+ jQuery.prompt.getStateContent('state1').find('#intmonthlypayment').text(m);
+ jQuery.prompt.goToState('state1');
+
+ }
+ else{
+ jQuery('<div class="errorBlock" style="display: none;">'+ e +'</div>').prependTo(m).show('slow');
+ }
+ return false;
+ }
+ else return true;
+ }
+ },
+ state1: {
+ html: 'Monthly Payment: $<span id="intmonthlypayment"></span>',
+ focus: 1,
+ buttons: { Back: false, Done: true },
+ submit: function(e,v,m,f){
+ if(v)
+ return true;
+
+ jQuery.prompt.goToState('state0');
+ return false;
+ }
+ }
+ };
+
+ $.prompt(jqistates);
+ }
+ </script>
+ </head>
+
+ <body>
+ <a href="javascript:openLoanCalculatorPrompt({amount:150000, years:30, rate:5.25})">Test Impromptu Loan Calculator</a>
+ </body>
+</html>
diff --git a/demos/select_filter.html b/demos/select_filter.html
new file mode 100644
index 0000000..af03c0f
--- /dev/null
+++ b/demos/select_filter.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+ <title>jQuery Impromptu States Example - Select Dropdown Option Search</title>
+
+ <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" />
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+ <script type="text/javascript" src="../jquery-impromptu.js"></script>
+
+ <style type="text/css">
+ #optionsearch{}
+ #optionsearch h3{ font-family: 'Arial',sans-serif; font-size: 14px; }
+ #optionsearch label{ display: block; }
+ #optionsearch label span{ font-weight: normal; color: #777; }
+ #optionsearch label #optionsearchstatus{ color: #ff0000; font-weight: bold; float: right; display:none;}
+ #optionsearch input[type='search']{ width: 100%; border: solid 1px #d4d4d4; padding: 3px;}
+ #optionsearch #searchoptionswrapper{ margin: 15px 0 15px 0; border: solid 1px #e2e8e6; height: 150px; max-height: 150px; overflow: auto; display: none;}
+
+ /* the styles to make the scrollable tables with radios */
+
+ .radioTable{ width: 100%; border-collapse: collapse; border-spacing: 0; }
+ .radioTable thead{ display: block; }
+ .radioTable tbody{ }
+ .radioTable tr{ display: block; }
+ .radioTable tbody tr:hover{ background-color: #e2e8e6; }
+ .radioTable th{ text-align: left; font-size: 12px; font-weight: bold; padding: 0 0 8px 0; color: #929896; }
+ .radioTable td{ text-align: left; font-size: 11px; font-weight: normal; padding: 3px 0; }
+ .radioTable td.td-radio{ width: 40px; text-align: center; }
+ .radioTable td.td-label{ width: 400px; }
+ .radioTable td label{ font-size: 11px; line-height: 14px; font-weight: normal; display: block; width: 100%; }
+ .radioTable tbody tr.checked{ background-color: #F9B23C; font-weight: bold; }
+ .radioTable tbody tr.checked:hover{ background-color: #e9a22C; }
+ .radioTable tbody tr.checked label{ font-weight: bold; }
+ </style>
+
+ <script type="text/javascript">
+ // ##################################################################################
+ // a quick search routine for selects, fired on contextmenu event
+ // ##################################################################################
+ function showDropdownSearch(e){
+ var $t = $(this),
+ $o = $('option:enabled',$t),
+ tval = $t.val(),
+ html = '<div id="optionsearch">'+
+ '<div class="textinput"><label for="">Search <span>type your search term and press Enter</span><span id="optionsearchstatus">Searching, please wait..</span></label><input type="search" id="searchquery" name="searchquery" value="" placeholder="Search.."></div>'+
+ '<div id="searchoptionswrapper"><table id="searchoptions" class="radioTable" cellpadding="0" cellspacing="0"><tbody></tbody></table></div>'+
+ '</div>';
+
+ e.preventDefault();
+
+ var $imp = $.prompt(html, {
+ title: 'Search Options',
+ buttons: { Ok:true,Cancel:false },
+ submit: function(e,v,m,f){
+ if(v){
+ $t.val(f.searchanswer).change();
+ }
+ }
+ });
+
+ var $so = $('#searchoptions', $imp);
+
+ $so.delegate('input', 'click', function(){
+ $('tr.checked', $so).removeClass('checked');
+ $(this).parent().parent().addClass('checked');
+ });
+
+ $('#searchquery', $imp).focus().keydown(function(event){
+ var $i = $(this),
+ query = $i.val(),
+ re = new RegExp(query,"i"),
+ html = "",
+ counter = 0,
+ $sos = $('#optionsearchstatus',$imp);
+
+ if(event.which == 13 || event.keyCode == 13 && $.trim(query) !== ''){
+
+ $sos.css('display','inline');
+
+ $o.each(function(i,obj){
+ var $currt = $(this),
+ currval = $currt.attr('value'),
+ currtxt = $currt.text(),
+ currterm = currval + currtxt;
+
+ if(re.test(currterm) && currtxt !== '' && currval !== ''){
+ html += '<tr class="row'+ (counter++ % 2) + (currval == tval? ' checked':'')+'">'+
+ '<td class="td-radio"><input type="radio" name="searchanswer" id="searchanswer_'+ counter +'" value="'+ currval +'"'+ (currval == tval? ' checked':'') +'></td>'+
+ '<td class="td-label"><label for="searchanswer_'+ counter +'">'+ currtxt +'</label></td>'+
+ '</tr>';
+ }
+
+ });
+
+ $so.find('tbody').html(html);
+ $so.find('tr:eq(0)').addClass('checked').find('input').attr('checked',true);
+
+ $('#searchoptionswrapper',$imp).slideDown('slow', function(){
+ $sos.hide();
+ });
+
+ event.preventDefault();
+ return false;
+ }// end if enter key
+
+ });
+
+ return false;
+ }
+
+ $(function(){
+ $('select').bind('contextmenu', showDropdownSearch);
+ });
+ </script>
+ </head>
+
+ <body>
+ <p>Right click or ctrl click on the select for it to bring up a search for its options:</p>
+
+ <select name="select1" id="select1">
+ <option value="Alabama, Montgomery">Yellowhammer State</option>
+ <option value="Alaska, Juneau">The Last Frontier</option>
+ <option value="Arizona, Phoenix">The Grand Canyon State</option>
+ <option value="Arkansas, Little Rock">The Natural State</option>
+ <option value="California, Sacramento">The Golden State</option>
+ <option value="Colorado, Denver">The Centennial State</option>
+ <option value="Connecticut, Hartford">The Constitution State</option>
+ <option value="Delaware, Dover">The First State</option>
+ <option value="Florida, Tallahassee">The Sunshine State</option>
+ <option value="Georgia, Atlanta">The Peach State</option>
+ <option value="Hawaii, Honolulu">The Aloha State</option>
+ <option value="Idaho, Boise">The Gem State</option>
+ <option value="Illinois, Springfield">Prairie State</option>
+ <option value="Indiana, Indianapolis">The Hoosier State</option>
+ <option value="Iowa, Des Moines">The Hawkeye State</option>
+ <option value="Kansas, Topeka">The Sunflower State</option>
+ <option value="Kentucky, Frankfort">The Bluegrass State</option>
+ <option value="Louisiana, Baton Rouge">The Pelican State</option>
+ <option value="Maine, Augusta">The Pine Tree State</option>
+ <option value="Maryland, Annapolis">The Old Line State</option>
+ <option value="Massachusetts, Boston">The Bay State</option>
+ <option value="Michigan, Lansing">The Great Lakes State</option>
+ <option value="Minnesota, St. Paul">The North Star State</option>
+ <option value="Mississippi, Jackson">The Magnolia State</option>
+ <option value="Missouri, Jefferson City">The Show Me State</option>
+ <option value="Montana, Helena">The Treasure State</option>
+ <option value="Nebraska, Lincoln">The Cornhusker State</option>
+ <option value="Nevada, Carson City">The Silver State</option>
+ <option value="New Hampshire, Concord">The Granite State</option>
+ <option value="New Jersey, Trenton">The Garden State</option>
+ <option value="New Mexico, Santa Fe">The Land of Enchantment</option>
+ <option value="New York, Albany">The Empire State</option>
+ <option value="North Carolina, Raleigh">The Tar Heel State</option>
+ <option value="North Dakota, Bismarck">The Peace Garden State</option>
+ <option value="Ohio, Columbus">The Buckeye State</option>
+ <option value="Oklahoma, Oklahoma City">The Sooner State</option>
+ <option value="Oregon, Salem">The Beaver State</option>
+ <option value="Pennsylvania, Harrisburg">The Keystone State</option>
+ <option value="Rhode Island, Providence">The Ocean State</option>
+ <option value="South Carolina, Columbia">The Palmetto State</option>
+ <option value="South Dakota, Pierre">Mount Rushmore State</option>
+ <option value="Tennessee, Nashville">The Volunteer State</option>
+ <option value="Texas, Austin">The Lone Star State</option>
+ <option value="Utah, Salt Lake City">The Beehive State</option>
+ <option value="Vermont, Montpelier">The Green Mountain State</option>
+ <option value="Virginia, Richmond">The Old Dominion State</option>
+ <option value="Washington, Olympia">The Evergreen State</option>
+ <option value="West Virginia, Charleston">The Mountain State</option>
+ <option value="Wisconsin, Madison">The Badger State</option>
+ <option value="Wyoming, Cheyenne">The Equality or Cowboy State</option>
+ </select>
+ </body>
+</html>
diff --git a/demos/survey.html b/demos/survey.html
new file mode 100644
index 0000000..43ff180
--- /dev/null
+++ b/demos/survey.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>jQuery Impromptu States Survey Example</title>
+
+ <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" />
+
+ <style type="text/css">
+ /*-------------------------------- */
+ div.jqi .jqimessage .field{ padding: 2px 0; }
+ div.jqi .jqimessage .field textarea{ width: 100%; height: 120px; }
+ /*-------------------------------- */
+ </style>
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+ <script type="text/javascript" src="../jquery-impromptu.js"></script>
+
+
+ <script type="text/javascript">
+ function openprompt(){
+
+ var temp = {
+ state0: {
+ html:'<p>How would you rate the content of this site?</p><div class="field"><input type="radio" name="rate_content" id="rate_content_poor" value="Poor" class="radioinput" /><label for="rate_content_poor">Poor</label></div><div class="field"><input type="radio" name="rate_content" id="rate_content_ok" value="Ok" class="radioinput" /><label for="rate_content_ok">Ok</label></div><div class="field"><input type="radio" name="rate_content" id="rate_content_good" value="Good" class="radioinput" /><label for="rate_content_good">Good</label></div><div class="field"><input type="radio" name="rate_content" id="rate_content_excellent" value="Excellent" class="radioinput" /><label for="rate_content_excellent">Excellent!</label></div>',
+ buttons: { Cancel: false, Next: true },
+ focus: 1,
+ submit:function(e,v,m,f){
+ if(!v)
+ $.prompt.close()
+ else $.prompt.goToState('state1');//go forward
+ return false;
+ }
+ },
+ state1: {
+ html:'<p>Check all which need improvement:</p><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_colors" value="Color Scheme" class="radioinput" /><label for="rate_improve_colors">Color Scheme</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_graphics" value="Graphics" class="radioinput" /><label for="rate_improve_graphics">Graphics</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_readability" value="readability" class="radioinput" /><label for="rate_improve_readability">Readability</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_content" value="Content" class="radioinput" /><label for="rate_improve_content">Content</label></div><div class="field"><input type="checkbox" name="rate_improve" id="rate_improve_other" value="Other" class="radioinput" /><label for="rate_improve_other">Other</label> <input type="text" name="rate_improve_other_txt" id="rate_improve_other_txt" value="" /></div>',
+ buttons: { Back: -1, Cancel: 0, Next: 1 },
+ focus: 2,
+ submit:function(e,v,m,f){
+ if(v==0)
+ $.prompt.close()
+ else if(v==1)
+ $.prompt.goToState('state2');//go forward
+ else if(v=-1)
+ $.prompt.goToState('state0');//go back
+ return false;
+ }
+ },
+ state2: {
+ html:'How did you first find out about this site?<div class="field"><select name="rate_find" id="rate_find"><option value="Search">Search</option><option value="Online Publication">Online Publication</option><option value="friend">A Friend</option><option value="No Clue">No Clue</option></select></div>',
+ buttons: { Back: -1, Cancel: 0, Next: 1 },
+ focus: 2,
+ submit: function(e, v, m, f){
+ if (v == 0)
+ $.prompt.close()
+ else
+ if (v == 1)
+ $.prompt.goToState('state3');//go forward
+ else
+ if (v = -1)
+ $.prompt.goToState('state1');//go back
+ return false;
+ }
+ },
+ state3: {
+ html:'<p>Please leave any other comments you have about this site:</p><div class="field"><textarea id="rate_comments" name="rate_comments"></textarea></div>',
+ buttons: { Back: -1, Cancel: 0, Finish: 1 },
+ focus: 2,
+ submit:function(e,v,m,f){
+ if(v==0)
+ $.prompt.close()
+ else if(v==1)
+ return true; //we're done
+ else if(v=-1)
+ $.prompt.goToState('state2');//go back
+ return false;
+ }
+ }
+ }
+
+ $.prompt(temp,{
+ callback: function(e,v,m,f){
+ var str = "You can now process with this given information:<br />";
+ $.each(f,function(i,obj){
+ str += i + " - <em>" + obj + "</em><br />";
+ });
+ $('#results').html(str);
+ }
+ });
+ }
+ </script>
+ </head>
+
+ <body>
+ <a href="javascript:openprompt()">Test Impromptu States Survey</a>
+ <div id="results"></div>
+ </body>
+</html>
diff --git a/demos/user_manager.html b/demos/user_manager.html
new file mode 100644
index 0000000..3f6d556
--- /dev/null
+++ b/demos/user_manager.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>jQuery Impromptu - Demo 2</title>
+
+ <link rel="stylesheet" media="all" type="text/css" href="../jquery-impromptu.css" />
+
+ <style type="text/css">
+ body,img,p,h1,h2,h3,h4,h5,h6,fieldset,form,table,td,ul,li,pre,blockquote,code{ margin:0; padding:0; border:0; }
+ body{ font: 100% Georgia, "Times New Roman", serif; background-color: #ffffff; color: #565656; text-align: center; }
+ div.wrapper{ position: relative; margin: 0 auto 30px auto; width: 500px; text-align: left; border: solid 1px #aaaaaa; }
+ #users{ }
+ #users .user{ border: solid 1px #bbbbbb; background-color: #dddddd; padding: 10px; margin: 5px; }
+ #users .user .controls{ float: right; }
+
+ /*-------------impromptu---------- */
+ div.jqi .jqimessage .field{ padding: 5px 0; }
+ div.jqi .jqimessage .field label{ display: block; clear: left; float: left; width: 100px; }
+ div.jqi .jqimessage .field input{ width: 150px; border: solid 1px #777777; }
+ div.jqi .jqimessage .field input.error{ width: 150px; border: solid 1px #ff0000; }
+ /*-------------------------------- */
+ </style>
+
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+ <script type="text/javascript" src="../jquery-impromptu.js"></script>
+
+ <script type="text/javascript">
+
+ function editUser(id){
+ var user = $('#userid'+id)
+ var fname = user.find('.fname').text();
+ var lname = user.find('.lname').text();
+
+ var txt = 'What would you like to change this to?'+
+ '<div class="field"><label for="editfname">First Name</label><input type="text" id="editfname" name="editfname" value="'+ fname +'" /></div>'+
+ '<div class="field"><label for="editlname">Last Name</label><input type="text" id="editlname" name="editlname" value="'+ lname +'" /></div>';
+
+ $.prompt(txt,{
+ buttons:{Change:true, Cancel:false},
+ submit: function(e,v,m,f){
+ //this is simple pre submit validation, the submit function
+ //return true to proceed to the callback, or false to take
+ //no further action, the prompt will stay open.
+ var flag = true;
+ if (v) {
+
+ if ($.trim(f.editfname) == '') {
+ m.find('#editfname').addClass('error');
+ flag = false;
+ }
+ else m.find('#editfname').removeClass('error');
+
+ if ($.trim(f.editlname) == '') {
+ m.find('#editlname').addClass('error');
+ flag = false;
+ }
+ else m.find('#editlname').removeClass('error');
+
+ }
+ return flag;
+ },
+ callback: function(e,v,m,f){
+
+ if(v){
+ //Here is where you would do an ajax post to edit the user
+ //also you might want to print out true/false from your .php
+ //file and verify it has been removed before removing from the
+ //html. if false dont remove, $promt() the error.
+
+ //$.post('edituser.php',{userfname:f.editfname,userlname:f.editlname}, callback:function(data){
+ // if(data == 'true'){
+
+ user.find('.fname').text(f.editfname);
+ user.find('.lname').text(f.editlname);
+
+ // }else{ $.prompt('An Error Occured while editing this user'); }
+ //});
+ }
+ else{}
+
+ }
+ });
+ }
+
+
+ function removeUser(id){
+ var txt = 'Are you sure you want to remove this user?<input type="hidden" id="userid" name="userid" value="'+ id +'" />';
+
+ $.prompt(txt,{
+ buttons:{Delete:true, Cancel:false},
+ callback: function(e,v,m,f){
+
+ if(v){
+ var uid = f.userid;
+ //Here is where you would do an ajax post to remove the user
+ //also you might want to print out true/false from your .php
+ //file and verify it has been removed before removing from the
+ //html. if false dont remove, $promt() the error.
+
+ //$.post('removeuser.php',{userid:f.userid}, callback:function(data){
+ // if(data == 'true'){
+
+ $('#userid'+uid).hide('slow', function(){ $(this).remove(); });
+
+ // }else{ $.prompt('An Error Occured while removing this user'); }
+ //});
+ }
+ else{}
+
+ }
+ });
+ }
+
+
+ </script>
+ </head>
+ <body>
+
+ <div class="wrapper">
+ <div id="users">
+ <div id="userid1" class="user">
+ <span class="controls">
+ <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(1);">Edit</a> |
+ <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(1);">Delete</a>
+ </span>
+ <span class="fname">John</span>
+ <span class="lname">Doe</span>
+ </div>
+
+ <div id="userid2" class="user">
+ <span class="controls">
+ <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(2);">Edit</a> |
+ <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(2);">Delete</a>
+ </span>
+ <span class="fname">Jane</span>
+ <span class="lname">Doe</span>
+ </div>
+
+ <div id="userid3" class="user">
+ <span class="controls">
+ <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(3);">Edit</a> |
+ <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(3);">Delete</a>
+ </span>
+ <span class="fname">Bill</span>
+ <span class="lname">Smith</span>
+ </div>
+
+ <div id="userid4" class="user">
+ <span class="controls">
+ <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(4);">Edit</a> |
+ <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(4);">Delete</a>
+ </span>
+ <span class="fname">Steve</span>
+ <span class="lname">Jones</span>
+ </div>
+
+ <div id="userid5" class="user">
+ <span class="controls">
+ <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(5);">Edit</a> |
+ <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(5);">Delete</a>
+ </span>
+ <span class="fname">Will</span>
+ <span class="lname">Johnson</span>
+ </div>
+
+ <div id="userid6" class="user">
+ <span class="controls">
+ <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(6);">Edit</a> |
+ <a href="javascript:;" title="Delete User" class="deleteuser" onclick="removeUser(6);">Delete</a>
+ </span>
+ <span class="fname">Harold</span>
+ <span class="lname">Anderson</span>
+ </div>
+
+ </div>
+ </div>
+
+ </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e5cfd02
--- /dev/null
+++ b/index.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>jQuery Impromptu</title>
+ <meta name="Description" content="The home page of jQuery Impromptu. jQuery Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input." />
+ <meta name="Keywords" content="Impromptu,jQuery Impromptu,jQuery alert,javascript alert,alert,jQuery prompt,javascript prompt,prompt,jQuery confirm,javascript confirm,confirm,jQuery modal,javascript modal,modal,jQuery plugin,jQuery extension" />
+
+
+ <style type="text/css">
+ body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,dl,dt,dd,pre,blockquote,fieldset,label{
+ margin:0;
+ padding:0;
+ border:0;
+ }
+ body{ background-color: #f8f7ec; border-top: solid 10px #777; font: 90% Helvetica, sans-serif; padding: 20px; }
+ h1,h2,h3,h4{ margin: 10px 0; font-family: Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif; font-weight: normal; }
+ h1{font-size: 2.2em;margin: 0 0 20px 0; }
+ h2{ background-color: #D95656; line-height: 18px; font-size: 18px; letter-spacing: 1px; padding: 5px 10px; margin: 10px 0 10px -60px; color: #fff; display: inline-block; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; }
+ h3{ color: #D95656; font-size: 18px; letter-spacing: 1px; margin: 10px 0 10px -20px; }
+ h4{ color: #777; font-size: 18px; letter-spacing: 1px; }
+ p{ margin: 10px 0; line-height: 150%; }
+ a{ color: #7b94b2; }
+ ul,ol{ margin: 10px 0 10px 40px; }
+ li{ margin: 4px 0; }
+ dl{ margin: 10px 0; }
+ dl dt{ font-weight: bold; line-height: 20px; margin: 10px 0 0 0; }
+ dl dd{ margin: -20px 0 10px 120px; padding-bottom: 10px; border-bottom: solid 1px #eee;}
+ pre{ font-size: 12px; line-height: 16px; padding: 5px 5px 5px 10px; margin: 10px 0; background-color: #e4f4d4; border-left: solid 5px #9EC45F; overflow: auto; }
+
+ .wrapper{ background-color: #ffffff; width: 600px; border: solid 1px #eeeeee; padding: 20px 20px 20px 40px; margin: 0 auto; border-radius: 6px; -moz-border-radius: 6px;-webkit-border-radius: 6px; }
+ .header{ text-align: center;}
+ .header ul{ margin: 10px 0; display: block; }
+ .header ul li{ display: inline; list-style: none; margin: 10px 10px; }
+ .header ul li a{ text-transform: uppercase; color: #777; text-decoration: none; }
+ .header ul li a:hover{ color: #555; }
+ .header .tour{ color: #fff; background-color: #9ec45f; padding: 4px 10px; margin: 10px 0; font-size: 18px; line-height: 18px; text-decoration: none;border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px;}
+ .header .tour:hover{ background-color: #8eb44f; }
+ .clear{ clear: both; }
+
+ .methoddl dd{ margin-top: 0; }
+ .example-container{ border-bottom: double 3px #ccc; margin: 0 0 20px 0; padding: 0 0 20px 0; }
+ .example-container button{ border: none; color: #fff; padding: 4px 8px; background-color: #9ec45f; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; }
+ </style>
+
+ <link rel="stylesheet" media="all" type="text/css" href="jquery-impromptu.css" />
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+ <script type="text/javascript" src="jquery-impromptu.js"></script>
+ <script type="text/javascript">
+
+ $(function(){
+ $('.example-container').each(function(i,el){
+ var $ex = $(this),
+ $run = $ex.find('.run'),
+ code = $ex.find('.code').text();
+ $run.click(function(e){
+ e.preventDefault();
+ (new Function(code))();
+ });
+ });
+
+ $('#TourLink').click(function(e){
+ e.preventDefault();
+ $('#TourExample button').click();
+ });
+ });
+
+ </script>
+ </head>
+ <body>
+ <div class="wrapper">
+ <div class="header">
+ <h1>jQuery Impromptu</h1>
+
+ <p><a href="#" title="Take the Tour" class="tour" id="TourLink">Take the Tour</a></p>
+
+ <ul>
+ <li><a href="#Get_Started" title="Get Started">Get Started</a></li>
+ <li><a href="#Options" title="Options">Options</a></li>
+ <li><a href="#Methods" title="Methods">Methods</a></li>
+ <li><a href="#Events" title="Events">Events</a></li>
+ <li><a href="#Examples" title="Examples">Examples</a></li>
+ </ul>
+ </div>
+
+ <div class="content">
+ <!-- ---------------------------------------------- -->
+ <!-- ---------------------------------------------- -->
+ <div id="About" class="section">
+ <h2>About</h2>
+ <p class="intro">jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.</p>
+ </div>
+
+ <!-- ---------------------------------------------- -->
+ <!-- ---------------------------------------------- -->
+ <div id="Get_Started" class="section">
+ <h2>Get Started</h2>
+
+ <h3>Highly Recommended</h3>
+ <p>Subscribe to <a href="http://trentrichardson.com" title="TrentRichardson.com">my newsletter</a> and follow me <a href="http://twitter.com/practicalweb" title="Follow me on Twitter">@practicalweb</a>.</p>
+
+ <h3>Donation</h3>
+ <a href="http://carbounce.com" title="Car Bounce" style="float: right; display: inline-block;width:300px;padding: 10px;background-color: #fbfbfb;border: dotted 4px #e8e8e8;color: #9EC45F;font-size: 14px;text-decoration:none;letter-spacing:1px;"><img src="http://carbounce.com/img/logo_small.png" alt="Car Bounce" align="left" style="margin-right: 20px;"/>Try my new app to keep you informed of your car's financing status and value.</a>
+ <p>Has Impromptu been helpful to you?</p>
+ <div class="donation">
+ <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
+ <input type="hidden" name="cmd" value="_s-xclick">
+ <input type="hidden" name="hosted_button_id" value="LF6AGYRBK6P2S">
+ <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
+ <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
+ </form>
+ </div>
+
+ <h3 id="Download">Download</h3>
+ <ul>
+ <li><a href="https://github.com/trentrichardson/jQuery-Impromptu" title="Fork it on Github">Github</a></li>
+ <li><a href="scripts/mootools-impromptu.3.1.js" title="Download Mootools Impromptu Development">Moopromptu</a></li>
+ </ul>
+
+ <h3>Version</h3>
+ <p>Version 4.0.1</p>
+ <p>Last updated on 03/03/2012</p>
+
+ <p>jQuery Impromptu is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly. </p>
+ <ul>
+ <li><a href="http://trentrichardson.com/Impromptu/GPL-LICENSE.txt" title="GPL License">GPL License</a></li>
+ <li><a href="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt" title="MIT License">MIT License</a></li>
+ </ul>
+
+
+
+ </div>
+
+ <!-- ---------------------------------------------- -->
+ <!-- ---------------------------------------------- -->
+ <div id="Options" class="section">
+ <h2>Options</h2>
+ <pre><code>$.prompt( msg , options )</code></pre>
+ <h3>msg</h3>
+ <p>The message can either be an html string, or an object of "states". Each state has the following properties:</p>
+ <dl>
+ <dt>html</dt>
+ <dd>A string of html or text for the content</dd>
+
+ <dt>buttons</dt>
+ <dd>An object containing the text and values of each button the user may click. <em>Default: { Ok : true }</em></dd>
+
+ <dt>focus</dt>
+ <dd>Index of the button to focus(0,1,2..). <em>Default: 0</em></dd>
+
+ <dt>submit</dt>
+ <dd>A function to be called when the prompt is submitted. <em>Default: function(event, value, message, formVals){}</em> Return false or event.preventDefault() to keep the prompt open. Event object also has properties event.state and event.stateName.</dd>
+ </dl>
+<pre><code>var temp = {
+ state0: {
+ html:'test 1...',
+ buttons: { Cancel: false, Next: true },
+ focus: 1,
+ position: { container: '#elId', x: -300, y: -45, width: 250, arrow: 'rm' },
+ submit:function(e,v,m,f){ }
+ },
+ state1: {
+ html:'test 2..',
+ buttons: { Back: -1, Exit: 0, Next: 1 },
+ focus: 2,
+ submit:function(e,v,m,f){ }
+ }
+};</code></pre>
+ <p>If a string is passed as the message in place of a state, buttons, focus, and submit will be substituted from the options below.</p>
+
+ <h3>options</h3>
+ <dl>
+ <dt>loaded</dt>
+ <dd>A function to be called when the prompt is fully loaded <em>Default: function(event){}</em></dd>
+
+ <dt>submit</dt>
+ <dd>See state submit event above.</dd>
+
+ <dt>statechanging</dt>
+ <dd>A function to be called when a state is about to change. <em>Default: function(event, fromStatename, toStateName){}</em> Return false or event.preventDefault() to prevent the state change.</dd>
+
+ <dt>statechanged</dt>
+ <dd>A function to be called when a state has changed. <em>Default: function(event, toStateName){}</em></dd>
+
+ <dt>callback</dt>
+ <dd>A function to be called when the prompt is submitted and removed. <em>Default: function(event[, value, message, formVals]){}</em> Last three paremeters available only when button was clicked.</dd>
+
+ <dt>buttons</dt>
+ <dd>An object containing the text and values of each button the user may click. <em>Default: { Ok : true }</em></dd>
+
+ <dt>prefix</dt>
+ <dd>A prefix to be used for all css classes and html object id's. <em>Default: 'jqi'</em></dd>
+
+ <dt>classes</dt>
+ <dd>Add class names to the outer Impromptu shell (parent of the fade and prompt) <em>Default: ''</em></dd>
+
+ <dt>focus</dt>
+ <dd>Index of the button to focus(0,1,2..). <em>Default: 0</em></dd>
+
+ <dt>zIndex</dt>
+ <dd>zIndex to apply to the prompt. <em>Default: 999</em></dd>
+
+ <dt>useiframe</dt>
+ <dd>Will use an iframe for the overlay in IE6 to cover up &lt;select&gt;. <em>Default: false</em></dd>
+
+ <dt>top</dt>
+ <dd>Distance from the top of the screen the prompt will be <em>Default: 15%</em></dd>
+
+ <dt>opacity</dt>
+ <dd>The prefered opacity of the transparent layer placed over the container. <em>Default: 0.6</em></dd>
+
+ <dt>overlayspeed</dt>
+ <dd>The prefered speed of the fadeIn and fadeOut of the overlay ("slow", "fast", number) <em>Default: "slow"</em></dd>
+
+ <dt>promptspeed</dt>
+ <dd>The prefered opacity of the showing of the prompt ("slow", "fast", number). <em>Default: "fast"</em></dd>
+
+ <dt>show</dt>
+ <dd>Name of the jQuery method to animate the entrance of the prompt("show","fadeIn","slideDown"). <em>Default: "promptDropIn"</em></dd>
+
+ <dt>persistent</dt>
+ <dd>If the prompt should close when the fade is clicked (true doesn't close). <em>Default: true</em></dd>
+
+ <dt>timeout</dt>
+ <dd>The number of milliseconds until the prompt automatically closes. <em>Default: 0</em></dd>
+ </dl>
+
+ </div>
+
+ <!-- ---------------------------------------------- -->
+ <!-- ---------------------------------------------- -->
+ <div id="Methods" class="section">
+ <h2>Methods</h2>
+ <dl class="methoddl">
+ <dt>jQuery.prompt.setDefaults(options)</dt>
+ <dd>
+ Sets the defaults for prompts.<br />
+<pre><code>jQuery.prompt.setDefaults({
+ prefix: 'myPrompt',
+ show: 'slideDown'
+});</pre></code>
+ </dd>
+
+ <dt>jQuery.prompt.setStateDefaults(options)</dt>
+ <dd>
+ Sets the defaults for states.<br />
+<pre><code>jQuery.prompt.setStateDefaults({
+ buttons: { Ok:true, Cancel:false },
+ focus: 1
+});</pre></code>
+ </dd>
+
+ <dt>jQuery.prompt.getCurrentState()</dt>
+ <dd>Returns a jquery object of the current visible state.</dd>
+
+ <dt>jQuery.prompt.getCurrentStateName()</dt>
+ <dd>Returns a string current visible state's name.</dd>
+
+ <dt>jQuery.prompt.getStateContent(stateName)</dt>
+ <dd>Returns a jquery object of the state, so you can update the content within it.</dd>
+
+ <dt>jQuery.prompt.goToState(stateName, callback)</dt>
+ <dd>Transitions to the specified state. Callback represents a statechanged event.</dd>
+
+ <dt>jQuery.prompt.nextState(callback)</dt>
+ <dd>Transitions to the next state. Callback represents a statechanged event.</dd>
+
+ <dt>jQuery.prompt.prevState(callback)</dt>
+ <dd>Transitions to the previous state. Callback represents a statechanged event.</dd>
+
+ <dt>jQuery.prompt.close()</dt>
+ <dd>Closes the prompt.</dd>
+ </dl>
+
+ </div>
+
+ <!-- ---------------------------------------------- -->
+ <!-- ---------------------------------------------- -->
+ <div id="Events" class="section">
+ <h2>Events</h2>
+
+ <p>If you like to bind events manually you can do so with the following:</p>
+ <dl class="methoddl">
+ <dt>promptloaded</dt>
+ <dd>Same as loaded option. Scope is the entire prompt and fade container.
+<pre>var myPrompt = jQuery.prompt(/*...*/);
+myPrompt.bind('promptloaded', function(e){});</pre>
+ </dd>
+
+ <dt>promptsubmit</dt>
+ <dd>Same as submit option. Scope is the state element. These events are per state, so you must attach it directly to a state.
+<pre>var myPrompt = jQuery.prompt(/*...*/);
+$.prompt.getStateContent('state2')
+ .bind('promptsubmit', function(e,v,m,f){});</pre></dd>
+
+ <dt>promptclose</dt>
+ <dd>Same as callback option. Scope is entire prompt and fade container</dd>
+
+ <dt>promptstatechanging</dt>
+ <dd>Same as statechangin option. Scope is the entire prompt and fade container. This fires before the state changes, so you may return false or use e.preventDefault() prevent the state change.</dd>
+
+ <dt>promptstatechanged</dt>
+ <dd>Same as statechanged option. Scope is the entire prompt and fade container. This fires after the state has successfully changed.</dd>
+ </dl>
+
+ </div>
+
+ <!-- ---------------------------------------------- -->
+ <!-- ---------------------------------------------- -->
+ <div id="Examples" class="section">
+ <h2>Examples</h2>
+
+ <h3>Basics</h3>
+
+<div class="example-container">
+ <p>A prompt in the simplest of fashion.</p>
+<pre class="code">$.prompt("Hello World!");</pre>
+ <div class="buttons">
+ <button class="run">Run It!</button>
+ </div>
+</div>
+
+<div class="example-container">
+ <p>Lets add some buttons and a title.</p>
+<pre class="code">$.prompt("Proceeding may be good for your site..", {
+ title: "Are you Ready?",
+ buttons: { "Yes, I'm Ready": true, "No, Lets Wait": false }
+});</pre>
+ <div class="buttons">
+ <button class="run">Run It!</button>
+ </div>
+</div>
+
+<div class="example-container">
+ <p>Use the submit function to get the answer.</p>
+<pre class="code">$.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);
+ }
+});</pre>
+ <div class="buttons">
+ <button class="run">Run It!</button>
+ </div>
+</div>
+
+ <h3>States</h3>
+
+<div class="example-container">
+ <p>To use states pass in a collection (array or object) of objects with common properties (html, buttons, focus, submit, position..).</p>
+<pre class="code">var statesdemo = {
+ state0: {
+ html:'test 1.&lt;br /&gt;test 1..&lt;br /&gt;test 1...',
+ buttons: { Cancel: false, Next: true },
+ focus: 1,
+ submit:function(e,v,m,f){
+ if(v){
+ e.preventDefault();
+ $.prompt.goToState('state1');
+ }
+ return false;
+ }
+ },
+ state1: {
+ html:'test 2',
+ buttons: { Back: -1, Exit: 0 },
+ focus: 1,
+ submit:function(e,v,m,f){
+ if(v==0) $.prompt.close()
+ else if(v==-1)
+ $.prompt.goToState('state0');
+ e.preventDefault();
+ }
+ }
+};
+
+$.prompt(statesdemo);</pre>
+ <div class="buttons">
+ <button class="run">Run It!</button>
+ </div>
+</div>
+
+<div class="example-container" id="TourExample">
+ <p>To use states pass in a collection (array or object) of objects with common properties (html, buttons, focus, submit, position..).</p>
+<pre class="code" id="TourCode">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: 1,
+ 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: 'Conclusion',
+ html: 'If you found Impromptu helpful, please see the links to the left, if not, thanks for stopping by!',
+ buttons: { Done: 2 },
+ focus: 1,
+ position: { container: '.donation', x: 120, y: 5, width: 300, arrow: 'lt' },
+ submit: tourSubmitFunc
+ }
+];
+$.prompt(tourStates);</pre>
+ <div class="buttons">
+ <button class="run">Run It!</button>
+ </div>
+</div>
+
+ <h3>Forms</h3>
+
+<div class="example-container">
+ <p>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.</p>
+<pre class="code">var statesdemo = {
+ state0: {
+ title: 'Name',
+ html:'&lt;label&gt;First &lt;input type="text" name="fname" value=""&gt;&lt;/label&gt;&lt;br /&gt;'+
+ '&lt;label&gt;Last &lt;input type="text" name="lname" value=""&gt;&lt;/label&gt;&lt;br /&gt;',
+ buttons: { Next: 1 },
+ focus: 1,
+ submit:function(e,v,m,f){
+ console.log(f);
+
+ e.preventDefault();
+ $.prompt.goToState('state1');
+ }
+ },
+ state1: {
+ title: 'Gender',
+ html:'&lt;label&gt;&lt;input type="radio" name="gender" value="Male"&gt; Male&lt;/label&gt;&lt;br /&gt;'+
+ '&lt;label&gt;&lt;input type="radio" name="gender" value="Female"&gt; Female&lt;/label&gt;',
+ buttons: { Back: -1, Next: 1 },
+ focus: 1,
+ 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:'&lt;label&gt;Travels By &lt;select name="travel" multiple&gt;'+
+ '&lt;option value="Car" selected&gt;Car&lt;/option&gt;'+
+ '&lt;option value="Bus"&gt;Bus&lt;/option&gt;'+
+ '&lt;option value="Plane" selected&gt;Plane&lt;/option&gt;'+
+ '&lt;option value="Train"&gt;Train&lt;/option&gt;'+
+ '&lt;/select&gt;&lt;/label&gt;',
+ 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);</pre>
+ <div class="buttons">
+ <button class="run">Run It!</button>
+ </div>
+</div>
+
+ <h3>Advanced</h3>
+ <p>The following are example demonstrations of various useful utilities with Impromptu.</p>
+ <ul>
+ <li><a href="demos/user_manager.html" title="User Manager Demo">User Manager</a></li>
+ <li><a href="demos/survey.html" title="Survey Demo">Survey</a></li>
+ <li><a href="demos/loan_calculator.html" title="Loan Calculator Demo">Loan Calculator</a></li>
+ <li><a href="demos/select_filter.html" title="Select Dropdown Search Filter Demo">Select Dropdown Search Filter</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="footer">
+
+ </div>
+ </div>
+
+ <script type="text/javascript">
+ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+ document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+ </script>
+ <script type="text/javascript">
+ try {
+ var pageTracker = _gat._getTracker("UA-7602218-1");
+ pageTracker._trackPageview();
+ } catch(err) {}</script>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/default.css b/jquery-impromptu.css
index 6af8c30..5f18389 100644
--- a/default.css
+++ b/jquery-impromptu.css
@@ -15,9 +15,9 @@ div.jqi{
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
- border-radius: 10px;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
+ border-radius: 6px;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
padding: 7px;
}
div.jqi .jqicontainer{
generated by cgit v1.1 at 2025-05-11 16:56:10 +0000