Ionic Js十一：模态 - 相关文章

【Ionic Js十一：模态】的更多相关文章

Ionic Js十一：模态

ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title&l…

Ionic Js十：加载动作

$ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .controller('LoadingCtrl', function($scope, $ionicLoading) { $scope.show = function() { $ionicLoading.show({ template: 'Loading...' }); }; $scope.hide = fu…

Ionic Js九：列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list> <ion-item ng-repeat="item in items"> Hello, {{item}}! </ion-item> </ion-list> 高级用法: 缩略图,删除按钮,重新排序,滑动 <ion-list ng-contr…

ionic js ion-tabs选项卡栏操作

ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面). 用法 <ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off=&quo…

ionic js 加载动画 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG

ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 用法 <ion-spinner icon="spiral"></ion-spinner> //默认用法像大部分其他的ionic组件一样,spinner也可以使用ionic的标准颜色命名规则,就像下面这样: <ion-spinner class="spinner-ener…

使用异步js解决模态窗口切换的办法

核心代码 js ="setTimeout(function(){document.getElementsByTagName('Button')[3].click()},100);" 下面是我的实验过的示例代码: 实验地址: http://pyselenium-po-60b44.coding.io/exapage.html #-*- coding: utf-8 -*- __author__ = 'ray' from selenium import webdriver import uni…

Js实例——模态框弹出层

1.描述百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> <head> <title>模态框弹出层.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-…

JS中模态窗口(showModalDialog)的详细使用

基本介绍: showModalDialog() (IE + 支持) showModelessDialog() (IE + 支持) window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框. window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框.使用方法: vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures…

ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换

ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <io…

ionic js 侧栏菜单把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

ionic 侧栏菜单一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法要使用侧栏菜单,添加一个父元素<ion-side-menus>,一个中间内容 <ion-side-menu-content>,和一个或更多 <ion-side-menu> 指令. <ion-side-menus>  <ion-side-menu-content…

原生js创建模态框（摘自：东窗凝残月链接：https://www.cnblogs.com/dcncy/p/9076937.html）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Test</title> <style> #pageMask { visibility: hidden; //使pageMask元素不可见 position: absolute; //定位pageMask元素 left: 0px; //定位pageMask元素 top: 0px; //定位…

js之模态对话框

目标效果:点击页面按钮,显示模态对话框,在模态对话框里点击取消关闭模式对话框. 效果如下实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table> <tr> <td>…

Ionic Js十九：加载动画

ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 实例 HTML 代码 <ion-content scroll="false" class="has-header"> <p> <ion-spinner icon="android"></ion-spinner> <ion-spinner…

Ionic Js十八：滑动框

ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slid…

Ionic Js十六：滚动条

ion-scroll ion-scroll 用于创建一个可滚动的容器. <ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""…

Ionic Js十五：对话框

$ionicPopup ionic 对话框服务允许程序创建.显示弹出窗口. $ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() . 实例 HTML 代码 <body class="padding" ng-controller="PopupCtrl"> <button class="button button-dark" ng-click="showPopup()&quo…

Ionic Js十四：浮动框

$ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框. 实例 HTML 代码 <p> <button ng-click="openPopover($event)">打开浮动框</button> </p> <script id="my-popover.html" type="text/ng-template"> <ion-popover-vi…

Ionic Js十二：导航ion-nav-view

ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史.通过检测浏览历史,实现向左或向右滑动时可以正确转换视图. 采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态).Angular的核心为路由服务,URLs可以用来控制视图. AngularUI路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个以上模板呈现在同一个页面. 此外,每个状态无需绑定到一个URL,并且数据可以更灵活地推送到每个状态. 以下实例中,…

Ionic Js七：手势事件

1.on-hold 长按的时间是500毫秒. HTML 代码 <button on-hold="onHold()" class="button">长按我!</button> JavaScript 代码 angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accesso…

Ionic Js六：切换开关操作

以下实例中,通过切换不同开关 checked 显示不同的值,true 为打开,false 为关闭. HTML 代码 <ion-header-bar class="bar-positive"> <h1 class="title">开关切换</h1> </ion-header-bar> <ion-content> <div class="list"> <div class=…

Ionic Js五：单选框操作

实例中,根据选中的不同选项,显示不同的值. HTML 代码 <ion-header-bar class="bar-positive"> <h1 class="title">当选按钮</h1> </ion-header-bar> <ion-content> <div class="list"> <div class="item item-divider"…

Ionic Js四：复选框

ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用. <ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox> 实例中,会根据复选框是否选中,修改 checked 值,true 为选中, false 为未选中. HTML 代码 <ion-header-bar class="bar-positive&q…

Ionic Js三：下拉刷新

在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-ref…

Ionic Js二：背景层

我们经常需要在 UI 上,例如在弹出框.加载框.其他弹出层中显示或隐藏背景层. 在组件中可以使用\(ionicBackdrop.retain()来显示背景层,使用\)ionicBackdrop.release()隐藏背景层. 每次调用retain后,背景会一直显示,直到调用release消除背景层. HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane&g…

Ionic Js一：上拉菜单(ActionSheet)

上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">Ac…

原生js创建模态框

1.效果图如下: 2.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> #pageMask { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-al…

Ionic Js二十：选项卡栏操作

ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面). 用法 <ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-fi…

Ionic Js十七：侧栏菜单

一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更多指令. <ion-side-menus>  <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> &…

Ionic Js十三：平台

$ionicPlatform $ionicPlatform 用来检测当前的平台,以及诸如在PhoneGap/Cordova中覆盖Android后退按钮. …

Ionic Js八：头部和底部

1.ion-header-bar 这个是固定在屏幕顶部的一个头部标题栏.如果给它加上'bar-subheader' 这个样式,它就是副标题. <ion-header-bar align-title="left" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething(…