[Learn AF3]第七章 App framework组件之Popup-白红宇

[Learn AF3]第七章 App framework组件之Popup

阅读量：5892 次

发布时间：2019-06-19

本文共 1750 字，大约阅读时间需要 5 分钟。

AF3的弹出对话框Popup

组件名称：Popup

　 是否js控件：是，$.afui.popup

说明：af3中的popup和af2中相比变化不大，依然是通过插件popup来实现的

方法：

show ()         显示popup对话框hide ()         隐藏popup对话框

构造参数：构造popup的时候，可以简单的传递一个字符串，此时popup显示为一个alert对话框。也可以传递一个object对象，对象可以具有如下的属性设置：

1 id                            (string) popup 包裹DOM元素的ID 2 title                         (string) popup的标题 3 message                       (string) 显示的消息 4 cancelText                    (string) 取消按钮的文本 5 doneText                      (string) 完成按钮的文本 6 cancelOnly                    (bool/false) 是否只显示取消按钮 7 cancelClass                   (string) 取消按钮的CSS class 8 doneClass                     (string) 完成按钮的CSS Class 9 autoCloseDone                 (bool/false) 是否自动隐藏，设置为true时，当用户点击done按钮，popup将自动隐藏。10 suppressTitle                 (bool/false) 是否隐藏对话框的标题行 11 cancelCallback                 function   取消按钮的回调函数 12 doneCallback                   function   完成按钮被点击的回调函数 13 onShow                         function   popup显示的时候的回调函数

事件：

close     popup关闭

使用举例：

1，基本的alert对话框

$.afui.popup("I'm replacing an alert box");

2，使用更多设置的popup

$.afui.popup({    title: "警告",    message: "This is a test of the emergency alert system!! Don't PANIC!",    cancelText: "Cancel me",    cancelCallback: function () {        console.log("cancelled");    },    doneText: "I'm done!",    doneCallback: function () {        console.log("Done for!");    },    cancelOnly: false});

3，高级使用，实现登录对话框（通过给message属性设置html代码）

$.afui.popup({    title: "用户登录",    message: "Username: 
" +"Password: ",    cancelText: "取消",    cancelCallback: function () {},    doneText: "登录",    doneCallback: function () {        alert("登录...")    },    cancelOnly: false});

4，声明式popup（似乎不灵）