diff options
Diffstat (limited to 'demos/twitter_bootstrap.html')
| -rw-r--r-- | demos/twitter_bootstrap.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/demos/twitter_bootstrap.html b/demos/twitter_bootstrap.html new file mode 100644 index 0000000..9035071 --- /dev/null +++ b/demos/twitter_bootstrap.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + + <title>jQuery Impromptu with Twitter Bootstrap</title> + + <meta name="Description" content="jQuery Impromptu theme with twitter bootstrap." /> + <meta name="Keywords" content="jquery, impromptu, prompt, twitter, bootstrap" /> + + <link rel="stylesheet" media="all" type="text/css" href="../themes/twitter-bootstrap/bootstrap-impromptu.css" /> + <link rel="stylesheet" media="all" type="text/css" href="../themes/twitter-bootstrap/css/bootstrap.min.css" /> + + <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> + <script type="text/javascript" src="../jquery-impromptu.js"></script> + + <script type="text/javascript"> + function openprompt(){ + + var temp = { + state0: { + title: 'Content Rating', + html:'<label class="radio" for="rate_content_poor"><input type="radio" name="rate_content" id="rate_content_poor" value="Poor" class="radioinput" />Poor</label>'+ + '<label class="radio" for="rate_content_ok"><input type="radio" name="rate_content" id="rate_content_ok" value="Ok" class="radioinput" />Ok</label>'+ + '<label class="radio" for="rate_content_good"><input type="radio" name="rate_content" id="rate_content_good" value="Good" class="radioinput" />Good</label>'+ + '<label class="radio" for="rate_content_excellent"><input type="radio" name="rate_content" id="rate_content_excellent" value="Excellent" class="radioinput" />Excellent!</label>', + 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: { + title: 'Needs Improvement', + html:'<p>Check all which need improvement:</p>'+ + '<label class="checkbox" for="rate_improve_colors"><input type="checkbox" name="rate_improve" id="rate_improve_colors" value="Color Scheme" class="radioinput" />Color Scheme</label>'+ + '<label class="checkbox" for="rate_improve_graphics"><input type="checkbox" name="rate_improve" id="rate_improve_graphics" value="Graphics" class="radioinput" />Graphics</label>'+ + '<label class="checkbox" for="rate_improve_readability"><input type="checkbox" name="rate_improve" id="rate_improve_readability" value="readability" class="radioinput" />Readability</label>'+ + '<label class="checkbox" for="rate_improve_content"><input type="checkbox" name="rate_improve" id="rate_improve_content" value="Content" class="radioinput" />Content</label>'+ + '<label class="checkbox" for="rate_improve_other"><input type="checkbox" name="rate_improve" id="rate_improve_other" value="Other" class="radioinput" />Other</label>'+ + '<input type="text" name="rate_improve_other_txt" id="rate_improve_other_txt" value="" placeholder="Other Description" />', + 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: { + title: 'How did you find this site?', + html:'<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>', + 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: { + title: 'Additional Comments', + 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,{ + close: 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>
\ No newline at end of file |