基于Zepto的Alert提示框开源框架Tiny-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                        

初次玩前端，望多指教。