ionic 混合开发组件结构大全代码样式

琪琪整合 08-16 734

前言：

眼前你们对“ionic跨域”大体比较讲究，小伙伴们都想要知道一些“ionic跨域”的相关资讯。那么小编在网摘上汇集了一些有关“ionic跨域””的相关知识，希望兄弟们能喜欢，姐妹们一起来学习一下吧！

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 accessory bar above the keyboard// for form inputs)if(window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if(window.StatusBar) {StatusBar.styleDefault();}});}).controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){$scope.show = function() {var hideSheet = $ionicActionSheet.show({buttons: [{ text: '<b>Share</b> This' },{ text: 'Move' }],destructiveText: 'Delete',titleText: 'Modify your album',cancelText: 'Cancel',cancel: function() {// add cancel code..},buttonClicked: function(index) {return true;}});$timeout(function() {hideSheet();}, 2000);}; }])

尝试一下 »

运行效果如下图：

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 accessory bar above the keyboard// for form inputs)if(window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if(window.StatusBar) {StatusBar.styleDefault();}});}).controller( 'actionsheetCtl',['$scope','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){$scope.action = function() {$ionicBackdrop.retain();$timeout(function() { //默认让它1秒后消失$ionicBackdrop.release();}, 1000);};}])

尝试一下 »

显示效果如下图所示：

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 the accessory bar above the keyboard// for form inputs)if(window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if(window.StatusBar) {StatusBar.styleDefault();}});}).controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){$scope.items=[{"name":"HTML5"},{"name":"JavaScript"},{"name":"Css3"}];$scope.doRefresh = function() {$http.get('.编程改变未来.com/try/demo_source/item.json') //注意改为自己本站的地址，不然会有跨域问题.success(function(newItems) {$scope.items = newItems;}).finally(function() {$scope.$broadcast('scroll.refreshComplete');});};}])

item.json 文件数据：

[{"name":"编程改变未来"},{"name":"www.编程改变未来.com"}]

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> </div> <div class="item item-divider"> Notifications </div> <ion-checkbox ng-model="pushNotification.checked" ng-change="pushNotificationChange()"> Push Notifications </ion-checkbox> <div class="item"> <div ng-bind="pushNotification | json"></div> </div> <ion-checkbox ng-model="emailNotification" ng-true-value="'Subscribed'" ng-false-value="'Unubscribed'"> Newsletter </ion-checkbox> <div class="item"> <div ng-bind="emailNotification | json"></div> </div> </div> </ion-content>

JavaScript 代码

angular.module('starter', ['ionic']).run(function($ionicPlatform) {$ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); }});}).controller( 'actionsheetCtl',['$scope',function($scope){ $scope.devList = [ { text: "HTML5", checked: true }, { text: "CSS3", checked: false }, { text: "JavaScript", checked: false } ]; $scope.pushNotificationChange = function() { console.log('Push Notification Change', $scope.pushNotification.checked); }; $scope.pushNotification = { checked: true }; $scope.emailNotification = 'Subscribed';}])

css 代码：

body { cursor: url(''), auto;}

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" ng-value="item.value" ng-model="data.serverSide" ng-change="serverSideChange(item)" name="server-side"> {{ item.text }} </ion-radio> </div> </ion-content>

JavaScript 代码

angular.module('ionicApp', ['ionic']).controller('MainCtrl', function($scope) { $scope.clientSideList = [ { text: "Backbone", value: "bb" }, { text: "Angular", value: "ng" }, { text: "Ember", value: "em" }, { text: "Knockout", value: "ko" } ]; $scope.serverSideList = [ { text: "Go", value: "go" }, { text: "Python", value: "py" }, { text: "Ruby", value: "rb" }, { text: "Java", value: "jv" } ]; $scope.data = { clientSide: 'ng' }; $scope.serverSideChange = function(item) { console.log("Selected Serverside, text:", item.text, "value:", item.value); }; });

css 代码：

body { cursor: url(''), auto;}

本文地址：http://www.longkongtuishu.com/ca187BANsAVoBCVU.html

标签： #ionic跨域