Ionic学习总结
来源：互联网 发布：php 字母a加1 编辑：程序博客网 时间：2024/06/04 01:04
一、Ionic概念
ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
Hybird：混合模式移动应用。
Ionic主要分为Ionic CSS 和Ionic JavaScript，
二、Ionic安装
可查看右边的网址安装：http://www.runoob.com/ionic/ionic-install.html
三、IonicCSS
常用标签
- ion-side-menus 侧栏菜单组
- ion-side-menu-content 侧栏菜单内容
- ion-nav-view 导航视图
- ion-side-menu 侧栏菜单
- ion-footer-bar 底部
- ion-header-bar 头部
- ion-content 文本
- ion-view 视图
- ion-option-button select选项
- ion-tabs tab组合
- ion-tab tab栏
- ion-delete-button 删除按钮
- ion-reorder-button 记录按钮
- ion-list 列表
- ion-item 列表项
- button 按钮
- ion-pane 面板
- ion-spinner 加载动画
- ion-toggle 开关切换
- ion-slide-box 侧边框
- ion-checkbox 复选框
- ion-radio 单选框
- ion-refresher 刷新
- ion-side-menus ：是一个带有边栏菜单的容器，可以通过点击按钮或者滑动屏幕来展开菜单。
- 属性enable-menu-with-back-views，布尔值，在返回按钮显示时，确认是否启用侧边栏菜单。
- 属性delegate-handle，字符串，该句柄用于标识带有$ionicScrollDelegate的滚动视图。
- ion-side-menu-content：展示主要内容的容器，可以通过滑动屏幕来展开menu。
- 属性drag-content，布尔值，内容是否可被拖动，默认为true。
- ion-nav-view：导航。
- ion-side-menu：存放侧边栏的容器。
- 侧栏菜单的容器，同级的一个ion-side-menu-content 指令。
- 属性side，字符串，侧栏菜单当前在哪一边。可选的值有: ‘left’ 或 ‘right’。
- 属性is-enabled，布尔值，该侧栏菜单是否可用。
- 属性width，数值，侧栏菜单应该有多少像素的宽度。默认为275。
- 通用属性menu-toggle，在一个指定的侧栏中切换菜单。
- 通用属性menu-close，关闭当前打开的侧栏菜单。
- ion-footer-bar：屏幕的底部。
- ion-header-bar：菜单栏头部。
- bar-light 样式 白色
- bar-stable 白框
- bar-positive 蓝色
- bar-calm 淡蓝色
- bar-balanced 绿色
- bar-energized 黄色
- bar-assertive 红色
- bar-royal 淡紫色
- bar-dark 黑色
- bar-subheader 副标题
- bar-footer 底部
- pull-right 居右
- 属性 align-title=”left/right/center”，对齐title
- 属性 no-tap-scroll，默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。它的值是布尔值（true/false）。
示例：
<div class="bar bar-footer bar-calm"> <button class="button button-clear pull-right">Left</button> <div class="title">Title</div> <button class="button button-clear">Right</button></div>ion-content：内容。
ion-view 视图，属于ionNavView。 一个内容的容器，用于展示视图或导航栏信息。
- 通过cache-view=”false” 属性禁用缓存。
ion-option-button
- ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
- 属性delegate-handle，字符串，该句柄用
$ionicTabsDelegate来标识这些选项卡。
- 属性delegate-handle，字符串，该句柄用
- ion-tab 隶属于ionTabs，包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
- 样式tabs-icon-top tabs-positive
示例：
- 样式tabs-icon-top tabs-positive
<ion-tab title="Tab!" //字符串，该选项卡的标题。 icon="my-icon" //字符串，选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。 ion-on="" //字符串，被选中标签的图标。 ion-off="" //字符串，没被选中标签的图标。 badge="" //表达式，选项卡上的徽章（通常是一个数字）。 ng-click="" //表达式，通常，点击时选项卡会被选中。如果设置了 ng-Click，它将不会被选中。 你可以用$ionicTabsDelegate.select()来指定切换标签。 badge-style="" //表达式，选项卡上微章的样式（例，tabs-positive ）。 href="#/tab/tab-link" //字符串，但触碰的时候，该选项卡将会跳转的的链接。 on-select="onTabSelected()" //表达式，选项卡被选中时触发。 on-deselect="onTabDeselected()">//表达式，选项卡取消选中时触发。</ion-tab>- ion-delete-button
- ion-reorder-button
- ion-list：列表。
- 样式
- list list-insert，内嵌列表，列表不会显示完整的宽度。
- item，标签。
- item-input，文本框，input-label。
- item-select,
- item-stacked-label，堆叠标签
- item-floating-label，浮动标签
- item-input-inset，内嵌输入域
- item-toggle，切换开关，类似 HTML 的 checkbox 标签，但它更易于在移动设备上使用。
- item-checkbox，复选框。
- item-radio，单选框。
- item range range-calm，滑块，左右两边一个图标，用标签
<i></i>表示 - 属性 show-delete，列表项的删除按钮当前是显示还是隐藏。
- 属性
delegate-handle="字符串"该句柄定义带有$ionicListDelegate的列表。 - 属性 show-reorder，列表项的排序按钮当前是显示还是隐藏。
- 属性 can-swipe，列表项是否被允许滑动显示选项按钮。默认：true。
示例：
<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>菜鸟教程(runoob.com)</title> <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-ios-search placeholder-icon"></i> <input type="search" placeholder="搜索"> </label> <button class="button button-clear"> 取消 </button> </div> </body>//滑块示例 <div class="item range range-positive"> <i class="icon ion-ios-sunny-outline"></i> <input type="range" name="volume" min="0" max="100" value="12"> <i class="icon ion-ios-sunny"></i> </div>//select选择框 <div class="item item-input item-select"> <div class="input-label"> Lightsaber </div> <select> <option>Blue</option> <option selected="">Green</option> <option>Red</option> </select> </div>ion-item：列表项
- 样式
- item-divider，分隔符
- item-icon-left , 设置图标在左侧， item-icon-right，设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。
- item-button-right， item-button-left 按钮列表
- item-avatar，带圆形头像列表
- item-thumbnail-left，带方形缩略图列表
- item
示例：
<ion-side-menus><!-- 中心内容 --><ion-side-menu-content> <ion-header-bar class="bar-dark"> <button class="button button-icon" ng-click="toggleProjects()"> <i class="icon ion-navicon"></i> </button> <h1 class="title">{{activeProject.title}}</h1> <!-- 新增按钮 --> <button class="button button-icon" ng-click="newTask()"> <i class="icon ion-compose"></i> </button> </ion-header-bar> <ion-content scroll="false"> <ion-list> <ion-item ng-repeat="task in activeProject.tasks"> {{task.title}} </ion-item> </ion-list> </ion-content></ion-side-menu-content><!-- 左边栏 --><ion-side-menu side="left"><ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> <button class="button button-icon ion-plus" ng-click="newProject()"> </button></ion-header-bar><ion-content scroll="false"> <ion-list> <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> {{project.title}} </ion-item> </ion-list></ion-content></ion-side-menu></ion-side-menus>//样式示例<div class="list"> <a class="item item-thumbnail-left" href="#"> <img src="cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> ...</div>- button 按钮
- 按钮默认显示样式：display:inline-block
- 显示样式：display: block，完全填充父元素的宽度，包含了内边距属性padding。
- 颜色同bar，button-light，button-stable，button-positive，button-calm，button-balanced，button-energized，button-assertive，button-royal，button-dark
- button-full，让按钮显示完全宽度，且不包含内边距padding。
- button-large ，button-small ，设置按钮大小
- button-outline，设置背景透明
- button-clear，无背景与边框按钮
- 按钮图标，icon, icon-left, icon-right, ion-home, ion-star, ion-chevron-right, ion-chevron-left, ion-gear-a, ion-navicon
示例：
<div class="bar bar-header"> <button class="button button-icon icon ion-navicon"></button> <div class="h1 title">Header Buttons</div> <button class="button button-clear button-positive">Edit</button></div>- ionic tab 选项卡（没有标签，仅为样式显示）
- tabs tabs-icon-only/tabs-icon-left
- tab-item
示例：
<div class="tabs tabs-icon-left"> <a class="tab-item"> <i class="icon ion-home"></i> 主页 </a> <a class="tab-item"> <i class="icon ion-star"></i> 收藏 </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> 设置 </a></div>ionic Grid 网格，采用了弹性盒子模型(Flexible Box Model)（没有标签，仅为样式显示） 。
- 样式
- row
- col
- col-50 指定列宽 50%，col-20 指定列宽 20%
- col-offset-33 ，左偏移
- col-top，col-center,col-bottom，列纵向对齐网络
- row-top,row-center,row-bottom，行纵向对齐网络
- row responsive-sm/responsive-md/responsive-lg，sm：小于手机横屏，md：小于平板竖屏，lg：小于平板横屏
ion-pane ，面板
ion-spinner ，提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。
示例：<ion-spinner class="spinner-energized"></ion-spinner><ion-spinner icon="dots" class="spinner-dark"></ion-spinner>ion-toggle 切换开关操作
- ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换。
- 属性delegate-handle，字符串，该句柄用$ionicSlideBoxDelegate来标识这个滑动框。
- 属性does-continue，布尔值，滑动框是否开启循环滚动。
- 属性auto-play，布尔值，设置滑动框是否循环播放，如果 does-continue 为 true，默认也为 true。
- 属性slide-interval，数字，等待多少毫秒开始滑动（如果继续则为true）。默认为4000。
- 属性show-pager，布尔值，滑动框的页面是否显示。
- 属性pager-click，表达式，当点击页面时，触发该表达式（如果shou-pager为true）。传递一个’索引’变量。
- 属性on-slide-changed，表达式，当滑动时，触发该表达式。传递一个’索引’变量。
- 属性active-slide，表达式，将模型绑定到当前滑动框。
- ion-checkbox 复选框
- ion-radio 单选框
示例：
//复选框<ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>//单选框<ion-radio ng-repeat="item in clientSideList" ng-value="item.value" ng-model="data.clientSide"> {{ item.text }} </ion-radio>- ion-refresher
示例：
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>- ionic icon 图标（没有标签，仅为样式显示）
- 样式
- icon ion-star
- Ionic icons 官网: http://ionicons.com/
- 国内图标样式 CDN 地址：https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css。
示例：
<i class="icon ion-star"></i><i class = "icon ion-happy-outline"></i><i class = "icon ion-ios-analytics"></i><i class = "icon ion-ios-eye"></i>- card 卡片
- box-shadow，阴影。
示例：
- box-shadow，阴影。
<div class="list card"> <div class="item item-avatar"> <img src="mcfly.jpg"> <h2>Marty McFly</h2> <p>November 05, 1955</p> </div> <div class="item item-body"> <img class="full-image" src="delorean.jpg"> <p> 菜鸟教程 -- 学的不仅是技术，更是梦想！<br> 菜鸟教程 -- 学的不仅是技术，更是梦想！<br> 菜鸟教程 -- 学的不仅是技术，更是梦想！<br> 菜鸟教程 -- 学的不仅是技术，更是梦想！ </p> <p> <a href="#" class="subdued">1 喜欢</a> <a href="#" class="subdued">5 评论</a> </p> </div> <div class="item tabs tabs-secondary tabs-icon-left"> <a class="tab-item" href="#"> <i class="icon ion-thumbsup"></i> 喜欢 </a> <a class="tab-item" href="#"> <i class="icon ion-chatbox"></i> 评论 </a> <a class="tab-item" href="#"> <i class="icon ion-share"></i> 分享 </a> </div></div>四、Ionic 常用AngularJS服务
$ionicModal可以遮住用户主界面的内容框$ionicSideMenuDelegate，控制所有侧栏菜单$ionicPlatform$stateParams$ionicActionSheet$ionicTabsDelegate授权控制ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。$urlRouterProviderurl路由$stateProvider设置导航的状态$ionicConfigProvider$ionicLoading加载交互效果$ionicActionSheet上拉菜单$ionicBackdrop背景层$ionicGesture手势事件$ionicModal模态窗口
$ionicSideMenuDelegate，触发$ionicSideMenuDelegate服务，来控制所有侧栏菜单。用$getByHandle方法控制特定情况下的ionSideMenus。$ionicSideMenuDelegate.toggleLeft([isOpen]);isOpen:布尔值，是否打开或关闭菜单。默认：切换菜单。$ionicSideMenuDelegate.toggleRight([isOpen]);isOpen:布尔值，是否打开或关闭菜单。默认：切换菜单。$ionicSideMenuDelegate.getOpenRatio();获取打开菜单内容超出菜单宽度的比例。$ionicSideMenuDelegate.isOpen();判断左侧或右侧菜单是否已经打开。$ionicSideMenuDelegate.isOpenLeft();判断左侧菜单是否已经打开。$ionicSideMenuDelegate.isOpenRight();判断右侧菜单是否已经打开。$ionicSideMenuDelegate.canDragContent([canDrag]);canDrag:布尔值，设置是否可以拖动内容打开侧栏菜单。$ionicSideMenuDelegate.$getByHandle(handle);handle:字符串。
示例：$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
$ionicPlatform服务$stateParams$ionicActionSheet服务$ionicTabsDelegate授权控制ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。$ionicTabsDelegate.select(index, [shouldChangeHistory]);index：数值，选择标签的索引；shouldChangeHistory：布尔值，此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个ion-nav-view在选项卡里，你可能需要设置它为true。$ionicTabsDelegate.selectedIndex();数值，被选中标签的索引，如-1.$ionicTabsDelegate.$getByHandle(handle); handle:字符串。$ionicTabsDelegate.$getByHandle('my-handle').select(0);
$urlRouterProviderurl路由
示例：$urlRouterProvider.otherwise('/app/playlists');$stateProvider设置导航的状态
示例：
var app = angular.module('myApp', ['ionic']);app.config(function($stateProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'home.html' }) .state('music', { url: '/music', templateUrl: 'music.html' });});$ionicConfigProvider$ionicBackdrop背景层$ionicBackdrop.retain()，显示背景层。$ionicBackdrop.release()，隐藏背景层。
$ionicGesture angular服务, 展示ionicionic.EventController手势。
on(eventType, callback, $element)
在一个元素上添加一个事件监听器。
eventType：string类型，监听的手势事件；
callback：function(e)类型，当手势事件发生时触发的事件。
$element：element类型，angular元素监听的事件。off(eventType, callback, $element)
参数含义同on(eventType, callback, $element)。
$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); }; }])背景层（
$ionicBackdrop）$ionicBackdrop.retain()，显示背景层。$ionicBackdrop.release()，隐藏背景层。
手势事件(
$ionicGesture)- on-hold 长按的时间是500毫秒。示例：
<button on-hold="onHold()" class="button" >Test <button> - on-tab 手势轻击事件.
- on-double-tap 手双击屏幕事件
- on-touch 这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。
- on-release 当用户结束触摸事件时触发。
- on-drag 这个有点类似于PC端的拖拽。当你一直点击某个物体，并且手开始移动，都会触发 on-drag。
- on-drag-up 向上拖拽, on-drag-right , on-drag-down, on-drag-left,
- on-swipe 手指滑动效果，可以是任何方向上的。而且也和 on-drag 类似，都有四个方向上单独的事件。
- on-swipe-up 向上的手指滑动效果。on-swipe-right, on-swipe-down, on-swipe-left
- on-hold 长按的时间是500毫秒。示例：
$ionicLoading加载交互效果。
- 显示一个加载效果，show(opts); $ionicLoading.show();
- 隐藏一个加载效果，hide(); $ionicLoading.hide();
-$ionicLoadingConfig，设置加载的默认项
<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>菜鸟教程(runoob.com)</title> <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> <script> var app = angular.module('ionicApp', ['ionic']) app.constant('$ionicLoadingConfig',{template:'默认加载模版......'}); app.controller('AppCtrl', function($scope, $timeout, $ionicLoading) { // Setup the loader $ionicLoading.show({ content: 'Loading', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0, template:"",指示器的html内容。 templateUrl:"",//一个加载html模板的url作为指示器的内容。 noBackdrop:false;//是否隐藏背景。默认情况下它会显示。 delay:2000,//指示器延迟多少毫秒显示。默认为不延迟。 duration:3000 //等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。 }); //或者$ionicLoading.show();配置项在$ionicLoadingConfig设置 // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded. $timeout(function () { $ionicLoading.hide(); $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}]; }, 2000); }); </script> </head> <body ng-controller="AppCtrl"> <ion-view title="Home"> <ion-header-bar> <h1 class="title">The Stooges</h1> </ion-header-bar> <ion-content has-header="true"> <ion-list> <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item> </ion-list> </ion-content> </ion-view> </body></html>$ionicModal模态窗口。
示例：
<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>菜鸟教程(runoob.com)</title> <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> <style> body { cursor: url('http://ionicframework.com/img/finger.png'), auto; } </style> <script> var app=angular.module('ionicApp', ['ionic']) app.controller('AppCtrl', function($scope, $ionicModal) { $scope.contacts = [ { name: 'Gordon Freeman' }, { name: 'Barney Calhoun' }, { name: 'Lamarr the Headcrab' }, ]; /*fromTemplate(templateString, options); fromTemplateUrl(templateUrl, options); templateString:"",模板的字符串作为模态窗口的内容。 templateUrl:载入模板的url。 options:options 会传递到 ionicModal#initialize方法中。 */ /*initialize(options),创建一个新的模态窗口控制器示例。 options：{object=} 范围 子类的范围。默认：创建一个$rootScope子类。 {string=} 动画 带有显示或隐藏的动画。默认：'slide-in-up' {boolean=} 第一个输入框获取焦点 当显示时，模态窗口的第一个输入元素是否自动获取焦点。默认：false。 {boolean=}backdropClickToClose` 点击背景时是否关闭模态窗口。默认：true。 */ $ionicModal.fromTemplateUrl('templates/modal.html', { scope: $scope }).then(function(modal) { $scope.modal = modal; }); $scope.createContact = function(u) { $scope.contacts.push({ name: u.firstName + ' ' + u.lastName }); $scope.modal.hide(); //$scope.modal.remove(); //$scope.modal.isShown(); }; }); </script> </head> <body ng-controller="AppCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">Contacts</h1> <div class="buttons"> <button class="button button-icon ion-compose" ng-click="modal.show()"> </button> </div> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat="contact in contacts"> {{contact.name}} </ion-item> </ion-list> </ion-content> <script id="templates/modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar class="bar bar-header bar-positive"> <h1 class="title">New Contact</h1> <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button> </ion-header-bar> <ion-content class="padding"> <div class="list"> <label class="item item-input"> <span class="input-label">First Name</span> <input ng-model="newUser.firstName" type="text"> </label> <label class="item item-input"> <span class="input-label">Last Name</span> <input ng-model="newUser.lastName" type="text"> </label> <label class="item item-input"> <span class="input-label">Email</span> <input ng-model="newUser.email" type="text"> </label> <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button> </div> </ion-content> </ion-modal-view> </script> </body></html>阅读全文
0 0
- Ionic学习总结
- IONIC学习
- 学习ionic
- Hello Ionic - Ionic学习笔记
- ionic调试方法总结
- Ionic 坑总结
- ionic css类总结
- ionic 常用命令总结
- ionic总结二
- ionic技术点总结
- ionic项目总结
- ionic问题总结
- ionic学习之建立一个ionic项目
- ionic 日期控件 ionic-datepicker 学习
- ionic的tabs学习
- ionic框架学习
- ionic 学习日志01
- 学习ionic 日志02
- jQuery方法position()与offset()区别
- 设计模式之抽象工厂
- 【第四届蓝桥杯】振兴中华
- 贴片式SIM卡规格以及封装尺寸信息
- java 发送邮件
- Ionic学习总结
- (树) 101. Symmetric Tree
- error LNK2001: unresolved external symbol _WinMain@16
- ASP.NET中的图片路径问题
- spring整合ehcache 注解实现查询缓存，并实现实时缓存更新或删除
- Linux设置虚拟IP
- 离线安装Chrome Postman 和Postman Interceptor 插件
- Eclipse背景颜色 字体 XML字体
- jquery访问json文件中的数据
