ionic 动态组件(二)
2015-11-02 10:26
274 查看
3.弹出框 : $ionicPopup弹出框通常用于提醒、警告等,在用户响应之前其他交互行为不能继续。与模态 对话框覆盖整个屏幕空间不同,弹出框通常仅占据一部分屏幕空间。在ionic中,使用$ionicPopup服务管理弹出框:$ionicPopup.show(options)
[b].then(function(){
//[/b]这个函数在弹出框关闭时被调用});
[b]show()[/b]方法返回的是一个promise对象,当弹出框关闭后,该对象被解析,这意味着then()方法指定的参数函数此时将被调用。show()方法的参数options是一个JSON对象,可以包括以下字段:title -弹出框标题文本subTitle -弹出框副标题文本template -弹出框内容的字符串模板templateUrl -弹出框内容的内联模板URL
[b]scope - [/b]要关联的作用域对象buttons -自定义按钮数组。按钮总是被置于弹出框底部cssClass -附加的CSS样式类简化的特定弹出框除了show()方法,$ionicPopup还针对一些特定场景提供了简化的方法,这些方法不需要自定义按钮,只需要设置title和template即可:1.alert(options) -警告弹出框,仅包含一个按钮供关闭弹出框option属性:{
[b]title: '', // String. [/b]弹窗的标题。subTitle: '', // String (可选)。弹窗的子标题。template: '', // String (可选)。放在弹窗body内的html模板。templateUrl: '', // String (可选)。 放在弹窗body内的html模板的URL。okText: '', // String (默认: 'OK')。OK按钮的文字。okType: '', // String (默认: 'button-positive')。OK按钮的类型。}2.confirm(options)-确认弹出框,包含一个取消按钮和一个确认按钮option属性:{
[b]title: '', // String. [/b]弹窗标题。subTitle: '', // String (可选)。弹窗的副标题。template: '', // String (可选)。放在弹窗body内的html模板。templateUrl: '', // String (可选)。放在弹窗body内的一个html模板的URL。cancelText: '', // String (默认: 'Cancel')。一个取消按钮的文字。cancelType: '', // String (默认: 'button-default')。取消按钮的类型。okText: '', // String (默认: 'OK')。OK按钮的文字。okType: '', // String (默认: 'button-positive')。OK按钮的类型。}3.prompt(options)-输入提示弹出框,包含一个文本输入框、一个取消按钮和一个确认按钮option属性:{
[b]title: '', // String. [/b]弹窗的标题。subTitle: '', // String (可选)。弹窗的副标题。template: '', // String (可选)。放在弹窗body内的html模板。templateUrl: '', // String (可选)。放在弹窗body内的html模板的URL。inputType: // String (默认: 'text')。input的类型。inputPlaceholder: // String (默认: '')。input的placeholder。cancelText: // String (默认: 'Cancel')。取消按钮的文字。cancelType: // String (默认: 'button-default')。取消按钮的类型。okText: // String (默认: 'OK')。OK按钮的文字。okType: // String (默认: 'button-positive')。4.浮动框 :$ionicPopover如果需要从脚本中控制列表元素,可以使用$ionicListDelegate 服务:浮动框通常用以非侵入的方式提供当前视图的额外信息。在 ionic 中使用浮动框的几个步骤:1.声明模板需要首先利用 ion-popover-view 指令声明一个模板内容:<ion-popover-view>
[b]<!--[/b]模板内容-->
[b]</ion-popover-view>[/b]2.创建浮动框对象使用$ion-popover 服务的以下方法创建浮动框对象:fromTemplate(templateString,options)- 使用模板字符串构造浮动框fromTemplateurl(templateUrl,options)- 使用内联模板构造浮动框注意:这两个方法返回的都是 promise 对象,在浮动框对象被构造成功后得到解析,这时可以获取浮动框对象:$ionicPopover.fromTemplate(...)
[b].then(function(popover){
//popover [/b]参数是浮动框对象});3.操作浮动框对象浮动框对象提供以下方法:show() - 显示浮动框hide() - 关闭浮动框remove() - 移除浮动框isShown() - 浮动框是否处于显示状态?5.载入指示器 :$ionicLoading当进行耗时的操作时,可以使用载入指示器提示用户操作进行中,并暂时阻止交互。 载入指示器通常会叠加一个半透明的幕布层以便阻止用户的交互。在 ionic 中,使用$ionicLoading 服务操作载入指示器:show(options) - 显示载入指示器hide() - 隐藏载入指示器显示参数show()方法的 options 参数是一个 JSON 对象,可以包含如下字段:template - 模板字符串templateUrl - 内联模板的 Url
[b]scope - [/b]要绑定的作用域对象noBackdrop - 是否隐藏背景幕hideOnStateChange - 当切换到新的视图时,是否隐藏载入指示器delay - 显示载入指示器之前要延迟的时间,以毫秒为单位,默认为 0,即不延迟duration - 载入指示器持续时间,以毫秒为单位。时间到后载入指示器自动隐藏。默认情况下, 载入指示器保持显示状态,知道显示的调用 hide()方法参数配置服务 : $ionicLoadingConfig如果要在多处都使用载入指示器,统一对 options 参数进行配置是一个更好的方法,这样在应用时直接调用 show()方法而不必传递参数了。这通过定义一个 constant provider 来实现:angular.module("ezApp",["ionic"])
[b].constant("$ionicLoadingConfig",{
template : "default loading template ..."
})[/b]$ionicLoading 服务会通过注入器查找这个常量,如果存在就使用其值作为参数进行显示。6.背景幕 :$ionicBackdrop在浮动框、载入指示器中我们已经接触过背景幕。它是一个覆盖全屏的半透明图层,用来 阻止用户的交互行为。我们可以使用$ionicBackdrop 服务单独地使用背景幕:retain() - 保持背景幕release() - 释放背景幕为什么不是 show()和 hide()呢?在 UI 中可能有多个指令/元素都使用背景幕,为每个指令都创建单独的背景幕是不明智的。事实上, $ionicBackdrop 服务在 DOM 中只保留有一个背景幕。每次当使用 retain()方法时, 只是给背景幕加一次锁, release()方法只是给背景幕解一次锁。如果 retain()被调用三次, 背景幕将一直显示,直到 release()也被调动三次后才隐藏。
交流QQ群:187269144 QQ群2:438443293QQ群3:248403526
[b].then(function(){
//[/b]这个函数在弹出框关闭时被调用});
[b]show()[/b]方法返回的是一个promise对象,当弹出框关闭后,该对象被解析,这意味着then()方法指定的参数函数此时将被调用。show()方法的参数options是一个JSON对象,可以包括以下字段:title -弹出框标题文本subTitle -弹出框副标题文本template -弹出框内容的字符串模板templateUrl -弹出框内容的内联模板URL
[b]scope - [/b]要关联的作用域对象buttons -自定义按钮数组。按钮总是被置于弹出框底部cssClass -附加的CSS样式类简化的特定弹出框除了show()方法,$ionicPopup还针对一些特定场景提供了简化的方法,这些方法不需要自定义按钮,只需要设置title和template即可:1.alert(options) -警告弹出框,仅包含一个按钮供关闭弹出框option属性:{
[b]title: '', // String. [/b]弹窗的标题。subTitle: '', // String (可选)。弹窗的子标题。template: '', // String (可选)。放在弹窗body内的html模板。templateUrl: '', // String (可选)。 放在弹窗body内的html模板的URL。okText: '', // String (默认: 'OK')。OK按钮的文字。okType: '', // String (默认: 'button-positive')。OK按钮的类型。}2.confirm(options)-确认弹出框,包含一个取消按钮和一个确认按钮option属性:{
[b]title: '', // String. [/b]弹窗标题。subTitle: '', // String (可选)。弹窗的副标题。template: '', // String (可选)。放在弹窗body内的html模板。templateUrl: '', // String (可选)。放在弹窗body内的一个html模板的URL。cancelText: '', // String (默认: 'Cancel')。一个取消按钮的文字。cancelType: '', // String (默认: 'button-default')。取消按钮的类型。okText: '', // String (默认: 'OK')。OK按钮的文字。okType: '', // String (默认: 'button-positive')。OK按钮的类型。}3.prompt(options)-输入提示弹出框,包含一个文本输入框、一个取消按钮和一个确认按钮option属性:{
[b]title: '', // String. [/b]弹窗的标题。subTitle: '', // String (可选)。弹窗的副标题。template: '', // String (可选)。放在弹窗body内的html模板。templateUrl: '', // String (可选)。放在弹窗body内的html模板的URL。inputType: // String (默认: 'text')。input的类型。inputPlaceholder: // String (默认: '')。input的placeholder。cancelText: // String (默认: 'Cancel')。取消按钮的文字。cancelType: // String (默认: 'button-default')。取消按钮的类型。okText: // String (默认: 'OK')。OK按钮的文字。okType: // String (默认: 'button-positive')。4.浮动框 :$ionicPopover如果需要从脚本中控制列表元素,可以使用$ionicListDelegate 服务:浮动框通常用以非侵入的方式提供当前视图的额外信息。在 ionic 中使用浮动框的几个步骤:1.声明模板需要首先利用 ion-popover-view 指令声明一个模板内容:<ion-popover-view>
[b]<!--[/b]模板内容-->
[b]</ion-popover-view>[/b]2.创建浮动框对象使用$ion-popover 服务的以下方法创建浮动框对象:fromTemplate(templateString,options)- 使用模板字符串构造浮动框fromTemplateurl(templateUrl,options)- 使用内联模板构造浮动框注意:这两个方法返回的都是 promise 对象,在浮动框对象被构造成功后得到解析,这时可以获取浮动框对象:$ionicPopover.fromTemplate(...)
[b].then(function(popover){
//popover [/b]参数是浮动框对象});3.操作浮动框对象浮动框对象提供以下方法:show() - 显示浮动框hide() - 关闭浮动框remove() - 移除浮动框isShown() - 浮动框是否处于显示状态?5.载入指示器 :$ionicLoading当进行耗时的操作时,可以使用载入指示器提示用户操作进行中,并暂时阻止交互。 载入指示器通常会叠加一个半透明的幕布层以便阻止用户的交互。在 ionic 中,使用$ionicLoading 服务操作载入指示器:show(options) - 显示载入指示器hide() - 隐藏载入指示器显示参数show()方法的 options 参数是一个 JSON 对象,可以包含如下字段:template - 模板字符串templateUrl - 内联模板的 Url
[b]scope - [/b]要绑定的作用域对象noBackdrop - 是否隐藏背景幕hideOnStateChange - 当切换到新的视图时,是否隐藏载入指示器delay - 显示载入指示器之前要延迟的时间,以毫秒为单位,默认为 0,即不延迟duration - 载入指示器持续时间,以毫秒为单位。时间到后载入指示器自动隐藏。默认情况下, 载入指示器保持显示状态,知道显示的调用 hide()方法参数配置服务 : $ionicLoadingConfig如果要在多处都使用载入指示器,统一对 options 参数进行配置是一个更好的方法,这样在应用时直接调用 show()方法而不必传递参数了。这通过定义一个 constant provider 来实现:angular.module("ezApp",["ionic"])
[b].constant("$ionicLoadingConfig",{
template : "default loading template ..."
})[/b]$ionicLoading 服务会通过注入器查找这个常量,如果存在就使用其值作为参数进行显示。6.背景幕 :$ionicBackdrop在浮动框、载入指示器中我们已经接触过背景幕。它是一个覆盖全屏的半透明图层,用来 阻止用户的交互行为。我们可以使用$ionicBackdrop 服务单独地使用背景幕:retain() - 保持背景幕release() - 释放背景幕为什么不是 show()和 hide()呢?在 UI 中可能有多个指令/元素都使用背景幕,为每个指令都创建单独的背景幕是不明智的。事实上, $ionicBackdrop 服务在 DOM 中只保留有一个背景幕。每次当使用 retain()方法时, 只是给背景幕加一次锁, release()方法只是给背景幕解一次锁。如果 retain()被调用三次, 背景幕将一直显示,直到 release()也被调动三次后才隐藏。
交流QQ群:187269144 QQ群2:438443293QQ群3:248403526
相关文章推荐
- Ionic框架入门(原文翻译)
- Ionic学习笔记
- 是时候开始学习 Ionic了
- ionic---手机移动Webapp框架,环境配置
- ionic项目中问题杂记
- 安装Cordova+Ionic
- 如何配置ionic
- cordova+Android Studio 1.0+ionic+win7
- ionic 更新插件
- $ionicActionSheet在Android设备上显示错乱
- ionic使用记录----tabs
- ionic使用记录------输入组件容器.item-input
- ionic使用记录----popup
- ionic中点击图片看大图的实现
- ionic 项目中添加modal的步骤流程
- ionic中的$ionicPopup连续两个调用alert时需要注意的事项
- Some Android logs
- ionic 滚动bug 解决方案
- ionic框架配置
- Ionic Javascript APi |$ionicConfigProvider