前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

插件描述：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扁平弹出对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。