1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/postbird-PostbirdAlertBox.js

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 4.4 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 29.11.2024 21:06 ff9cded

PostbirdAlertBox.js

原生javascript弹框插件

在线体验:

http://postbird.oschina.io/postbirdalertbox.js/

更新

  • 2018-07-08
    • 修复由于 button focus 状态未清除导致的 enter 下重复触发的问题
    • 将 focus 重定向到弹框的 button 中,默认 enter 键操作时 alert/confirm 的确认操作

优点:

  • 无需手动写入html
  • 支持回调
  • 可配置性高,多种显示选择

使用方式:

1. 引入文件:

postbirdAlertBox.js
postbirdAlertBox.css

2. 调用方式:

1) alert

        PostbirdAlertBox.alert({
            'title': '提示',
            'content': '提示内容主体',
            'okBtn': '好的',
            'contentColor': 'red',
            'onConfirm': function () {
                console.log("回调触发后隐藏提示框");
                alert("回调触发后隐藏提示框");
            }
        });

2) confirm

        PostbirdAlertBox.confirm({
            'title': '提示',
            'content': '离开本页面进行跳转',
            'okBtn': '好的',
            'contentColor': 'red',
            'onConfirm': function () {
                console.log("OK - 回调触发后隐藏提示框");
                alert("OK - 回调触发后隐藏提示框");
            },
            'onCancel': function () {
                console.log("Cancel-回调触发后隐藏提示框");
                alert("Cancel-回调触发后隐藏提示框");
            }
        });

3) prompt

        PostbirdAlertBox.prompt({
            'title': '请输入姓名',
            'okBtn': '提交',
            onConfirm: function (data) {
                console.log("输入框内容是:" + data);
                alert("输入框内容是:" + data);
            },
            onCancel: function (data) {
                console.log("输入框内容是:" + data);
                alert("输入框内容是:" + data);
            },
        });

配置选项:

参数属性 意义 适用方法 是否必须
title 弹框标题 alert、confirm(不适用于prompt) 否,默认 : 提示信息
promptTitle prompt标题 prompt 否,默认 :请输入内容
content 提示内容主体 alert、confirm(不适用于prompt) 否,默认 : 提示内容
contentColor 提示内容颜色 alert、confirm 否,默认 : #000000
okBtn 确认按钮文字 alert、confirm (不适用于prompt) 否,默认 : 好的
promptOkBtn prompt确认按钮文字 prompt 否,默认 : 确认
okBtnColor 确认按钮颜色 alert、confirm、prompt 否,默认 : #0e90d2
cancelBtn 取消按钮文字 alert、confirm、prompt 否,默认 : 取消
onConfirm 确认按钮事件 alert、confirm、prompt(存在参数data) 否,默认 : 不触发事件
onCancel 取消按钮事件 alert、confirm、prompt(存在参数data) 否,默认 : 不触发事件
## 效果: ### Alert ### Confirn ### Prompt

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/postbird-PostbirdAlertBox.js.git
git@api.gitlife.ru:oschina-mirror/postbird-PostbirdAlertBox.js.git
oschina-mirror
postbird-PostbirdAlertBox.js
postbird-PostbirdAlertBox.js
master