确认对话框
一个确认对话框和两个预设按钮
new $.flavr({ content : 'Are you sure to delete your memories?',
dialog : 'confirm', onConfirm : function(){ alert('Deleted'); }, onCancel : function(){
alert('Canceled'); } }); /*----- OR ----- */ new $.flavr().confirm('Are you sure
to delete your memories?', function(){ alert('Deleted'); }, function(){ alert('Canceled');
});
提示对话框
一个更好的提示对话框
new $.flavr({ content : 'How old are you?', dialog : 'prompt',
prompt : { placeholder: 'Enter something' }, onConfirm : function( $container, $prompt
){ alert( $prompt.val() ); return false; }, onCancel : function(){ alert('Canceled');
} }); /*----- OR ----- */ new $.flavr().prompt('Enter something', 'How old are you?',
function( $container, $prompt ){ alert( $prompt.val() ); return false; }, function(){
alert('Canceled'); });
多个对话框实例
flavr支持无限的对话实例/层,将堆栈在用户屏幕上
new $.flavr({ content : 'Nuff siad, here is the last one',
position : 'top-right' }, function(){ new $.flavr({ content : 'The stack is unlimited,
pretty cool huh', position : 'top-left' }, function(){ new $.flavr({ content : 'Here
is the dialog #3', position : 'bottom-right' }, function(){ new $.flavr({ content
: 'Me dialog #2', position : 'bottom-mid' }, function(){ new $.flavr({ content :'I
am dialog #1', buttons : { exit : { text: 'Close All', style: 'danger', action:
function(){ this.exit(); } }, close : {} } }); }); }); }); });
多个按钮
你可以添加任意数量的按钮。
new $.flavr({ content : 'flavr box with multiple buttons',
buttons : { primary : { text: 'Primary', style: 'primary', action: function(){ alert('Primary
button'); return false; } }, success : { text: 'Success', style: 'success', action:
function(){ alert('Mission succeed!'); return false; } }, info : { text: 'Info',
style: 'info', action: function(){ alert('For your information'); return false;
} }, warning : { text: 'Warning', style: 'warning', action: function(){ alert('No
good captain!'); return false; } }, danger : { text: 'Danger', style: 'danger',
action: function(){ alert('Mission failed!'); return false; } }, close : { style:
'default' } } });
堆叠按钮
选择显示你的按钮内联或者垂直叠放
new $.flavr({ buttonDisplay : 'stacked', content : 'flavr
with stacked buttons', buttons : { confirm : { style: 'info' }, remove : { style:
'danger' }, close : { style: 'default' } } });
Html内容
flavr接受默认的HTML内容。设置html选项为false,以防止flavr接受任何html标记。
var html = ' <div class="form-row">' +
' <input type="text" name="username" ' + ' placeholder="Username"
/>' + ' </div>' + ' <div class="form-row">' + ' <input
type="password" name="password" ' + ' placeholder="Password"
/>' + ' </div>' + ' <div class="form-row">' + ' <input
type="checkbox" name="remember" ' + ' id="check"/>'
+ ' <label for="check">Remember me</label>' + ' </div>';
new $.flavr({ title : 'Form', iconPath : 'flavr/images/icons/', icon : 'email.png',
content : 'HTML form example', dialog : 'form', form : { content: html, method:
'post' }, onSubmit : function( $container, $form ){ alert( $form.serialize() );
return false; } });
非模态的对话框
非模态的是扭转模态对话框的状态,并不妨碍用户交互页面的其他元素。
var modeless = new $.flavr({ modal : false, content :
'This is a modeless dialog' }); /* Closing the dialog */ modeless.close();
自动关闭对话框
下面的对话框会5秒自动关闭
new $.flavr({ content : 'Autoclosing the dialog in 5 seconds',
autoclose : true, timeout : 5000 /* Default timeout is 3 seconds */ });
选择关闭
flavr提供选项或者关闭当前对话框点击叠加或按下键盘Escape按钮
new $.flavr({ content : 'Try clicking the overlay or pressing
the escape button', closeOverlay : true, closeEsc : true });
设置动画
flavr使用流行的动画。提供一些令人惊异的CSS3动画。
var select = $(this).parent().siblings('.demo-select');
var entrance = select.find('.animate-entrance :selected').text(); var closing =
select.find('.animate-closing :selected').text(); new $.flavr({ animateEntrance
: entrance, animateClosing : closing, content : 'Animation example' });
导引动画
flavr动画提供了几个快捷方式寻求您的用户关注
new $.flavr({ position : 'top-mid', content : 'Attention
seeker animation examples', buttons : { swing : { style: 'info', action: function(){
this.swing(); return false }}, shake : { style: 'warning', action: function(){ this.shake();
return false }}, wobble : { style: 'danger', action: function(){ this.wobble();
return false }}, flash : { style: 'primary', action: function(){ this.flash(); return
false }}, tada : { style: 'info', action: function(){ this.tada(); return false
}}, pulse : { style: 'warning', action: function(){ this.pulse(); return false }},
bounce : { style: 'danger', action: function(){ this.animate('bounce'); return false
}}, close : {} } });
动态对话框
令人惊讶的是,flavr可以全屏对话框,调整对话框到特定的高度或宽度,改变其内容、位置和更多
new $.flavr({ content : 'Resize your Dialog', buttons
: { resize : { text: 'Resize 700 x 300', style: 'info', action: function(){ this.resize(
700, 300 ); return false; } }, full : { text: 'Fullscreen', style: 'warning', action:
function(){ this.fullscreen(); return false; } }, revert : { text: 'Original Size',
style: 'danger', action: function(){ this.revert(); return false; } }, content :
{ text: 'Change Content', style: 'info', action: function(){ this.content('<p>This
is the new content</p><br/><p>New line</p>'); return false;
} }, close : {} } });
回调
flavr提供你回调在一个特定阶段的能力和条件,将极大地帮助你建立一个对话框
new $.flavr({ content : 'flavr callback examples', buttons
: { shake : { style: 'primary', action: function(){ this.shake(function(){ alert('Shake
animation callback'); }); return false; } }, hide : { style: 'info', action: function(){
this.hide(); return false; } }, close : { style: 'warning' } }, onLoad : function(){
alert('The plugin has been loaded'); }, onBuild : function(){ alert('We have succesfully
build the DOM elements'); }, onShow : function(){ alert('The dialog has been shown');
}, onHide : function(){ alert('Now hidding the dialog'); }, onClose : function(){
alert('We\'re about to close the dialog'); } });