基於Zepto的Alert提示框開源架構Tiny-Alert，zeptotiny-alert

基於Zepto的Alert提示框開源架構Tiny-Alert，zeptotiny-alert
項目首頁：http://shootyou.github.io/Tiny-Alert/什麼是Tiny-Alert？

這是一個基於Zepto的提示框外掛程式，在移動端使用會有更好的效果。它被設計成是移動端原生alert和confirm提示框的更美觀替代品。同時它還實現了一個loading效果。它的核心代碼參考了rDailog，在它基礎上適配了zepto，去掉了移動端用不到的特性，另外讓它看上去更美觀了。
它有如下特性：

• 輕量級，代碼量不超過300行，壓縮後僅2k。
• 基於zepto更適合移動端。
• 支援回調。
• 勉強還算美觀。
• 基於Grunt構建。這樣子就感覺自己越來越像個前端攻城師了。

如何使用Tiny-Alert

首先引入相關資源：

<link rel="stylesheet" type="text/css" href="stylesheets/zepto.alert.css"><script type="text/javascript" src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script><script type="text/javascript" src="js/zepto.alert.min.js"></script>

如果你覺得樣式醜，自己改改吧。注意一下images下面的資源。

然後這樣就可以構造一個最簡單的載入中的提示框了。

$('#demo-1').on('click', function() {        $.dialog();});

點擊此處看看效果。預設他是一個遮罩的不會消失的框。如果你點了還是重新整理一下頁面吧，它不會消失的。

再來構造一個提醒彈出框。

$('#demo-2').on('click', function() {    $.dialog({        content : '視窗將在2秒後自動關閉',        title: "alert",        time : 2000    });});

點擊此處看看效果。這個彈出框2秒就關閉了。

再來是一個確認框，支援回調的。

$('#demo-3').on('click', function() {    $.dialog({        content : '對話方塊內容',        title : 'ok',        ok : function() {            alert('我是確定按鈕，回呼函數返回false時不會關閉對話方塊。');            return false;        },        cancel : function() {            alert('我是取消按鈕');        },        lock : false    });});

點擊此處看看效果。

屬性和預設值

        // 內容        content: '載入中...',                // 表徵圖樣式：load/ok/alert        title: 'load',                // 寬度        width: 'auto',                // 高度        height: 'auto',                // 確定按鈕回呼函數        ok: null,                // 取消按鈕回呼函數        cancel: null,                // 確定按鈕文字        okText: '確定',                // 取消按鈕文字        cancelText: '取消',                // 自動關閉時間(毫秒)        time: null,                // 是否鎖屏        lock: true,        // z-index值        zIndex: 9999                        

初次玩前端，望多指教。

zepto animate 回調問題

查了一下，他定義的就是先執行回呼函數然後再執行動畫效果
animate(transforms, duration, easing, callback)animate(transforms, { duration: milliseconds, easing: '...', complete: callback })// use CSS transform/opacity to do an animation,// optionally supply a callback method to be executed after the animation is complete