ionic 加载动作 $ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。 用法 angular.module(‘LoadingApp’, [‘ionic’]) .controller(‘LoadingCtrl’, function($scope, $ionicLoading) { $scope.show = function() { $ionicLoading.show({ template: ‘Loading…’ }); }; $scope.hide = function(){ $ionicLoading.hide(); }; }); 方法 显示一个加载效果。 show(opts) 参数 类型 详情 opts object loading指示器的选项。可用属性： {string=} template 指示器的html内容。 {string=} templateUrl 一个加载html模板的url作为指示器的内容。 {boolean=} noBackdrop…
ionic 列表操作 列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。 用法 <ion-list> <ion-item ng-repeat=”item in items”> Hello, {{item}}! </ion-item> </ion-list> 高级用法: 缩略图，删除按钮，重新排序，滑动 <ion-list ng-controller=”MyCtrl” show-delete=”shouldShowDelete” show-reorder=”shouldShowReorder” can-swipe=”listCanSwipe”> <ion-item ng-repeat=”item in items” class=”item-thumbnail-left”> <img ng-src=”{{item.img}}”> <h2>{{item.title}}</h2> <p>{{item.description}}</p> <ion-option-button class=”button-positive” ng-click=”share(item)”> 分享 </ion-option-button> <ion-option-button class=”button-info” ng-click=”edit(item)”> 编辑 </ion-option-button> <ion-delete-button class=”ion-minus-circled” ng-click=”items.splice($index,…
ionic 头部和底部 ion-header-bar 这个是固定在屏幕顶部的一个头部标题栏。如果给它加上’bar-subheader’ 这个样式，它就是副标题。 用法 <ion-header-bar align-title=”left” class=”bar-positive”> <div class=”buttons”> <button class=”button” ng-click=”doSomething()”>Left Button</button> </div> <h1 class=”title”>Title!</h1> <div class=”buttons”> <button class=”button”>Right Button</button> </div> </ion-header-bar> <ion-content> Some content! </ion-content> API 属性 类型 描述 align-title (optional) string 这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 ‘left’,’center’,’right’。 no-tap-scroll (optional) boolean 默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll…
ionic 手势事件 事件 描述 用法 实例 on-hold 长按的时间是500毫秒。 <button on-hold=”onHold()” class=”button”> Test </button> 尝试一下 » on-tap 这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。。 <button on-tap=”onTap()” class=”button”> Test </button> 尝试一下 » on-double-tap 手双击屏幕事件 <button on-double-tap=”onDoubleTap()” class=”button”> Test </button> 尝试一下 » on-touch 这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup 。 <button on-touch=”onTouch()” class=”button”> Test </button> 尝试一下…
ionic 切换开关操作 以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。 HTML 代码 <ion-header-bar class=”bar-positive”> <h1 class=”title”>开关切换</h1> </ion-header-bar> <ion-content> <div class=”list”> <div class=”item item-divider”> Settings </div> <ion-toggle ng-repeat=”item in settingsList” ng-model=”item.checked” ng-checked=”item.checked”> {{ item.text }} </ion-toggle> <div class=”item”> <!– 使用 pre 标签展示效果更美观 –> <div ng-bind=”settingsList | json”></div> </div> <div…
ionic 单选框操作 实例中，根据选中的不同选项，显示不同的值。 HTML 代码 <ion-header-bar class=”bar-positive”> <h1 class=”title”>当选按钮</h1> </ion-header-bar> <ion-content> <div class=”list”> <div class=”item item-divider”> 选取的值为: {{ data.clientSide }} </div> <ion-radio ng-repeat=”item in clientSideList” ng-value=”item.value” ng-model=”data.clientSide”> {{ item.text }} </ion-radio> <div class=”item item-divider”> Serverside, Selected Value: {{ data.serverSide }} </div> <ion-radio ng-repeat=”item in serverSideList”…
ionic 复选框 ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 <ion-checkbox ng-model=”isChecked”>复选框标签</ion-checkbox> 实例 实例中，会根据复选框是否选中，修改 checked 值，true 为选中， false 为未选中。 HTML 代码 <ion-header-bar class=”bar-positive”> <h1 class=”title”>复选框</h1> </ion-header-bar> <ion-content> <div class=”list”> <ion-checkbox ng-repeat=”item in devList” ng-model=”item.checked” ng-checked=”item.checked”> {{ item.text }} </ion-checkbox> <div class=”item”> <div ng-bind=”devList | json”></div>…
ionic 下拉刷新 在加载新数据的时候，我们需要实现下拉刷新效果，代码如下： 实例 HTML 代码 <body ng-app=”starter” ng-controller=”actionsheetCtl” > <ion-pane> <ion-content > <ion-refresher pulling-text=”下拉刷新” on-refresh=”doRefresh()”></ion-refresher> <ion-list> <ion-item ng-repeat=”item in items” ng-bind=”item.name”></ion-item> </ion-list> </ion-content> </ion-pane> </body> JavaScript 代码 angular.module(‘starter’, [‘ionic’]) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show…
ionic 背景层 我们经常需要在 UI 上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。 在组件中可以使用$ionicBackdrop.retain()来显示背景层，使用$ionicBackdrop.release()隐藏背景层。 每次调用retain后，背景会一直显示，直到调用release消除背景层。 实例 HTML 代码 <body ng-app=”starter” ng-controller=”actionsheetCtl” > <ion-pane> <ion-content > <h2 ng-click=”action()”>$ionicBackdrop</h2> </ion-content> </ion-pane> </body> JavaScript 代码 angular.module(‘starter’, [‘ionic’]) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the…
ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。 实例 HTML 代码 <body ng-app=”starter” ng-controller=”actionsheetCtl” > <ion-pane> <ion-content > <h2 ng-click=”show()”>Action Sheet</h2> </ion-content> </ion-pane> </body> JavaScript 代码 在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicActionSheet 服务： angular.module(‘starter’, [‘ionic’]) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the…