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

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。