jQuery Impromptu 彈出視窗 1

基本語法

$.prompt( msg , options )


整理出幾個基本常會用的用法

// 1. 簡易彈出視窗
$.prompt('Example 1');

// 2. OK,Cancel
$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } });


// 3. 跳出訊息視窗時，會預設按鈕，傳統的訊息視窗會預設在確認按鈕上，此部分在警告流程中，使用者很喜歡這樣的方式
$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 });

// 4. 此使用 prefix 屬性來改變 css
$.prompt('Example 5',{ prefix: 'impromptu' });

// 5. 加入顯示特效
$.prompt('Example 6',{ show:'slideDown' });

// 6. 顯示自訂樣式彈出視窗
var brown_theme_text = 'Example 13'+
'<p> Save these settings?</p>'+
'<img src="images/help.gif" alt="help" '+
'class="helpImg" />';

$.prompt(brown_theme_text,{
buttons:{Ok:true,Cancel:false},
prefix:'brownJqi'
});


// 7. 多步驟決定彈出視窗
var statesdemo = {
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
$.prompt.goToState('state1');
return false;
}
},
state1: {
html:'test 2',
buttons: { Back: -1, Exit: 0 },
focus: 1,
submit:function(v,m,f){
if(v==0) $.prompt.close()
else if(v=-1)
$.prompt.goToState('state0');
return false;
}
}
};

$.prompt(statesdemo);



以上幾個是比較常用到的彈出視窗


參考資料來源：http://trentrichardson.com/Impromptu/index.php