flavr—超级漂亮的jQuery扁平弹出对话框

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

插件描述：flavr是一个时尚的扁平弹出对话框为您的下一个网站。 flavr是响应设计布局，能够适应任何屏幕大小。得到最好的用户体验,使用流行的animate.css动画，最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。

flavr特点

清洁和现代平面设计
充分响应
轻量级的、功能强大的
基于Bootstrap 开发
CSS3动画在现代浏览器
jQuery提供动力
跨浏览器支持

调用示例

确认对话框

new $.flavr({content     : 'Press a button',dialog      : 'confirm',onConfirm   : function( $container ){alert('You pressed Confirm!');return false;},onCancel    : function( $container ){alert('You pressed Cancel');}
});
.flavr({content     : 'Press a button',dialog      : 'confirm',onConfirm   : function( $container ){alert('You pressed Confirm!');return false;},onCancel    : function( $container ){alert('You pressed Cancel');}
});

提示对话框

new $.flavr({content     : 'Please enter your name',dialog      : 'prompt',prompt      : { value: 'Harry Potter', addClass: 'prompt-name' },onConfirm   : function( $container, $prompt ){alert('Howdy ' + $prompt.val() + ' !');return false;}
});
.flavr({content     : 'Please enter your name',dialog      : 'prompt',prompt      : { value: 'Harry Potter', addClass: 'prompt-name' },onConfirm   : function( $container, $prompt ){alert('Howdy ' + $prompt.val() + ' !');return false;}
});

表单对话框

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',content     : 'Please login to continue',dialog      : 'form',form        : { content: html, addClass: 'form-html' },onSubmit    : function( $container, $form ){alert( $form.serialize() );        return false;}
});
 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',content     : 'Please login to continue',dialog      : 'form',form        : { content: html, addClass: 'form-html' },onSubmit    : function( $container, $form ){alert( $form.serialize() );        return false;}
});

还有其他一些用法在页面源代码中写得很详细，我就不一一列举了！

当时只是看了一下觉得很简单就直接上传了，看了评论说js很多，我疏忽了大家对一些js插件不认识。谢谢大家的提醒现在我补充一下demo中那些是必须的，那些是按自己需要加载的。

<!-- Google字体，根据需要更换国内的在线字体服务或者用系统默认的字体，非必须加载项 --><link rel="stylesheet" type="text/css" href="./index_files/lato.css"><!-- DEMO PAGE CSS --><!-- bootstrap框架 --><link rel="stylesheet" type="text/css" href="./index_files/bootstrap.min.css"><!-- fontawesome是一个免费的图标字体，根据自己的项目需要加载（现在网页基本上用这用图标字体了，代替图片，加快网页速度，节省流量等一系列优点，不知道的朋友请百度）--><link rel="stylesheet" type="text/css" href="./index_files/fontawesome.css"><!-- 下面两个css为demo样式，demo网页背景相关的样式，个人项目中无需引入 --><link rel="stylesheet" type="text/css" href="./index_files/default.css"><link rel="stylesheet" type="text/css" href="./index_files/style.css"><!-- END DEMO PAGE CSS --><!-- flavr CSS 下面是本插件的核心css文件，必须加载--><!-- animate.css 是github上很受欢迎的css3动画类库，本插件的所有动画都是靠animate.css实现的，如果你不需要弹出层有动画效果的话也可以不用加载 --><link rel="stylesheet" type="text/css" href="./index_files/animate.css"><!-- 插件样式，必须加载 --><link rel="stylesheet" type="text/css" href="./index_files/flavr.css"><!-- END flavr CSS -->
-- Google字体，根据需要更换国内的在线字体服务或者用系统默认的字体，非必须加载项 --><link rel="stylesheet" type="text/css" href="./index_files/lato.css"><!-- DEMO PAGE CSS --><!-- bootstrap框架 --><link rel="stylesheet" type="text/css" href="./index_files/bootstrap.min.css"><!-- fontawesome是一个免费的图标字体，根据自己的项目需要加载（现在网页基本上用这用图标字体了，代替图片，加快网页速度，节省流量等一系列优点，不知道的朋友请百度）--><link rel="stylesheet" type="text/css" href="./index_files/fontawesome.css"><!-- 下面两个css为demo样式，demo网页背景相关的样式，个人项目中无需引入 --><link rel="stylesheet" type="text/css" href="./index_files/default.css"><link rel="stylesheet" type="text/css" href="./index_files/style.css"><!-- END DEMO PAGE CSS --><!-- flavr CSS 下面是本插件的核心css文件，必须加载--><!-- animate.css 是github上很受欢迎的css3动画类库，本插件的所有动画都是靠animate.css实现的，如果你不需要弹出层有动画效果的话也可以不用加载 --><link rel="stylesheet" type="text/css" href="./index_files/animate.css"><!-- 插件样式，必须加载 --><link rel="stylesheet" type="text/css" href="./index_files/flavr.css"><!-- END flavr CSS -->

上面是css的引入问题，下面是js的引入

<!-- jQuery和bootstrap必须加载，这个是弹窗的基本提供 -->
<script type="text/javascript" src="./index_files/jquery.min.js"></script>
<script type="text/javascript" src="./index_files/bootstrap.min.js"></script>
<!-- 下面两个是点击demo按钮时触发的效果，不需要加载 -->
<script type="text/javascript" src="./index_files/jquery.browser.js"></script>
<script type="text/javascript" src="./index_files/livedemo.js"></script>
<!-- 下面插件是代码高亮插件，只是给大家在demo页面上看到更直观的代码而已，实际项目中无需加载 -->
<script type="text/javascript" src="./index_files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();//初始化代码高亮</script>
<!-- BEGIN flavr SCRIPT -->
<!-- 下面是插件核心代码，必须加载 -->
<script type="text/javascript" src="./index_files/flavr.min.js"></script><!-- END flavr SCRIPT -->
-- jQuery和bootstrap必须加载，这个是弹窗的基本提供 -->
<script type="text/javascript" src="./index_files/jquery.min.js"></script>
<script type="text/javascript" src="./index_files/bootstrap.min.js"></script>
<!-- 下面两个是点击demo按钮时触发的效果，不需要加载 -->
<script type="text/javascript" src="./index_files/jquery.browser.js"></script>
<script type="text/javascript" src="./index_files/livedemo.js"></script>
<!-- 下面插件是代码高亮插件，只是给大家在demo页面上看到更直观的代码而已，实际项目中无需加载 -->
<script type="text/javascript" src="./index_files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();//初始化代码高亮</script>
<!-- BEGIN flavr SCRIPT -->
<!-- 下面是插件核心代码，必须加载 -->
<script type="text/javascript" src="./index_files/flavr.min.js"></script><!-- END flavr SCRIPT -->

页面中最底下的代码解释：

<script type="text/javascript">$(document).ready(function(){$('.livedemo').livedemo(); //demo按钮点击时事件      $('.footer .socials a').on('mouseenter', function(){var animationEnd = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';$(this).addClass('swing animated').bind( animationEnd, function(){$(this).removeClass('swing animated');});            });$('.demo-block .demo-actions .btn-demo').on('click', function(e){            e.preventDefault();});/*** 下面是每个对话框实例化的方法，例如第一个最简单的对话框（一点点解释吧0.0）：* $('#demo-alert .demo-actions .btn-demo').on('click', function(){            new $.flavr('Hello World!');        });$('#demo-alert .demo-actions .btn-demo') jQuery获取一个class名为.btn-demo的按钮，前面两个实际是缩小范围获取这个按钮真正实例化flavr是这段代码：new $.flavr('Hello World!');(你可以建立一个测试页面把hello word 改为其他的字符，这样你能更直观理解这个插件)下面的代码分别对应了每个实例的弹出框的方法，大家可以对应着写之前是我疏忽了大家可能看不懂的原因，现在我大致写了一些，如果大家对jQuery、bootstrap、 animate.css不知道的请百度吧0.0*//*  -------------------------------------------------------------------------------Simple Alert------------------------------------------------------------------------------- */  $('#demo-alert .demo-actions .btn-demo').on('click', function(){            new $.flavr('Hello World!');        });.........
</script>="text/javascript">$(document).ready(function(){$('.livedemo').livedemo(); //demo按钮点击时事件      $('.footer .socials a').on('mouseenter', function(){var animationEnd = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';$(this).addClass('swing animated').bind( animationEnd, function(){$(this).removeClass('swing animated');});            });$('.demo-block .demo-actions .btn-demo').on('click', function(e){            e.preventDefault();});/*** 下面是每个对话框实例化的方法，例如第一个最简单的对话框（一点点解释吧0.0）：* $('#demo-alert .demo-actions .btn-demo').on('click', function(){            new $.flavr('Hello World!');        });$('#demo-alert .demo-actions .btn-demo') jQuery获取一个class名为.btn-demo的按钮，前面两个实际是缩小范围获取这个按钮真正实例化flavr是这段代码：new $.flavr('Hello World!');(你可以建立一个测试页面把hello word 改为其他的字符，这样你能更直观理解这个插件)下面的代码分别对应了每个实例的弹出框的方法，大家可以对应着写之前是我疏忽了大家可能看不懂的原因，现在我大致写了一些，如果大家对jQuery、bootstrap、 animate.css不知道的请百度吧0.0*//*  -------------------------------------------------------------------------------Simple Alert------------------------------------------------------------------------------- */  $('#demo-alert .demo-actions .btn-demo').on('click', function(){            new $.flavr('Hello World!');        });.........
</script>

flavr—超级漂亮的jQuery扁平弹出对话框相关推荐

jquery easyui 弹出对话框被activex控件遮挡问题
为什么80%的码农都做不了架构师?>>> 参考:http://bbs.csdn.net/topics/390375764 本人遇到jquery easyui 弹出对话框被act ...
jQuery Mobile弹出对话框后不刷新原页面，保持原页面内容不变
使用jQuery Mobile开发移动应用程序时,在一个页面上弹出对话框,关闭对话框后,发现原来的页面被刷新了.如果原页面上有一些已经选择或者填写的数据,则这些数据就会丢失.这时候,就需要对对话框的返 ...
div alert html,基于jQuery的弹出消息插件 DivAlert之旅（一）
想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来 ...
Linux程序实现弹框,jQuery实现弹出框效果绝对美观
使用到JQeury写的几个比较好的Popup DialogBox,觉得不错.和大家分享下.使用它们结合.net可以实现很好的效果. 1.jqpopup: 是个可以拖拽,缩放并可以在它上面显示html页 ...
html遮罩提示框代码,基于jQuery实现弹出可关闭遮罩提示框实例代码
jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果先给大家展示下效果图,如果大家感觉还不错,请参考实 ...
[原创]jQuery动画弹出窗体支持多种展现方式
今天刚写的利用jQuery动画弹出窗体,支持了string.Ajax.iframe.controls四种展现方式,具体细节下面慢慢介绍,先看效果图. 动画效果从哪个对象上触发的即从该对象开始逐渐向屏 ...
jQuery实现弹出层效果
###jQuery实现弹出层效果点击弹出层:弹出弹出层点击阴影:关闭弹出层点击"关闭"关闭弹出层整体代码如下: <!DOCTYPE html> <htm ...
jquery 弹出对话框
jquery 弹出对话框 https://www.cnblogs.com/tylerdonet/p/4188962.html posted @ 2019-05-13 12:57 李华丽阅读( ... ...
Jquery 弹出对话框插件xcConfirm.js
Jquery 弹出对话框插件xcConfirm.js,感觉很方便使用,使用方法如下: <!DOCTYPE html> <html><head><meta ch ...

flavr—超级漂亮的jQuery扁平弹出对话框

flavr特点

flavr—超级漂亮的jQuery扁平弹出对话框相关推荐

最新文章

热门文章