观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记(三)

十五、ionic路由

1、ionic中内联模板介绍

使用内联模板
内联模板的使用,常见的有几种情况。
(1) 使用ng-include指令
可以利用ng-include指令在HTML中直接使用内联模板,例如:

注意:其中a.html是一个字符串常量,需要使用单引号包裹起来。
(2)使用$templateCache服务
也可以直接使用$templateCache服务的方法get()从模板缓存中读出 其内容:
var partial = $templateCache.get("a.html");
(3)使用$http服务
还有一种常见的用法是使用$http服务时指定cache参数,这将直接从$templateCache 中取出模板,而不必进行网络访问: $http.get("a.html",{cache:$templateCache}) .success(function(d,s){..}) .error(function(d,s){...});

(4)配置状态机
需要指出的是,状态的划分以及每个状态的元信息(比如模板、url等)是在配置 阶段通过$stateProvider完成的:

angular.module("myApp",["ionic"]) .config(

function($stateProvider){

$stateProvider.state("state1",{...})

.state("state2",{...})

.state3("state3",{...});

});
触发状态迁移的几种方式(通俗的讲就是页面跳转的几种方式)
a. 调用$state.go()方法,这是一个高级的便利方法;
b. 点击包含ui-sref指令的链接 Go State 1
c. 导航到与状态相关联的 url。
当用户点击这个链接时,$state服务将根据状态名state1 找到对应的元信息,提取、编译模板,并将其显示在ui-view指令指定的 视图窗口中。

2、导航视图 : ion-nav-view

3、模板视图 : ion-view

ion-view指令有一些可选的属性:
 view-title - 视图标题文字
模板被载入导航视图ion-nav-view显示时,这个属性值将显示在导航栏ion-nav-bar中
 cache-view - 是否对这个模板视图进行缓存
允许值为:true | false,默认为true
 hide-back-button -是否隐藏导航栏中的返回按钮
当模板被载入导航视图时,如果之前有其他的模板,那么在导航栏ion-nav-bar上默认会自动 显示返回按钮(使用指令ion-nav-back-button定义)。点击该按钮将返回前一个模板。 hide-back-button的允许值为:true | false ,默认为false 注意:必须在导航栏中显式地声明返回按钮,否则即使将hide-back-button属性设为false, 这个按钮也不会出现:-)
 hide-nav-bar - 是否隐藏导航栏
允许值为:true | false ,默认为false

4、导航栏 : ion-nav-bar

ion-nav-bar有以下可选的属性:
 align-title - 标题对齐方式
允许值为: left | right | center。默认为center,居中对齐
 no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。
允许值为:true | false。默认为true,这意味着如果视图中的内容下拉很长,那么在任何时刻 点击导航栏都可以立刻回到内容的开头部分。

5、回退按钮 : ion-nav-back-button

6、视图特定按钮 : ion-nav-buttons

7、定制标题内容 : ion-nav-title

8、定制视图切换方式 : nav-transition

9、定制视图切换方向 : nav-direction

10、导航栏脚本接口 : $ionicNavBarDelegate

服务$ionicNavBarDelegate提供了控制导航栏的脚本接口:
 align([direction]) - 标题对齐方式。
参数direction是可选的,允许值为:left | right | center,缺省值为center。
 showBackButton([show]) - 是否显示回退按钮
参数show是可选的,允许值为:true | false,缺省值为true。
 showBar(show) - 是否显示导航栏
参数show的允许值为:true | false 。
 title(title) - 设置导航栏标题
参数title为HTML字符串。

11、访问历史 : $ionicHistory

ionic的导航框架会自动维护用户的访问历史栈,我们可以通过服务$ionicHistory管理访问轨迹:
 viewHistory() - 返回视图访问历史数据
 currentView() - 返回当前视图对象
 currentHistoryId() - 返回历史ID
 currentTitle([val]) - 设置或读取当前视图的标题
参数val是可选的。无参数调用currentTile()方法则返回当前视图的标题。
 backView() - 返回历史栈中前一个视图对象
如果从视图A导航到视图B,那么视图A就是视图B的前一个视图对象。
 backTitle() - 返回历史栈中前一个视图的标题
 forwardView() - 返回历史栈中的下一个视图对象
 currentStateName() - 返回当前所处状态名
 goBack() - 切换到历史栈中前一个视图
当然,前提是存在前一个视图。
 clearHistory() - 请空历史栈
除了当前的视图记录,clearHistory()将清空应用的全部访问历史

十六、ionic ion-tap选项卡以及 路由结合ion-tap详解

注意: 1. 不要把ion-tabs指令放在ion-content之内 2. ion-tab的内容应当放入ion-view指令内,否则ionic在计算布局时可能出错

1、ion-tabs 常用设置

(1)ion-tabs声明条带风格

(2)ion-tabs : 声明位置

2、ion-tabs 下面的 ion-tab : 标题文字、图标和徽章显示隐藏

(1)title - 标题文字

(2)icon - 标题图标

(3)icon-on - 被选中状态的标题图标

(4)icon-off - 未选中状态的标题图标

(5)badge - 标题徽章

(6)badge-style - 标题徽章样式

(7)hidden - 隐藏

(8)disabled - 禁止

3、ion-tabs 事件 和 $ionicTabsDelegate

(1)on-select - 选中事件

(2)on-deselect - 未选中事件

(3)ng-click - 点击事件

(4)ionicTabsDelegate

使用$ionicTabsDelegate服务,我们可以在脚本中控制选项卡对象: select(index) - 选中指定的选项页 index参数从0开始,第一个选项页的index为0,第二个为1,依次类推。 selectedIndex() - 返回当前选中选项页的索引号 如果当前没有选中的选项页,则返回 -1。

4、ion-tabs路由详解

(1) 触发状态迁移的几种方式(通俗的讲就是页面跳转的几种方式)
a. 调用$state.go() 方法,这是一个高级的便利方法;

b. 点击包含 ui-sref 指令的链接 Go State 1

c. 导航到与状态相关联的 url。
(2) 通过href方式页面切换需要指定 url

5、ionic中结合tab状态嵌套的几种方式

有三个嵌套的方法:
(1)使用“点标记法”,例如:.state('contacts.list', {})
(2)使用parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts'
(3)使用parent属性,指定一个父状态对象,例如:parent: contacts(contacts 是一个状态对象)

6、ionic路由结合tap实现页面切换

(1) 在ionic tab中定义ion-nav-view 并且加上name属性

(2)在ionic $stateProvider.state中定义view 并对应 ion-nav-view 中的name属性

7、ionic states 抽象状态abstract

十七、ionic侧边栏ion-side-menus 以及ion-tap结合侧边栏详解

1、侧边栏菜单 : ion-side-menus


  
  
 
 
  
  

2、侧边栏打开关闭切换指令 : menu-toggle/menu-close

3、ion-side-menu-content 属性设置

ion-side-menu-content指令有以下可选属性:

drag-content - 是否允许拖动内容打开侧栏菜单,默认为true。 允许值:true | false。当设置为false时,将禁止通过拖动内容打开侧栏菜单。

edge-drag-threshold - 是否启用边距检测。默认为false。 允许值:number | true | false。

如果设置为一个正数,那么只有当拖动发生在距离边界小于这个数值的情况下, 才触发侧栏显示。当设置为true时,使用默认的25px作为边距阈值。

如果设置为false或0,则意味着禁止边距检测,可以在内容区域的任何地方 拖动来打开侧栏。

4、侧边栏区域容器 : ion-side-menu 属性

ion-side-menu指令有以下属性:

side - 位于内容区的左边或右边 side属性是必须的。允许值:left | right。默认值为left。
width - 侧边栏的宽度 width属性是可选的,表示以像素为单位的侧栏菜单宽度。默认为275px。
is-enabled - 是否可用 is-enabled属性是可选的,声明该侧边栏是否可用,允许值为:true | false ,默认为true。 当侧边栏不可用时,拖拽内容或使用切换按钮都无法打开侧栏菜单。

expose-aside-when - 侧边栏自动显示条件表达式

默认情况下,侧边栏是隐藏的,需要用户向左或向右拖动内容,或者通过一个切换按钮来打开。 但是在有些场景下(比如,横放的平板)屏幕宽度足够大,这时,自动地显示侧边栏内容会更 合理。

5、脚本中控制侧边栏菜单接口 : $ionicSideMenuDelegate

脚本中控制侧边栏菜单接口,可以使用服务$ionicSideMenuDelegate:
toggleLeft([isOpen]) - 是否打开左侧栏菜单
参数isOpen是可选的,默认为true ,表示打开左侧栏菜单。
toggleRight([isOpen]) - 是否打开右侧栏菜单
参数isOpen是可选的,默认为true ,表示打开右侧栏菜单。
getOpenRatio() - 侧栏菜单打开的宽度占其总宽度比例
例如,一个100px宽的侧栏菜单,如果打开50px,那么其比例为50%,getOpenRatio()将 返回0.5 。
isOpen() - 当前侧栏菜单是否打开
不管是左侧栏菜单,还是右侧栏菜单,只要处于打开状态,isOpen()都返回 true。
isOpenLeft() - 左侧栏菜单是否打开
当左侧栏菜单处于打开状态时,isOpenLeft()返回true。
isOpenRight() - 右侧栏菜单是否打开
当右侧栏菜单处于打开状态时,isOpenRight()返回true。
canDragContent([canDrag]) - 是否允许拖拽内容以打开侧栏菜单
canDrag参数是可选的,如果canDrag为true,表示允许通过拖拽内容打开侧栏菜单。
edgeDragThreshold(value) - 设置边框距离阈值
当参数value为false或0时,意味着在内容区域任何位置进行拖拽都可以打开侧栏菜单。 如果参数value为一个数值,意味着只有当拖拽发生的位置距边框不大于此数值时,才能打开 侧栏菜单。 参数value为true等同于将value设置为25。

6、脚本ion-tap结合 ion-side-menus一起使用

十八、ionic列表

1、列表 : ion-list

ion-list指令提供以下属性用来定制列表的外观:

type - 列表种类 type属性是可选的,可用来设置列表的种类: list-inset | card。这两种列表 都产生内嵌的效果,区别在于card列表有边框的阴影效果。

show-delete - 是否显示成员内的delete按钮 show-delete属性是可选的。如果在成员内有delete按钮(ion-delete-button),使用这个 属性来通知列表是否显示元素删除按钮。允许的值为:true | false

show-reorder - 是否显示成员内的reorder按钮 show-reorder属性是可选的。如果在成员内有reorder按钮(ion-reorder-button),使用这个 属性来通知列表是否显示元素重排序按钮。允许的值为:true | false

can-swipe - 是否支持滑动方式显示成员option按钮 can-swipe属性是可选的。如果在成员内有option按钮(ion-option-button),使用这个 属性来允许或禁止通过向左滑动成员来打开option按钮。允许的值为:true | false ,默认为true。

2、ion-list ion-item 成员

ion-option-button - 选项按钮。一个ion-item内可以包含多个选项按钮

ion-delete-button - 删除按钮。一个ion-item内最多有一个删除按钮

ion-reorder-button - 重排按钮。一个ion-item内最多有一个重排按钮

3、collection-repeat : 高性能的ng-repeat

collection-repeat指令接受一个枚举表达式,同时可以附加以下的属性:

item-width - 可选。声明重复元素的宽度 item-height - 可选。声明重复元素的高度

item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为3

force-refresh-images - 可选。滚动时是否强制刷新图像。允许值:true | false

4、脚本接口 : $ionicListDelegate

如果需要从脚本中控制列表元素,可以使用$ionicListDelegate服务:

showReorder([showReorder]) - 显示/关闭排序按钮

showReorder的允许值为:true | false。可以使用一个作用域上的表达式

showDelete([showDelete]) - 显示/关闭删除按钮

showDelete的允许值为: true | false。可以使用一个作用域上的表达式

canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮

canSwipeItems的允许值为:true | false。可以使用一个作用域上的表达式

closeOptionButtons() - 关闭所有选项按钮

十九、ionic表单输入ion-checkbox ion-radio ion-toggle ion-spinner

1.复选按钮 : ion-checkbox

2.单选按钮 :ion-radio

3. 开关按钮 : ion-toggle

4.等待指示器 : ion-spinner

二十、ionic动态组件 $ionicModal $ionicActionSheet $ionicPopup $ionicPopover $ionicLoading $ionicBackdrop

1.模态对话框 : $ionicModal

在ionic中使用模态对话框有三个步骤:

(1)声明对话框模板 使用ion-modal-view指令声明对话框模板,对话框模板通常置入 script内以构造内联模板:

(2)创建对话框对象 服务$ionicModal有两个方法用来创建对话框对象: fromTemplate(templateString,options) - 使用字符串模板 fromTemplateUrl(templateUrl,options) - 使用内联模板
这两个方法返回的都是一个对话框对象。

(3)操作对话框对象 对象框对象有以下方法用于显示、隐藏或删除对话框: show() - 显示对话框 hide() - 隐藏对话框 remove() - 移除对话框 isShown() - 对话框是否可视?

2.上拉菜单 : $ionicActionSheet

使用一个JSON对象定义上拉菜单选项,包括以下字段:

titleText - 上拉菜单的标题文本

buttons - 自定义按钮数组。每个按钮需要一个描述对象,其text字段用于按钮显示

cancelText - 取消按钮的文本。如果不设置此字段,则上拉菜单中不出现取消按钮

destructiveText - 危险选项按钮的文本。如果不设置此字段,则上拉菜单中不出现危险选项按钮

buttonClicked - 自定义按钮的回调函数,当用户点击时触发 cancel - 取消按钮回调函数,当用户点击时触发

destructiveButtonClicked - 危险选项按钮的回调函数,当用户点击时触发

cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true

cssClass - 附加的CSS样式类名称

3.弹出框 : $ionicPopup

在ionic中,使用$ionicPopup服务管理弹出框:

$ionicPopup.show(options) .then(function(){ //这个函数在弹出框关闭时被调用 });

show()方法返回的是一个promise对象,当弹出框关闭后,该对象被解析,这意味着 then()方法指定的参数函数此时将被调用。

show()方法的参数options是一个JSON对象,可以包括以下字段:

title - 弹出框标题文本

subTitle - 弹出框副标题文本

template - 弹出框内容的字符串模板

templateUrl - 弹出框内容的内联模板URL

scope - 要关联的作用域对象

buttons - 自定义按钮数组。按钮总是被置于弹出框底部

cssClass - 附加的CSS样式类

另外还有:alert(options) - 警告弹出框,仅包含一个按钮供关闭弹出框;confirm(options) - 确认弹出框,包含一个取消按钮和一个确认按钮;prompt(options) - 输入提示弹出框,包含一个文本输入框、一个取消按钮和一个确认按钮。

4.浮动框 : $ionicPopover

show() - 显示浮动框

hide() - 关闭浮动框

remove() - 移除浮动框

isShown() - 浮动框是否处于显示状态?

5.载入指示器 : $ionicLoading

在ionic中,使用$ionicLoading服务操作载入指示器:

show(options) - 显示载入指示器

hide() - 隐藏载入指示器
显示参数 show()方法的options参数是一个JSON对象,可以包含如下字段:

template - 模板字符串

templateUrl - 内联模板的Url

scope - 要绑定的作用域对象

noBackdrop - 是否隐藏背景幕

hideOnStateChange - 当切换到新的视图时,是否隐藏载入指示器

delay - 显示载入指示器之前要延迟的时间,以毫秒为单位,默认为0,即不延迟

duration - 载入指示器持续时间,以毫秒为单位。时间到后载入指示器自 动隐藏。默认情况下, 载入指示器保持显示状态,知道显示的调用hide()方法

6.背景幕 : $ionicBackdrop

retain() - 保持背景幕

release() - 释放背景幕

二十一、ionic幻灯指令 ion-slide-box

1、ion-slide-box : 属性设置定制播放行为

指令ion-slide-box有一些可选的属性可以定制其播放行为:

》does-continue - 是否循环切换

你可能注意到,刚才的示例中,开头的幻灯页只能向左滑动,最后的幻灯页只能向右滑动。 将does-continue属性值设为true,就可以让幻灯页组首尾连接起来,循环切换。

》auto-play - 是否自动播放

通过将auto-play属性设置为true,可以让幻灯页自动切换。切换的间隔默认是4000ms,可以 通过属性slide-interval进行调整。

》slide-interval - 自动播放的间隔时间,默认为4000ms

》show-pager - 是否显示分页器 分页器用来指示幻灯页的选中状态,位于幻灯片的底部。 允许值为:true | false

2、ion-slide-box : 事件及变量

指令ion-slide-box提供了可选的用于事件监听的属性:

pager-click - 分页器点击事件

pager-click属性应当设置为一个当前作用域上的函数调用表达式,这个函数将被 传入被点击的分页按钮对应的幻灯页序号:index

on-slide-changed - 幻灯页切换事件

on-slide-changed属性应当设置为一个当前作用域上的函数调用表达式,这个函数 将被传入当前幻灯页的序号:$index

active-slide - 当前幻灯页索引

active-slide属性应当设置为一个当前作用域上的变量,当幻灯片切换时,这个变 量同步的反应当前的幻灯页索引号

3、脚本接口: $ionicSlideBoxDelegate

可以使用服务$ionicSlideBoxDelegate在脚本中操作幻灯片对象:

update() - 重绘幻灯片

有时,比如当容器尺寸发生变化时,需要调用update()方法重绘幻灯片。

slide(to[,speed]) - 切换到指定幻灯页 参数to表示切换的目标幻灯页序号,参数speed是可选的,表示以毫秒 为单位的切换时间

enableSlide([shouldEnable]) - 幻灯片使能 参数shouldEnable的允许值为:true | false 。

previous() - 切换到前一张幻灯页

next() - 切换到后一张幻灯页

currentIndex() - 获得当前幻灯页的序号

slideCount() - 获得全部幻灯页的数量

 

转载于:https://www.cnblogs.com/liujiale/p/5955885.html

你可能感兴趣的:(json,javascript)