Author: 石衣

ionic 导航 ion-nav-view 当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。 采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。 AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套， 以及合并视图，允许一个以上模板呈现在同一个页面。 此外，每个状态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。 以下实例中，我们将创建一个应用程序中包含不同状态的导航视图。 我们的标记中选择ionNavView作为顶层指令。显示一个页眉栏我们用 ionNavBar 指令通过导航更新。 接下来，我们需要设置我们的将渲染的状态值。 var app = angular.module(‘myApp’, [‘ionic’]); app.config(function($stateProvider) { $stateProvider .state(‘index’, { url: ‘/’, templateUrl: ‘home.html’ }) .state(‘music’, { url: ‘/music’, templateUrl: ‘music.html’ }); }); 再打开应用，$stateProvider 会查询url, 看是否匹配 index 状态值, 再加载index.html到<ion-nav-view>。 页面加载都是通过URLs配置的。在Angular中创建模板最一个简单的方式就是直接将他放到html模板文件中并且用<script type=”text/ng-template”> 包含。…

Read More

ionic 模态窗口 $ionicModal $ionicModal 可以遮住用户主界面的内容框。 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 <script id=”my-modal.html” type=”text/ng-template”> <ion-modal-view> <ion-header-bar> <h1 class=”title”>My Modal title</h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-modal-view> </script> 然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板，进行初始化操作。就像下面的代码： angular.module(‘testApp’, [‘ionic’]) .controller(‘MyController’, function($scope, $ionicModal) { $ionicModal.fromTemplateUrl(‘my-modal.html’, { scope: $scope, animation: ‘slide-in-up’ }).then(function(modal) { $scope.modal = modal;…

Read More

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…

Read More

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,…

Read More

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…

Read More

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> 尝试一下…

Read More

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…

Read More

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”…

Read More

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>…

Read More

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…

Read More