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系列]