現代Web設計技術允許開發者快速實現大多數瀏覽器支持的動畫。我想警告消息是很常見的，因為預設的JavaScript警告框的樣式往往（與你自己設計的漂亮樣式）很不協調很囧。這使開發者步入找出哪種解決方案能更好地實現更友好的用戶界面的道路。 在這個教程中我想解釋一下我們如何能把幾個將要出現在網頁上方.....
現代Web設計技術允許開發者快速實現大多數瀏覽器支持的動畫。我想警告消息是很常見的，因為預設的JavaScript警告框的樣式往往（與你自己設計的漂亮樣式）很不協調很囧。這使開發者步入找出哪種解決方案能更好地實現更友好的用戶界面的道路。
在這個教程中我想解釋一下我們如何能把幾個將要出現在網頁上方的CSS3通知框放在一起。用戶可以點擊這些通知框使它們逐漸淡出消失，最終將他們從DOM中移除。作為一個有趣的附加功能，我還包括了一個按鈕，你可以點擊它來添加一個新的警告框到頁面頂部。你可以下載查看一下我的示例演示，以對我們將做的事情有一個更好的瞭解。
建立頁面
首先, 我們需要創建兩個文件命名為“index.html” 和 “style.css”. 我將從Google CDN上調用最新的jQuery 庫. HTML是非常簡單的,因為我們只需要在警告框裡加入一些文本. 所有的JavaScript代碼被加在了頁面的底部,這樣可以節省HTTP請求時間.
| 1 2 3 4 5 6 7 8 9 10 |
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>CSS3 Notification Boxes Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
|
頭部代碼設置了外部調用文件和 HTML5文檔規範 . 不是很複雜因為我們只是建立一個簡單的示例. 對於提示視窗我定義兩個不同的樣式 – 成功的和錯誤的. 還有一些其它風格的例如警告框和信息框, 但是我沒有創建更多的,因為我更關註的是效果.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="content">
<!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
<div class="notify successbox">
<h1>Success!</h1>
<span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
<p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
</div>
<div class="notify errorbox">
<h1>Warning!</h1>
<span class="alerticon"><img src="images/error.png" alt="error" /></span>
<p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
</div>
<p>Click the error boxes to dismiss with a fading effect.</p>
<p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>
<div class="btns clearfix">
<a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
<a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
</div>
</div><!-- @end #content -->
|
每個圖標文件來自 免費的PSD 和UI作品. 這些圖標被我調整為適當的大小.如何你需要警告/信息圖標你可以變變顏色創建成你自己的. 這個類名 .notify 被添加到每一個消息DIV上. 它定義了DIV的陰影和字體類型.
其它的類例如 .successbox 和 .errorbox 充許我們改變顏色和alert視窗里的細節. 你可以看到在我的測試頁裡加載了兩個alert視窗. 每個頁面底部的按鈕點擊後可以在頁上下方追加一個新的alert視窗.
CSS 盒子樣式
我不會將太多 CSS 重置的細節，那些在我之前的教程中很明瞭了。我創建了一個預設的排版，並將內置 #content 的div居中。這樣創建了一個允許jQuery在頁面最上面添加新警告元素的盒子區域。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
p {
display: block;
font-size: 1.35em;
line-height: 1.5em;
margin-bottom: 22px;
}
/** page structure **/
#w {
display: block;
width: 750px;
margin: 0 auto;
padding-top: 30px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.flatbtn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #f9f8ed;
text-decoration: none;
background-color: #b6a742;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
font-size: 1.2em;
font-weight: bold;
padding: 12px 22px 12px 22px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
color: #fff;
background-color: #c4b237;
}
.flatbtn:active {
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}
|
讓效果更醒目的網頁佈局非常簡單。任何熟悉前端網頁開發的人都應該能夠將其移植到自己的樣式表中。我在這個扁平按鈕中使用了特殊的樣好似，並生成新的警告視窗。同樣的，我更新了每個 .notify類元素的內部樣式。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/** notifications **/
.notify {
display: block;
background: #fff;
padding: 12px 18px;
max-width: 400px;
margin: 0 auto;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 20px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}
.notify h1 { margin-bottom: 6px; }
.successbox h1 { color: #678361; }
.errorbox h1 { color: #6f423b; }
.successbox h1:before, .successbox h1:after { background: #cad8a9; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }
.notify .alerticon {
display: block;
text-align: center;
margin-bottom: 10px;
}
|
我設置了一些在我的佈局示例中運行良好的預設假設。所有消息通知視窗都被限定為 400px 寬，並通過使用 margin: 0 auto 在頁面中居中。同時，我更新了滑鼠圖標為手指指針，這樣用戶就知道該元素可點擊。我們需要創建一個 jQuery 事件監聽器以用於獲取用戶對取消通知視窗的點擊，並運行相應函數。
jQuery動畫
我的JS代碼實際執行了兩個不同的操作。我們首先檢測包含在#content DIV中的任何現有.notify元素。一旦用戶點擊這個.notify框元素，我們需要淡出這個通知盒到透明度為0%（display: none），然後從DOM中移除()此元素。
| 1 2 3 4 5 6 |
$(function(){
$('#content').on('click', '.notify', function(){
$(this).fadeOut(350, function(){
$(this).remove(); // after fadeout remove from DOM
});
});
|
如果你熟悉jQuery，可能首先對這個選擇器感到有些奇怪。我們並不是選擇#content這個div，而是在尋找這個內容容器裡面的任何.notify通知框。如果你查看一下jQuery的 .on() 方法文檔，你會註意到我們可以傳遞另外一個選擇器來作為第二個參數，它將在頁面被渲染後更新。 這是一個Stack Overflow里出色的帖子，它非常詳細地解釋了這個概念。
我的腳本的另一部分將會檢查用戶何時點擊了頁面下方的兩個按鈕之一。這兩個按鈕的ID是#newSuccessBox 和 #newAlertBox。無論用戶何時點擊，我們會停止載入HREF值的預設行為，代之以創建一個新的HTML塊並前置在頁面上。
| 1 2 3 4 5 6 7 8 9 10 |
// handle the additional windows
$('#newSuccessBox').on('click', function(e){
e.preventDefault();
var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
});
$('#newAlertBox').on('click', function(e){
e.preventDefault();
var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="images/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
});
});
|
每個函數都有它自己的變數，來包含一個我用於警告框的HTML的複製/粘貼鏡像。這個HTML內容存儲在一個字元串中用jQuery選擇器轉化為一個對象。我可以使用prependTo()方法選擇這個內容DIV使新的警告框出現在頁面的最上方。所有新的盒子也可以同樣的方式被解除，因為它們的HTML代碼和用靜態HTML硬編碼的盒子完全相同。
