AF3的弹出对话框Popup


组件名称:Popup

  是否js控件:是,$.afui.popup

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

    方法:

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

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

 id                            (string) popup 包裹DOM元素的ID title                         (string) popup的标题 message                       (string) 显示的消息 cancelText                    (string) 取消按钮的文本 doneText                      (string) 完成按钮的文本 cancelOnly                    (bool/false) 是否只显示取消按钮
cancelClass (string) 取消按钮的CSS class doneClass (string) 完成按钮的CSS Class 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系列]

05-11 13:22