基于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
                        

初次玩前端，望多指教。

基于Zepto的Alert提示框开源框架Tiny-Alert