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

标签：style   http   color   java   使用   os   io   cti   

项目主页：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>

然后这样就可以构造一个最简单的加载中的提示框了。

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

再来构造一个提醒弹出框。

$(‘#demo-2‘).on(‘click‘, function() {
    $.dialog({
        content : ‘窗口将在2秒后自动关闭‘,
        title: "alert",
        time : 2000
    });
});

再来是一个确认框，支持回调的。

$(‘#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,布布扣,bubuko.com

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

标签：style   http   color   java   使用   os   io   cti   

原文地址：http://blog.csdn.net/shootyou/article/details/38339907