jQuery Impromptu(jQuery Dialog插件)（2）--prompt user input in a fashionable way

分析例子，以便更好的理解：
例子1：http://trentrichardson.com/Impromptu/demos/demo1.html

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(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{}
             }
    });
}

例子2：http://trentrichardson.com/Impromptu/demos/demo2.html

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(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(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{}
    }
    });
}

例子3：http://trentrichardson.com/Impromptu/demos/demostates.html states转换

function openprompt(){
var temp = {
    state0: {
    html:'test 1.<br />test 1..<br />test 1',
    buttons: { Cancel: false, Next: true },
    focus: 1,
    submit:function(v,m,f){ 
    if(!v)
        return true;
    else $.ImpromptuGoToState('state1');//go forward
        return false; 
                }
    },
    state1: {
             html:'test 2',
        buttons: { Back: -1, Exit: 0, Next: 1 },
        focus: 2,
        submit:function(v,m,f){ 
        if(v==0)
            jQuery.ImpromptuClose()
        else if(v==1)
            $.ImpromptuGoToState('state2');//go forward
        else if(v=-1)
            $.ImpromptuGoToState('state0');//go back
        return false; 
                    }
        },
    state2: {
        html:'This is the next one<br />test 3',
        buttons: { Back: true, Done: false },
        submit:function(v,m,f){ 
        if(!v)
        return true;
        else $.ImpromptuGoToState('state1');//go back
            return false; 
                    }
        }
     }
            
    $.prompt(temp);
}

例子4：http://trentrichardson.com/Impromptu/demos/survey.html

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(v,m,f){ 
        if(!v)
        jQuery.ImpromptuClose()
        else $.ImpromptuGoToState('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(v,m,f){
        if(v==0)
        jQuery.ImpromptuClose()
        else if(v==1)
        $.ImpromptuGoToState('state2');//go forward
        else if(v=-1)
        $.ImpromptuGoToState('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(v, m, f){
        if (v == 0) 
            jQuery.ImpromptuClose()
        else 
            if (v == 1) 
        $.ImpromptuGoToState('state3');//go forward
        else 
            if (v = -1) 
        $.ImpromptuGoToState('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(v,m,f){ 
        if(v==0) 
        jQuery.ImpromptuClose()
        else if(v==1)                                         return true; //we're done
        else if(v=-1)
        $.ImpromptuGoToState('state2');//go back
        return false; 
        }
        }
        }
$.prompt(temp,{
    callback: function(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 />";
            });    
    $.prompt(str);
    }
    });
    }

例子4：Test Impromptu With Ajax
http://trentrichardson.com/Impromptu/demos/demoajax.html

function openprompt(){
        $.getJSON('demoajax.js',function(json){
        var str = 'Test with a select populated by json data:<br /><select name="myfield" id="myfield">';
        $.each(json,function(i,obj){
        str += '<option value="'+ obj.value +'">'+ obj.name +'</option>';
        });
        str += '</select>';
        $.prompt(str,{
        callback: function(v,m,f){ //just print out the selection
        $.prompt('You chose value '+ f.myfield);
                    }
        });        
        });
        }

例子5：Demo States - Loan Calculator

http://trentrichardson.com/Impromptu/demos/loan_calculator.html

function openLoanCalculatorPrompt(o){
    o = jQuery.extend({},{ amount:100000, 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="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(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<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;
    var n = years * 12;
    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('#intmonthlypayment').text(m);                        jQuery.ImpromptuGoToState('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(v,m,f){
        if(v)
            return true;
            jQuery.ImpromptuGoToState('state0');
        return false;
    }
}};
    $.prompt(jqistates);
}

最后是一段csss样式，默认前缀jqi，修改时替换前缀进行修改

.jqifade{
      position: absolute; 
      background-color: #aaaaaa; 
}
div.jqi{ 
      width: 400px; 
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
      position: absolute; 
      background-color: #ffffff;
      font-size: 11px; 
      text-align: left; 
      border: solid 1px #eeeeee;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      padding: 7px;
}
div.jqi .jqicontainer{ 
      font-weight: bold; 
}
div.jqi .jqiclose{ 
      position: absolute;
      top: 4px; right: -2px; 
      width: 18px; 
      cursor: default; 
      color: #bbbbbb; 
      font-weight: bold; 
}
div.jqi .jqimessage{ 
      padding: 10px; 
      line-height: 20px; 
      color: #444444; 
}
div.jqi .jqibuttons{ 
      text-align: right; 
      padding: 5px 0 5px 0; 
      border: solid 1px #eeeeee; 
      background-color: #f4f4f4;
}
div.jqi button{ 
      padding: 3px 10px;
      margin: 0 10px; 
      background-color: #2F6073; 
      border: solid 1px #f4f4f4; 
      color: #ffffff; 
      font-weight: bold; 
      font-size: 12px; 
}
div.jqi button:hover{ 
      background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{ 
      background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{ 
      background-color: #BF5E26;
}