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

转载于:https://www.cnblogs.com/dajianshi/p/4328866.html

[Learn AF3]第七章 App framework组件之Popup相关推荐

第三部分：Android 应用程序接口指南---第一节：应用程序组件---第七章 App Widgets...
第7章 App Widgets App Widgets是一个应用程序的微型视图,可以嵌入到其他应用程序(如主屏幕)并且能够定期更新.你可以发布一个应用程序的App Widget,而这些视图称为窗口的用 ...
Kotlin第七章: Android四大组件
1. 四大组件四大组件是每一个Android人必须要会,要掌握的知识点,因为他们是我们在日常开发工作中打交道最频繁的组件,而且他们四个在不同的领域扮演着极其重要的角色. Activity: 负责用户 ...
ZK----第七章 ZUML页面组件集之listbox、grid列表
列表:147 Listbox:列表,listItem:列表的行,listcell:列表的列,listhead:列表的标题行,listheader:列表标题行的列属性: <listbox mu ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
第七章中途岛之战--Borland和组件技术
第七章中途岛之战--Borland和组件技术 "没有中间件技术,我们就没有未来!" Golden Gate Strategy 1996年,Borland察觉到软件技术将会开始朝中 ...
第七章：使用Netlify零成本部署组件文档
第七章:使用Netlify无成本发布组件文档为什么使用Netlify? 一开始一共有三个方案: 1.Github Page 2.Netlify 3.Vercel Github Page只支持一个re ...
第七章前端开发——前端工程化（NPM、脚手架、前端环境搭建）
第七章前端工程化(NPM.脚手架.前端环境搭建) 一.支持环境二.NPM包管理工具三.Vue生成器四.前端的集成环境五.项目目录结构六.前端Vue框架与后端Django框架的简单交互一. ...
第七章移动自动化持续化集成（下）
--------手机自动化之Appium (4)增加构建步骤,这是如何执行我们项目工程的命令,如:python src/TestSuites/OnlineTestSuite.py.构建的时候就会执行这 ...
第七章：react-ui
第七章:react-ui 7.1. 最流行的开源 React UI 组件库 7.1.1. material-ui( 国外) 官网: http://www.material-ui.com/#/ gith ...

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

[Learn AF3]第七章 App framework组件之Popup相关推荐

最新文章

热门文章