确认对话框
一个确认对话框和两个预设按钮
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'); } });