ionic

ionic 安装

ionic 安装

ionic 安装 本站实例采用了ionic v1.3.2 版本,使用的 CDN 库地址: ionic 最新版本下载地址: 点击 “尝试一下” 按钮查看在线实例。 本教程着重讲解 ionic 框架的应用,大部分实例在浏览器中运行 ,移动设备上运行可以在接下来的命令行安装教程中详细了解。 注意:在移动应用如 phonegap 中我们只需将对应的 js 和 css 文件加入到资源... »

ionic 背景层

ionic 背景层

ionic 背景层我们经常需要在 UI 上,例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。每次调用retain后,背景会一直显示,直到调用release消除背景层。 »

ionic 滑动框

ionic 滑动框

ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 BLUE YELLOW PINK API 属性 类型 详情 delegate-handle (可选) 字符串 该句柄用$ionicSlideBoxDelegate来标识这个滑动框。 does-continue (可选) 布尔值 滑动框是否开启循环滚动。 auto-play (可... »

ionic 创建 APP

ionic 创建 APP

ionic 创建 APP 前面的章节中我们已经学会了 ionic 框架如何导入到项目中。 接下来我们将为大家介绍如何创建一个 ionic APP 应用。 ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如下: Todo 以上代码中,我们引入了 Ionic CSS 文件、 Ioni... »

ionic 下拉刷新

ionic 下拉刷新 在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: 实例 HTML 代码 JavaScript 代码 angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by def... »

ionic 加载动画

ionic 加载动画ion-spinnerionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。该图标采用的是SVG。用法 //默认用法像大部分其他的ionic组件一样,spinner也可以使用ionic的标准颜色命名规则,就像下面这样:实例HTML 代码 ... »

ionic 头部与底部

ionic 头部与底部Header(头部)Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。bar-light bar-lightbar-stable bar-stablebar-positive bar-positivebar-calm bar-calmbar-balanced bar-... »

ionic 复选框

ionic 复选框 ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用。 复选框标签 实例 实例中,会根据复选框是否选中,修改 checked 值,true 为选中, false 为未选中。 HTML 代码 复选框 {{ item.text }} Notifications Push Notificati... »

ionic 选项卡栏操作

ionic 选项卡栏操作ion-tabsion-tabs 是有一组页面选项卡组成的选项卡栏。ion-tab隶属于ionTabs包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。on-deselect (可选) 表达式 选项卡取消选中时触发。$ionicTabsDelegate授权控制ionTabs指令。 »

ionic 按钮

ionic 按钮按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式。默认情况下,按钮显示样式为:display: inline-block。Block Button使用 button-full 类,可以让按钮显示完全宽度,且不包含内边距padding。Full Width Block Button不同大小的按钮button-large 设置为大按钮,button-small ... »

ionic 单选框操作

ionic 单选框操作 实例中,根据选中的不同选项,显示不同的值。 HTML 代码 当选按钮 选取的值为: {{ data.clientSide }} {{ item.text }} Serverside, Selected Value: {{ data.serverSide }} {{ item.text }} JavaScript 代码 angular.module('ionicApp', [... »

ionic 列表

ionic 列表列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。容器元素需要list类,每个列表项需要使用item类。使用 item-icon-left 图标在左侧, item-icon-right 设置图标在右侧。Check mail Call Ma Record album Grammy ... »

ionic 切换开关操作

ionic 切换开关操作 以下实例中,通过切换不同开关 checked 显示不同的值,true 为打开,false 为关闭。 HTML 代码 开关切换 Settings {{ item.text }}      Notifications Push Notifications      Newsletter      由于pre标签冲突,实例中的 pre 已替换为 div标签,具体可以在̶... »

ionic 卡片

ionic 卡片近年来卡片的应用越来越流行,卡片提供了一个更好组织信息展示的工具。卡片的头部与底部我们可以通过添加 item-divider 类为卡片添加头部与底部: 卡片头部!卡片列表使用 list card 类来设置卡片列表: Enter home address Enter phone number Enter wire... »

ionic 手势事件

ionic 手势事件事件 描述 用法 实例on-hold 长按的时间是500毫秒。Test on-release 当用户结束触摸事件时触发。Test on-swipe 指手指滑动效果,可以是任何方向上的。而且也和 on-drag 类似,都有四个方向上单独的事件。Test $ionicGesture一个angular服务展示ionicionic.EventController手势。callb... »

ionic 表单和输入框

ionic 表单和输入框list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。输入框属性:placeholder以下实例中,默认为100%宽度,并使用 placeholder 属性设置输入字段预期值的提示信息。Submit 带图标的输入框item-input 输入框可以很简单的添加图标。头部输入框输入框可放置在头部,并可添加提交或取消按... »

ionic 头部和底部

ionic 头部和底部ion-header-bar这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式,它就是副标题。no-tap-scroll boolean 默认情况下,头部标题栏在点击屏幕时内容会滚动到头部,可以将 no-tap-scroll ... »

ionic Toggle(切换开关)

ionic Toggle切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用。切换开关可以使用 toggle-assertive 来指定颜色。该实例有是多个切换开关列表。注意,每个选项的 item 类后需要添加 item-toggle 类。HTML5 ...运行效果如下: »

ionic 列表操作

ionic 列表操作列表是一个应用广泛在几乎所有移动app中的界面元素。can-swipe (可选) 布尔值 列表项是否被允许滑动显示选项按钮。 »

ionic 单选框

ionic 单选框 ionic 单选按钮与标准 type=”radio” 的 input元素类似。以下展示了现代app类型的单选按钮。 每个 item-radio 中的 type=”radio” 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。 ionic 在单选项中使用了 元素,使其更易点击。 实例 Go P... »

ionic 加载动作

ionic 加载动作 $ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。 用法 angular.module('LoadingApp', ['ionic']) .controller('LoadingCtrl', function($scope, $ionicLoading) { $scope.show = function() { $ionic... »

ionic Range

ionic Range ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。 实例 Ranges In A List 运行效果如下: »

ionic 模态窗口

ionic 模态窗口 $ionicModal $ionicModal 可以遮住用户主界面的内容框。 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 My Modal title Hello! 然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板,进行初始化操作。就像下面的代码: ang... »

ionic select

ionic selectionic select 的 select 相比原生的要更加美观些。每个平台上的可选项样式都是不一样的,在PC电脑的浏览器上,你会看到传统的下拉界面,Android 上会弹出单选按钮选项,iOS 有个滚轮操作界面。实例 Lightsaber Blue Green Red F... »

ionic 导航

ionic 导航 ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史。通过检测浏览历史,实现向左或向右滑动时可以正确转换视图。 采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务,URLs可以用来控制视图。 AngularUI路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个... »

Page 1 of 212