摘要: 以下实例中,通过切换不同开关 checked 显示不同的值,true 为打开,false 为关闭。 HTML 代码 由于pre标签冲突,实例中的 pre 已替换为 div标签,具体可以在"尝试一下"中查看。 JavaScript 代码 css 代码   阅读全文
posted @ 2016-06-16 17:14 Mac.Manon 阅读(482) 评论(0) 推荐(0) 编辑
摘要: 实例中,根据选中的不同选项,显示不同的值。 HTML 代码 JavaScript 代码 css 代码   阅读全文
posted @ 2016-06-16 17:10 Mac.Manon 阅读(754) 评论(0) 推荐(0) 编辑
摘要: ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用。 实例中,会根据复选框是否选中,修改 checked 值,true 为选中, false 为未选中。 HTML 代码 JavaScript 代码 css 阅读全文
posted @ 2016-06-16 17:04 Mac.Manon 阅读(1688) 评论(0) 推荐(0) 编辑
摘要: 在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 JavaScript 代码 item.json 文件数据:  阅读全文
posted @ 2016-06-16 16:32 Mac.Manon 阅读(635) 评论(0) 推荐(0) 编辑
摘要: 我们经常需要在 UI 上,例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。 在组件中可以使用\(ionicBackdrop.retain()来显示背景层,使用\)ionicBackdrop.release()隐藏背景层。 每次调用retain后,背景会一直显示,直到调用release消除背景层。 阅读全文
posted @ 2016-06-16 16:16 Mac.Manon 阅读(640) 评论(0) 推荐(0) 编辑
摘要: 上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。 HTML 代码 JavaScript 代码 在代码中触发上拉菜单,需要在你的 angular 控制器中使用 $ionicAct 阅读全文
posted @ 2016-06-16 16:12 Mac.Manon 阅读(1097) 评论(0) 推荐(0) 编辑
摘要: ionic 也默认提供了许多的图标,大概有500多个。用法也非常的简单: 图标列表如下:                               阅读全文
posted @ 2016-06-16 15:53 Mac.Manon 阅读(823) 评论(0) 推荐(0) 编辑
摘要: ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色。  阅读全文
posted @ 2016-06-16 14:43 Mac.Manon 阅读(476) 评论(0) 推荐(0) 编辑
摘要: 1.Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。 ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。          2.Sub Header(副标题) Sub Header同样是固定在顶部,只是是在H 阅读全文
posted @ 2016-06-16 14:37 Mac.Manon 阅读(628) 评论(0) 推荐(0) 编辑
摘要: ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换。它可以包含文字和图标的组合,是一种移动设备上流行的导航方法。 1.基本用法 以下选项卡容器使用了 tabs 类,每个选项卡使用 tab-item 类。默认情况下,选项卡是文本的,并没有图标。  默认情况,选项卡颜色为默认 阅读全文
posted @ 2016-06-16 14:02 Mac.Manon 阅读(2647) 评论(0) 推荐(0) 编辑
摘要: 1.基本使用 按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式。 默认情况下,按钮显示样式为:display: inline-block。  2.button-block button-block 样式按钮显示为:display: block,它将完全填充父元素的宽度,包含 阅读全文
posted @ 2016-06-16 13:39 Mac.Manon 阅读(773) 评论(0) 推荐(0) 编辑
摘要: 一、输入框 list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 1.输入框属性:placeholder 以下实例中,默认为100%宽度(左右两侧没有边框),并使用 placeholder 属性设置输入字段预期值的提示信息。  2.输入框属性:i 阅读全文
posted @ 2016-06-16 13:35 Mac.Manon 阅读(7133) 评论(0) 推荐(0) 编辑
摘要: 近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。 针对移动端的应用,卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果,甚至实现动画效果。 卡片一般放在页面顶部,当然也可以实现左右切换的功能。 1.基本卡片  卡片(card)默认样式带有box-sha 阅读全文
posted @ 2016-06-16 12:29 Mac.Manon 阅读(960) 评论(0) 推荐(0) 编辑
摘要: 列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮,开关,图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。 ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项 阅读全文
posted @ 2016-06-16 11:20 Mac.Manon 阅读(806) 评论(0) 推荐(0) 编辑
摘要: ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端,基本上的手机都支持。row 样式指定行,col 样式指定列。 1.同等大小网格 在带有 row 的样式的元素里如果包含了 col 的样式,col 就会设置为同等大小。 阅读全文
posted @ 2016-06-16 08:53 Mac.Manon 阅读(7230) 评论(0) 推荐(0) 编辑