快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}

当然，即使努力了也没做成，至少你也有收获，因为你知道自己以后可以避开这个坑。

这是一个"IO"开关，请看效果图和代码，下一节，说明，数据交换

Index HTML Code

<!DOCTYPE html>
<html ng-app="ionicApp"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title></title><link href="lib/ionic/css/ionic.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above<link href="css/ionic.app.css" rel="stylesheet">--><!-- ionic/angularjs js --><script src="lib/ionic/js/ionic.bundle.js"></script><!-- cordova script (this will be a 404 during development) --><script src="cordova.js"></script><!-- your app's js --><script src="js/app.js"></script></head><body><ion-nav-bar class="bar-positive nav-title-slide-ios7"><ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button></ion-nav-bar><ion-nav-view animation="slide-left-right"></ion-nav-view><script id="templates/sign-in.html" type="text/ng-template"><ion-view title="登录"><ion-content><div class="list"><label class="item item-input"><span class="input-label">用户名</span><input type="text" ng-model="user.username"></label><label class="item item-input"><span class="input-label">密  码</span><input type="password" ng-model="user.password"></label></div><div class="padding"><button class="button button-block button-positive" ng-click="signIn(user)">立即登录</button><p class="text-center"><a href="#/forgot-password">找回密码</a></p></div></ion-content></ion-view></script><script id="templates/forgot-password.html" type="text/ng-template"><ion-view title="找回密码"><ion-content padding="true"><p>放弃是经线，坚持是纬线</p><p>没有一个谷底不可逾越</p><p>返回 <a href="#/sign-in">登录</a>.</p></ion-content></ion-view></script><script id="templates/tabs.html" type="text/ng-template"><ion-view><ion-tabs class="tabs-icon-top tabs-positive"><ion-tab title="首页" icon="ion-home" href="#/tab/home"><ion-nav-view name="home-tab"></ion-nav-view></ion-tab><ion-tab title="关于" icon="ion-ios7-information" href="#/tab/about"><ion-nav-view name="about-tab"></ion-nav-view></ion-tab><ion-tab title="退出" icon="ion-log-out" href="#/sign-in"></ion-tab></ion-tabs></ion-view></script><script id="templates/home.html" type="text/ng-template"><ion-view title="首页"><ion-content><div class="list"><div class="item item-divider"> 设置</div><ion-toggle ng-repeat="item in settingsList"ng-model="item.checked" ng-checked="item.checked">{{ item.text }}</ion-toggle><div class="item"><pre ng-bind="settingsList | json"></pre> </div><div class="item item-divider"> 消息通知</div><ion-toggle ng-model="pushNotification.checked"ng-change="pushNotificationChange()">是否推送消息</ion-toggle><div class="item"><pre ng-bind="pushNotification | json"></pre> </div><ion-toggle toggle-class="toggle-assertive"ng-model="emailNotification"ng-true-value="{夜间模式}"ng-false-value="{正常模式}">模式调整</ion-toggle><div class="item"><pre ng-bind="emailNotification | json"></pre> </div></div></ion-content></ion-view></script><script id="templates/facts.html" type="text/ng-template"><ion-view title="生活圈"><ion-content padding="true"><h3>如果你比你身边的绝大多数人都强，那你该换朋友圈了</h3><p>若非青春苦短，谁会想来日方长</p><p>若非青春苦短，谁会想来日方长</p><p><a class="button icon ion-home" href="#/tab/home">首页</a><a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">关于</a></p></ion-content></ion-view></script> <script id="templates/facts2.html" type="text/ng-template"><ion-view title="关于"><ion-content padding="true"><h3>如果你比你身边的绝大多数人都强，那你该换朋友圈了</h3><p>若非青春苦短，谁会想来日方长</p><p>若非青春苦短，谁会想来日方长</p><a class="button icon ion-home" href="#/tab/home"> 首页</a><a class="button icon ion-chevron-left" href="#/tab/facts"> 生活圈</a></p></ion-content></ion-view></script><script id="templates/about.html" type="text/ng-template"><ion-view title="关于"><ion-content padding="true"><h3>如果你比你身边的绝大多数人都强，那你该换朋友圈了</h3><p>若非青春苦短，谁会想来日方长</p><p>若非青春苦短，谁会想来日方长</p><p><a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">关于</a></p></ion-content></ion-view></script><script id="templates/nav-stack.html" type="text/ng-template"><ion-view title="其它"><ion-content padding="true"><p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p></ion-content></ion-view></script></body>
</html>

App Js Code

angular.module('ionicApp', ['ionic']).config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('signin', {url: '/sign-in',templateUrl: 'templates/sign-in.html',controller: 'SignInCtrl'}).state('forgotpassword', {url: '/forgot-password',templateUrl: 'templates/forgot-password.html'}).state('tabs', {url: '/tab',abstract: true,templateUrl: 'templates/tabs.html'}).state('tabs.home', {url: '/home',views: {'home-tab': {templateUrl: 'templates/home.html',controller: 'HomeTabCtrl'}}}).state('tabs.facts', {url: '/facts',views: {'home-tab': {templateUrl: 'templates/facts.html'}}}).state('tabs.facts2', {url: '/facts2',views: {'home-tab': {templateUrl: 'templates/facts2.html'}}}).state('tabs.about', {url: '/about',views: {'about-tab': {templateUrl: 'templates/about.html'}}}).state('tabs.navstack', {url: '/navstack',views: {'about-tab': {templateUrl: 'templates/nav-stack.html'}}}).state('tabs.contact', {url: '/contact',views: {'contact-tab': {templateUrl: 'templates/contact.html'}}});$urlRouterProvider.otherwise('/sign-in');}).controller('SignInCtrl', function($scope, $state) {$scope.settingsList = [{ text: "Wireless", checked: true },{ text: "GPS", checked: false },{ text: "Bluetooth", checked: false }];$scope.pushNotificationChange = function() {console.log('Push Notification Change', $scope.pushNotification.checked);};$scope.pushNotification = { checked: true };$scope.emailNotification = 'Subscribed';$scope.signIn = function(user) {console.log('Sign-In', user);$state.go('tabs.home');};}).controller('HomeTabCtrl', function($scope) {console.log('HomeTabCtrl');
});

转载于:https://www.cnblogs.com/cube/p/4086645.html

快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}相关推荐

快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}
编程的快乐和乐趣,来自于能成功运行程序并运用到项目中,会在后面案例,实际运用到项目当中与数据更新一起说明从面板切换开始,请看效果图和代码,这只是一个面板切换的效果 Index HTML Code & ...
170多个Ionic Framework学习资源（转载）
在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...
快乐学习Pandas！开源教程《Joyful-Pandas》发布
Datawhale 作者:耿远昊.Datawhale团队寄语:Pandas 是基于Numpy的一种工具,是为了解决数据分析任务而创建的,其纳入了大量库和一些标准的数据模型,提供了大量能使我们快速便捷 ...
ionic4 打包ios_学习Ionic 4并开始创建iOS / Android应用
ionic4 打包ios Learn how to use Ionic 4 in this full course for beginners from Awais Mirza. Ionic Fram ...
Ionic Framework 5官方文档翻译
Ionic Framework 5官方文档翻译入门 Ionic Framework 5特点 Ionic Framework是什么? 核心概念构建你的第一个应用先进的Web应用浏览器支持版本控 ...
告别痛苦，快乐学习Pandas！开源教程《Joyful-Pandas》发布
Datawhale 作者:耿远昊.Datawhale团队寄语:Pandas 是基于Numpy的一种工具,是为了解决数据分析任务而创建的,其纳入了大量库和一些标准的数据模型,提供了大量能使我们快速便捷 ...
如何学习Flex Framework
如何学习Flex Framework 最近由於種種緣故又要開始做點教育訓練的事,先趁現在有空把手邊的資料整理一下. *Flex 的基礎架構關於 flex 基本上常被問到的不外乎就是「如何可以學好它? ...
【Ionic】---Using Local Notifications In Your Ionic Framework App
Using Local Notifications In Your Ionic Framework App 配置好ng-cordova先 <script src="lib/ngCord ...
在线学习Biopython教程与手册中文版
在线学习Biopython教程与手册网页链接:biopython教程与手册

快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}

快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}相关推荐

最新文章

热门文章