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>