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

AF3的弹出对话框Popup

---

 

组件名称：Popup

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

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

    方法：

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

 

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

id                            (string) popup 包裹DOM元素的ID 2 title                         (string) popup的标题 3 message                       (string) 显示的消息 4 cancelText                    (string) 取消按钮的文本 5 doneText                      (string) 完成按钮的文本 6 cancelOnly                    (bool/false) 是否只显示取消按钮
cancelClass                   (string) 取消按钮的CSS class 8 doneClass                     (string) 完成按钮的CSS Class 9 autoCloseDone                 (bool/false) 是否自动隐藏，设置为true时，当用户点击done按钮，popup将自动隐藏。
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: <input type='text' class='af-ui-forms'><br>"
+"Password: <input type='text' class='af-ui-forms' style='webkit-text-security:disc'>",
    cancelText: "取消",
    cancelCallback: function () {},
    doneText: "登录",
    doneCallback: function () {
        alert("登录...")
    },
    cancelOnly: false
});

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

<a class="button" data-popup data-message="Hello World" >Hello</a>

 

 

---

第六章 App Framework 3.0中的内置矢量图标  [Learn AF3系列]