首页 > 代码库 > 基于Zepto的Alert提示框开源框架Tiny-Alert

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

2024-07-15 08:17:53   218人阅读

项目主页：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=http://www.mamicode.com/"stylesheets/zepto.alert.css">>
如果你觉得样式丑，自己改改吧。注意一下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

初次玩前端，望多指教。


联系
我们