随笔分类 - App应用快速开发
Ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
摘要：$ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框。 实例 HTML 代码 JavaScript 代码 
阅读全文
摘要：$ionicPlatform$ionicPlatform 用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。
阅读全文
摘要： ion-nav-view 当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。 采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。 Angula
阅读全文
摘要：ionicModal 可以遮住用户主界面的内容框。 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板，进行初始化操作。就像下面的代码：
阅读全文
摘要：$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。 用法 方法 显示一个加载效果。  隐藏一个加载效果。  实例 HTML 代码 JavaScript 代码   
阅读全文
摘要：列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。 高级用法: 缩略图，删除按钮，重新排序，滑动  实例 HTML 代码： CSS 代码 JavaScript 代码  
阅读全文
摘要：1.ion-header-bar 这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。   2.ion-footer-bar 知道了 ion-header-bar ，理解ion-footer-bar就轻松多啦！只是 ion-footer-ba
阅读全文
摘要：1.on-hold 长按的时间是500毫秒。 HTML 代码 JavaScript 代码 2.on-tap 这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。 HTML 代码 JavaScript 代码 3.on-double-tap 手双击屏幕事件 HTML 代码 代码 JavaSc
阅读全文
摘要：以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。 HTML 代码 由于pre标签冲突，实例中的 pre 已替换为 div标签，具体可以在"尝试一下"中查看。 JavaScript 代码 css 代码  
阅读全文
摘要：实例中，根据选中的不同选项，显示不同的值。 HTML 代码 JavaScript 代码 css 代码  
阅读全文
摘要：ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 实例中，会根据复选框是否选中，修改 checked 值，true 为选中， false 为未选中。 HTML 代码 JavaScript 代码 css
阅读全文
摘要：在加载新数据的时候，我们需要实现下拉刷新效果，代码如下： HTML 代码 JavaScript 代码 item.json 文件数据： 
阅读全文
摘要：我们经常需要在 UI 上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。 在组件中可以使用\(ionicBackdrop.retain()来显示背景层，使用\)ionicBackdrop.release()隐藏背景层。 每次调用retain后，背景会一直显示，直到调用release消除背景层。
阅读全文
摘要：上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。 HTML 代码 JavaScript 代码 在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicAct
阅读全文
摘要：ionic 也默认提供了许多的图标，大概有500多个。用法也非常的简单： 图标列表如下：                              
阅读全文
摘要：ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。 
阅读全文
摘要：1.Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。 ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。          2.Sub Header（副标题） Sub Header同样是固定在顶部，只是是在H
阅读全文
摘要：ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。 1.基本用法 以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。  默认情况，选项卡颜色为默认
阅读全文
摘要：1.基本使用 按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。 默认情况下，按钮显示样式为：display: inline-block。  2.button-block button-block 样式按钮显示为：display: block，它将完全填充父元素的宽度，包含
阅读全文
摘要：一、输入框 list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 1.输入框属性：placeholder 以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。  2.输入框属性：i
阅读全文