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

本文主要是介绍基于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/alerttitle: 'load',// 宽度width: 'auto',// 高度height: 'auto',// 确定按钮回调函数ok: null,// 取消按钮回调函数cancel: null,// 确定按钮文字okText: '确定',// 取消按钮文字cancelText: '取消',// 自动关闭时间(毫秒)time: null,// 是否锁屏lock: true,// z-index值zIndex: 9999

初次玩前端，望多指教。

这篇关于基于Zepto的Alert提示框开源框架Tiny-Alert的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---