Humane JS  提示訊息可顯示右上方或正上方或者是中間

Humane JS 沒有使用任何 JavaScript 框架開發的提示訊息，簡單、現在化、獨立的程式碼、不占用太大位置的一個提示通知工具，利用 CSS 轉換來製作動畫效果，可支援現在大部分的瀏覽器也包含了現在的移動設備支援。Humane JS 還提供了五種的提示訊息的設計樣式，可在程式進行時隨時的改變提示的外觀設計。


使用方法：
第一步 載入 Humane JS 需要用到的 JavaScript 檔
<!-- Humane JS 的主程式碼-->
<script src='humane.js'></script>


第二步 寫 HTML 的基礎提示訊息連結
<pre>humane.log("Welcome Back")</pre>
<pre>humane.log("Record <b>392</b> has been updated")</pre>
<pre>humane.log(["List","of","Items"])</pre>
<pre>humane.log("Callback when finished", function(){ document.body.style.backgroundColor="#a66000" })</pre>
<pre>humane.log("Options can be passed", { timeout: 4000, clickToClose: true, addnCls: 'humane-error' })</pre>

第三步 稍微設計 pre 的 CSS 樣式內容
   pre {
font-family: "Ubuntu Mono";
font-size: 0.9em;
width: 75%;
background-color: #007143;
border-radius: 6px;
padding: 5px 10px;
color: #fff;
cursor: pointer;
text-shadow: -1px 1px 1px #333;
box-shadow: 0px 8px 8px -8px #333;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
   }
   pre:hover {
background-color: #00ae68;
   }

第四步 寫入 JavaScript 的程式碼片段
humane.baseCls = 'humane-libnotify'
var pretags = document.getElementsByTagName('pre')
for (var i = 0; i < pretags.length; i++) { (function(el){
  el.onclick = function () {
eval(el.innerHTML)
  }
}(pretags[i])) }

附上 Humane JS 可修改的參數表

參數	預設	說明
humane.timeout	2500	提示訊息消失的時間.單位為毫秒
humane.waitForMove	false	是否等到使用者有動作才消失
humane.clickToClose	false	是否等到使用者點擊提示訊息才消失
humane.addnCls	''	增加自訂的 CSS 樣式
humane.baseCls	'humane'	基礎的提示訊息樣式

作者網站：http://wavded.github.com/humane-js/
檔案大小：20.7 KB (包含範例)
檔案下載：https://github.com/wavded/humane-js
檔案備份：下載