ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法
Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup;
$ionicModal是完整的页面;
$ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一些参数,通常用于通知消息、确认等作用;
本文主要介绍IonicModal的使用方法
中文文档:http://ionicframework.net/docs/api/service/$ionicModal/
英文文档:http://ionicframework.com/docs/api/service/$ionicModal/
$ionicModal(中文翻译为‘模型’,感觉还是直接称为用Modal好一点。)
模型是一个内容面板,可以临时越过用户的主视图。通常用于选择或编辑一个项。注意,你需要把模型的内容放入一个带有modal
类的div内。
举个例子,啥是Modal?:
登录或者注册页面的用户协议(图1),点击“用户协议”之后,会弹出用户协议具体内容(图2),这个地方就可以使用Modal来实现。图3中展示了Application运行起来之后,登录页面的源代码(这些都是ionic自己生成的),忽略其他信息,只看我标出来的红色1和红色2,当前红色2的元素是hide,当我们点击“用户协议”之后,红色2就会从“hide”变成“actived”,这时候我们就看到了图2的内容了。
图1 登录界面用户协议
图2 用户协议具体内容(Modal)
图3 查看网页源代码
如何实现Modal?
首先要有自己Modal的html代码,注意,你需要把模型的内容放入一个带有modal
类的div内。:
<script id="my-modal.html" type="text/ng-template"><div class="modal"><ion-header-bar><h1 class="title">我的模型标题</h1></ion-header-bar><ion-content>Hello!</ion-content></div> </script>
然后写自己的js代码(其实就是AngularJS代码)
这部分需要注意以下几点:
(1)不要忘了function的参数$ionicModal,否则会报错(用浏览器的调试工具F12可以看到)
(2)使用fromTemplateUrl将HTML代码中script(根据id)在HTML页面生成自己的Modal(也就是说,在打开页面的时候,是没有图3中的红色2 div的,当调用了fromTemplateUrl之后,才会生成这个div,而且每调用一次就会生成一个红色2 div哦,所以写代码的时候要把逻辑设计好,注意及时remove()。);
(3)openModal和closeModal函数很容易理解,这个估计是Modal最常用的方法;
(4)可以通过$scope.$on来进行更丰富的操作(当然,不用$scope.$on也可以进行丰富的操作。);
1 angular.module('testApp', ['ionic']) 2 .controller('MyController', function($scope, $ionicModal) { 3 $ionicModal.fromTemplateUrl('modal.html', { 4 scope: $scope, 5 animation: 'slide-in-up' 6 }).then(function(modal) { 7 $scope.modal = modal; 8 }); 9 $scope.openModal = function() { 10 $scope.modal.show(); 11 }; 12 $scope.closeModal = function() { 13 $scope.modal.hide(); 14 }; 15 //当我们用完模型时,清除它! 16 $scope.$on('$destroy', function() { 17 $scope.modal.remove(); 18 }); 19 // 当隐藏模型时执行动作 20 $scope.$on('modal.hide', function() { 21 // 执行动作 22 }); 23 // 当移动模型时执行动作 24 $scope.$on('modal.removed', function() { 25 // 执行动作 26 }); 27 });
详细说说创建的方法
可以使用字符串或者一个URL:
fromTemplate(templateString, options)
templateString
是字符串类型,存储的是模型的内容;
options是一个对象,存储的是ionicModal#initialize方法的选项;
返回一个Modal控制器实例;
一个options对象具有一下属性:
{object=}
范围
子类的范围。默认:创建一个$rootScope子类。{string=}
动画
带有显示或隐藏的动画。默认:'slide-in-up'{boolean=}
第一个输入框获取焦点
当显示时,模型的第一个输入元素是否自动获取焦点。默认:false。{boolean=}
backdropClickToClose` 点击背景时是否关闭模型。默认:true。
fromTemplateUrl(templateUrl, options)
templateUrl 是字符串类型,指向待加载模版的URL;
options与上边的一样;
返回一个promise对象,指向一个Modal控制器实例;
更直观一点的使用url创建:
1 $ionicModal.fromTemplateUrl('templates/hello.html', {// modal窗口选项 2 scope: $scope, 3 animation: 'silde-in-up' 4 }).then(function (modal) { 5 $scope.modal = modal; 6 })
templates目录下hello.html内容如下:
1 <ion-modal-view> 2 <ion-header-bar class="bar-energized"> 3 <h1 class="title">标题</h1> 4 </ion-header-bar> 5 <ion-content> 6 Hello~~~~ 7 </ion-content> 8 </ion-modal-view>
参考链接(这篇文章写的内容比较多,初学者不容易看懂):http://hybridap.blogspot.sg/2015/04/hybrid-apps52ionicmodal.html
转载于:https://www.cnblogs.com/CheeseZH/p/4522264.html
ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法相关推荐
- 如何在Mac上的 Safari 浏览器中阻止弹出式窗口?
当我们使用Mac电脑上的safari浏览器访问网站时,发现有些网站会有很多弹出式窗口或不必要的内容会出现在浏览器中.为了节省流量和时间,可以在Safari浏览器设置阻止弹出式的窗口.那我们该如何设置呢 ...
- 自动弹窗被拦截 html,弹出式窗口被阻止怎么办,如何阻止弹出式窗口
很多人看到"弹出式窗口"这个名词时想必会有所疑惑,弹出与固定式窗口究竟有何不同呢?其实我们在浏览网页的时候就会发现许多弹出式窗口,这种窗口主要应用于广告类,许多商家会为各种大小网页 ...
- pyqt5子窗口跳出主窗口_弹出式窗口与 可用性,转换和跳出率
pyqt5子窗口跳出主窗口 Written by Cassandra Naji 由卡珊德拉·纳吉 ( Cassandra Naji)撰写 They go by many names - modal w ...
- javafx弹出式窗口_JavaFX 8的弹出式编辑器
javafx弹出式窗口 在过去的几个月中,我很高兴与JavaFX 8一起使用,以便为计划和调度应用程序实现复杂的用户界面. 所需的功能之一是执行"就地"编辑的方法,即快速编辑用户选 ...
- DataGrid分页;指定列的总和和平均值;显示鼠标背景色;弹出式窗口;
1 在页脚中添加指定列的总和和平均值 private void dgitem_ItemDataBound() { if(e.Item.ItemIndex >=0) { ...
- 弹出式窗口及网页对话框
弹出式窗口及网页对话框 全攻略 一.如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 <html& ...
- 【JSConf EU 2018】有关浏览器弹出式窗口的相关探讨
在前端大爆发的今天,随着层出不穷的新技术和新框架的不断推出和W3C标准的不断更新,前端开发已经不局限于展示服务端返回的信息,而更多的去关注功能,这也带给了我们更多思考. 本次JSCONF2018大会上 ...
- 获取弹出式窗口(对话框)句柄
原文: 获取弹出式窗口(对话框)句柄 http://www.vbgood.com/thread-103057-1-1.html 昨天遇到了这个问题:碰巧今天在MSDN上看到了这方面的内容,记录下. 假 ...
- 如何解除Macos的Safari浏览器提示弹出式窗口被阻止
故障提示 解决流程: Safari 浏览器-偏好设置-网站-弹出式窗口-改成允许 -完
最新文章
- 理解I/O Completion Port(完成端口)
- 易经——第二卦 坤 坤为地 坤上坤下
- wordpress语言文件.po.pot.mo简介及汉化
- c语言变量作为数组长度,为什么在C中不允许将数组的大小作为常量变量但在C中允许?...
- CSS基础(part6)--CSS的颜色表示
- 论文浅尝 | 一种可解释的语义匹配复值网络
- Spring Cloud微服务之业务物理删除(十)
- 实战详解WSUS2.0+SP1部署:WSUS2.0系列之一
- 【Python】单引号、双引号、三引号和字符串
- UIActionSheet的最后一项点击失效
- MVC+EF+Linq 实例
- HDU 1262 寻找素数对 模拟题
- python制作 whl 源文件,并制作本地pip源
- 基于物理的渲染详尽指南 卷1光与介质:基于物理的渲染和着色理论
- easyrecovery软件如何恢复丢失数据-注册码-序列号-密钥最新绿色下载版
- Google好用插件推荐(一)
- 如何改写(paraphrase)英文句子?
- 量化分析(一)数据采集、预处理SVM建模
- 加息靴子落地铁矿石继续反弹,甲醇认购大涨,苹果10-01大跳水2022.5.5
- 【LeetCode每日一题】——1042.不邻接植花
热门文章
- 猜拳游戏html,JavaScript中实现猜拳小游戏
- php 验证ajax提交表单提交表单提交,使用AJAX表单提交将表单数据传递给PHP而不刷新页面...
- 绘图python_Python绘图
- jmeter进程和线程的区别_一文搞懂进程和线程的区别
- 基于Java+jsp+servlet的养老院管理系统设计和实现
- java this关键字的使用
- 按照顺序执行_问一个多线程的问题:如何才能保证线程有序执行?
- matlab数字通信,基于matlab时分复用数字通信系统的设计与实现.pdf
- Git clone的使用方法
- Java用户修改密码