Mobile Angular UI 笔记

时间 2019-12-09

原文原文链接

Mobile Angular UI 笔记

项目中须要用到该组件，可是网上中文资料有限，因此在此进行了翻译下，以便后续方便查找使用，如遇描述不合理的地方，敬请纠正，谢谢。css

官网地址： http://mobileangularui.com/

组件

tab 页签

<div ui-state="activeTab" default="1">
  <ul class="nav nav-tabs">
    <li ui-class="{'active': activeTab == 1}">
      <a ui-set="{'activeTab': 1}">Tab 1</a>
    </li>
    <li ui-class="{'active': activeTab == 2}">
      <a ui-set="{'activeTab': 2}">Tab 2</a>
    </li>
    <li ui-class="{'active': activeTab == 3}">
      <a ui-set="{'activeTab': 3}">Tab 3</a>
    </li>
  </ul>

  <div ui-if="activeTab == 1">
    <h3 class="page-header">Tab 1</h3>
    <p><!-- ... --></p>
  </div>

  <div ui-if="activeTab == 2">
    <h3 class="page-header">Tab 2</h3>
    <p><!-- ... --></p>
  </div>

  <div ui-if="activeTab == 3">
    <h3 class="page-header">Tab 3</h3>
    <p><!-- ... --></p>
  </div>
</div>

开关按钮 ui-switch

<ui-switch  ng-model="invoice.paid"></ui-switch>

段落 section

用于放主题内容，默认没有padding 和背景色。与此相似的是具备padding和背景色.container-fluid。html

<div class="section">
  <!-- contents -->  
</div>

布局git

section-wide 去除左右padding
section-condensed 移除纵向padding
section-break 增长 margin-bottom and shadow (很是适用于同一个视图中有多个section的状况)
section-default

主题angularjs

.section-default
.section-primary
.section-success
.section-info
.section-warning
section-danger

<div class="section section-wide section-info">
  <!-- contents -->  
</div>

分段导航 Segmented Navigation

<div class="btn-group justified">
  <a href="#/page1">Page 1</a>
  <a href="#/page2">Page 2</a>
  <a href="#/page3">Page 3</a>
</div>

模态框 Modals 和 Overlays

模态框与Bootstrap 3中的模态框相似，区别是这里经过ngIf/uiIf or ngHide/uiHide来隐藏和显示模态框，默认状况下设置的.modal样式为显示状态.modal {display:block}。能够与·ngAnimate一块儿实现动画效果。web

若是想让模态框覆盖整个页面，能够将模态框绑定为body元素的子元素，通常会与指令contentFor/yieldTo一块儿使用。例如：数据结构

<body ng-app="myApp">

  <!-- ... -->

  <!-- Modals and Overlays -->
  <div ui-yield-to="modals"></div>

</body>

<div ui-content-for="modals">
  <div class="modal"><!-- ... --></div>
</div>

Modalsapp

<div ui-content-for="modals">
  <div class="modal" ui-if="modal1" ui-state='modal1'>
    <div class="modal-backdrop in"></div>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" 
                  ui-turn-off="modal1">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
        </div>
        <div class="modal-footer">
          <button ui-turn-off="modal1" class="btn btn-default">Close</button>
          <button ui-turn-off="modal1" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Overlay
Overlay 跟modals类似，模糊的毛玻璃背景效果使它看起来更加接近手机原生模态框。经过增长.modal-overlay样式实现。ide

<div ui-content-for="modals">
  <div class="modal modal-overlay" ui-if='modal2' ui-state='modal2'>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close"
                  ui-turn-off="modal2">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, amet harum reiciendis enim adipisci magni fugit suscipit eaque corporis? Saepe eius ipsum optio dolorum a qui adipisci, reprehenderit totam temporibus!</p>
        </div>
        <div class="modal-footer">
          <button ui-turn-off="modal2" class="btn btn-default">Close</button>
          <button ui-turn-off="modal2" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

可滚动区域 Scrollable Area

在写移动web应用时，咱们一般须要处理滚动和position:fixed的问题。
因为有些设备不支持fixed定位，而致使fixed定位元素会在滚动的过程当中被隐藏。旋转和滑块功能与滚动条也常常会存在冲突。
标记为可滚动区域的方式很是简单：布局

// 这段代码将触发指令，为.scrollable节点设置一个overthrow实例。
<div class="scrollable">
  <div class="scrollable-content">...</div>
</div>

Headers and footers
设置.scrollable-header/.scrollable-footer样式类后，就不须要处理css高度和位置，就可使得fixed定位的头部和底部不会与滚动形成冲突。动画

<div class="scrollable">
  <div class="scrollable-header"><!-- ... --></div>
  <div class="scrollable-content"><!-- ... --></div>
  <div class="scrollable-footer"><!-- ... --></div>
</div>

下拉组件 Dropdowns

.dropdown-menu默认老是显示可见的，因此你须要经过ui-show/ui-hide/ui-if/ng-* or ngAnimate控制元素的隐藏显示动画效果。

<div class="scrollable">
  <div class="scrollable-header"><!-- ... --></div>
  <div class="scrollable-content"><!-- ... --></div>
  <div class="scrollable-footer"><!-- ... --></div>
</div>

scrollTop
.scrollable-content控制器提供了scrollTo(offsetOrElement, margin)方法，

var elem = element(document.getElementById('myScrollableContent'));
var scrollableContentController = elem.controller('scrollableContent');

// - Scroll to top of containedElement
scrollableContentController.scrollTo(containedElement);

// - Scroll to top of containedElement with a margin of 10px;
scrollableContentController.scrollTo(containedElement, 10);

// - Scroll top by 200px;
scrollableContentController.scrollTo(200);

ui-scroll-bottom/ui-scroll-top
设置ui-scroll-bottom/ui-scroll-top 指令，滚动到滚动区域边缘的可以触发特定事件。

<div class="scrollable">
  <div class="scrollable-content section" ui-scroll-bottom="loadMore()">
    <ul>
      <li ng-repeat="item in items">
        {{item.name}}
      </li>
    </ul>
  </div>
</div>

手风琴 Accordion

<div class="panel-group" ui-state="myAccordion" ui-default="2">

  <div class="panel panel-default" ng-repeat="i in [1,2,3]">
    <div class="panel-heading" ui-set="{'myAccordion': i}">        
      <h4 class="panel-title">
          Collapsible Group Item #{{i}}
      </h4>
    </div>
    <div ui-if="myAccordion == {{i}}">
      <div class="panel-body">
        {{lorem}}
      </div>
    </div>
  </div>
</div>

导航栏 Navbars

Bootstrap 默认的导航栏对于响应式页面是很是炫酷的，但对于小屏幕来讲却不够友好，而且fixed定位也不能很好地区分定位顶部或者底部的位置。mobile angular ui提供了更加合适手机屏幕显示的导航栏。

下图展现了fixed定位和absolute定位的区别：

导航栏的基础样式 .navbar-app，定位样式：.navbar-absolute-top 、 .navbar-absolute-bottom，基本使用方式以下：

<div class="app">
  <div class="navbar navbar-app navbar-absolute-top">
    <!-- ... -->
  </div>

  <div class="navbar navbar-app navbar-absolute-bottom">
    <!-- ... -->
  </div>

  <div class="app-body">
    <ng-view></ng-view>
  </div>
</div>

顶部导航栏一般结构为：一个或两个动做按钮包围的居中标题，常见的有返回按钮或菜单按钮。.navbar-brand-center 可以确保标题居中且不会覆盖两边的按钮。参考以下布局：

<div class="navbar navbar-app navbar-absolute-top">

  <div class="navbar-brand navbar-brand-center">
    Navbar Brand
  </div>

  <div class="btn-group pull-left">
    <div class="btn btn-navbar">
      Left Action
    </div>
  </div>

  <div class="btn-group pull-right">
    <div class="btn btn-navbar">
      Right Action
    </div>
  </div>
</div>

侧边栏 sidebars

增长.sidebar-left and .sidebar-right样式，能够实现左、右边栏。

<div class="sidebar sidebar-left">
  <div class="scrollable">
    <h1 class="scrollable-header app-name">My App</h1>
    <div class="scrollable-content">
      <div class="list-group" ui-turn-off='uiSidebarLeft'>
        <a class="list-group-item" href="#/link1">Link 1
          <i class="fa fa-chevron-right pull-right"></i></a>
        <a class="list-group-item" href="#/link2">Link 2
          <i class="fa fa-chevron-right pull-right"></i></a>
      </div>
    </div>
  </div>
</div>
 
<div class="sidebar sidebar-right">
  <!-- -->
</div>

侧边栏交互: 引擎栏经过SharedState暴露各自的状态：uiSidebarLeft 和 uiSidebarRight。使用ui-turn-off='uiSidebarLeft' 或者 ui-turn-off='uiSidebarLeft' 切换侧边栏的状态，侧边栏外部进行点击时默认会关闭侧边栏。

SharedState 服务方法

SharedState中的共享状态能够被认为是一个由id标识的全局变量。SharedState服务提供了外部方法用于建立。它充当UI元素之间的总线，在UI之间以共享状态。保留状态的数据结构不在angularJS scope范围内，所以它们不会只有在须要的时候才会进行脏检查（暂未能理解）。当没有scope进行引用时，共享状态会自行销毁。
全部 ui-*指令都能与SharedState模块进行交互，比传统的angularjs更有优点。

// 传统scope变量
$scope.activeTab = 1;

$scope.setActiveTab = function(n) {
  $scope.activeTab = n;
};

initialize

SharedState.initialize(scope, id, [options])

initialize经过ID定义scope绑定的状态，而且使得该变量在其余模块应用中能够进行共享。一个共享状态能够绑定到一个或者多个scope中，并在垃圾收集器当中计算绑定数量，当scope销毁时对应的绑定数量也会相应递减，当绑定数量为0时，这个状态就会自行销毁。

参数	类型	描述
scope	scope	绑定状态的域
id	string	惟一的状态名称
[options]	object	选项
[options.defaultValue]	object	初始化状态值，只有在状态还未初始化时有效
[options.exclusionGroup]	string	为状态定义排除组，意为：若是组内的一个状态被设置为true,那组内的其余状态将被自动赋值为false,单选按钮组案例以下：

<div class="btn-group">
      <a href class="btn btn-default" ui-turn-on="button1" ui-shared-state="button1" ui-class="{'active': button1}" ui-exclusion-group="myButtons">1</a>
      <a href class="btn btn-default" ui-turn-on="button2" ui-shared-state="button2" ui-class="{'active': button2}" ui-exclusion-group="myButtons">2</a>
      <a href class="btn btn-default" ui-turn-on="button3" ui-shared-state="button3" ui-class="{'active': button3}" ui-exclusion-group="myButtons">3</a>
    </div>

setOne

SharedState.setOne(id, value) 给一个状态赋值。

setMany

SharedState.setMany(object) 给多个状态赋值，例如：

SharedState.setMany({ activeTab: 'firstTab', sidebarIn: false });

set

SharedState.set(idOrMap, [value]) 是setOne 和 setMany 的统一写法。当只有一个参数，且参数为Object时至关于setMany，当有两个参数，且第一个参数为string时，至关于setOne。

turnOn

SharedState.turnOn(id)将状态设置为true, 若是状态初始化时有设置exclusionGroup 则同时会将组内其余状态设置为false(turn off)。

turnOff

与 turnOn 做用相反。需注意，初始化时的exclusionGroup参数对它依然有效。

toggle

SharedState.toggle(id) 将状态设置为相反的值。

get

SharedState.get(id) ⟶ any 获取状态值

isActive

SharedState.isActive(id) ⟶ bool 判断状态值是否为true

active

SharedState.active(id) ⟶ bool 是isActive的别名

isUndefined

SharedState.isUndefined(id) ⟶ bool 判断状态是否未定义

has

SharedState.has(id) ⟶ bool 判断状态是否存在

referenceCount

SharedState.referenceCount(id) ⟶ integer 获取状态关联的数量

equal

SharedState.equals(id, value) ⟶ bool 判断状态值是否全等于（===）value

eq

是equal的别名

values

SharedState.values() ⟶ object 获取全部状态值，返回格式为 {statusId: statusValue}。需记住它只是返回克隆值，记录当前的状态值，并不会对后续修改进行追踪记录。

ShareState 服务事件

http://mobileangularui.com/do...:mobile-angular-ui/module:core/module:sharedstate/

mobile-angular-ui.state.initialized.ID

当状态初始化时会在$rootScope上进行广播该事件

mobile-angular-ui.state.destroyed.ID

当状态销毁时会在$rootScope上进行广播该事件

mobile-angular-ui.state.changed.ID

当状态值改变时会在$rootScope上进行广播该事件

$scope.$on('mobile-angular-ui.state.changed.uiSidebarLeft', function(e, newVal, oldVal) {
  if (newVal === true) {
    console.log('sidebar opened');
  } else {
    console.log('sidebar closed');
  }
});

指令

ui-shared-state

调用SharedState#initialize方法进行初始化值，可同时设置默认值ui-default = ''
Sharestate服务和ui-命令：ShareState容许使用最基本的angular和富angular命令去建立复杂的组件：

只用HTMl就能够建立复杂的组件
使你的控制器脱离UI逻辑
使得ng-click能够作其余的事情
任何一个时间均可以触发UI的动做
把组件状态发送给URL
用剩下的UI分享组件的情形

不适用状态分享服务的处理方式

app.controller(function($scope){
  $scope.activeTab = 1;
  $scope.setActiveTab = function(tab){
    $scope.activeTab = tab;
  };
});

<div class="tab-nav">
  <a ng-click="setActiveTab(1)">Tab1</a>
  <a ng-click="setActiveTab(2)">Tab2</a>
  <a ng-click="setActiveTab(3)">Tab3</a>
</div>
<div class="tabs">
  <div ng-if="activeTab == 1">Tab1</div>
  <div ng-if="activeTab == 2">Tab2</div>
  <div ng-if="activeTab == 3">Tab3</div>  
</div>

ui-shared-state 建立了一种能够在声明的被绑定的元素内能够随时访问的全局变量。

<div class="tab-nav" ui-state='activeTab'>
  <a ui-set="{activeTab: 1}">Tab1</a>
  <a ui-set="{activeTab: 2}">Tab2</a>
  <a ui-set="{activeTab: 3}">Tab3</a>
</div>
<div class="tabs">
  <div ui-if="activeTab == 1">Tab1</div>
  <div ui-if="activeTab == 2">Tab2</div>
  <div ui-if="activeTab == 3">Tab3</div>
</div>

ui-state

已被弃用

ui-class

ui-class 为 ng-class的简化版，用来获取SharedState中的值，语法只能为： {'className': expr}

<ui-shared-state id="activeTab" default="1"></ui-shared-state>

  <ul class="nav nav-tabs">
    <li ui-class="{'active': activeTab == 1}">
      <a ui-set="{'activeTab': 1}">Tab 1</a>
    </li>
    <li ui-class="{'active': activeTab == 2}">
      <a ui-set="{'activeTab': 2}">Tab 2</a>
    </li>
  </ul>

  <div ui-if="activeTab == 1">
    <h3 class="page-header">Tab 1</h3>
    <p>{{lorem}}</p>
  </div>
  
  <div ui-if="activeTab == 2">
    <h3 class="page-header">Tab 2</h3>
    <p>{{lorem}}</p>
  </div>

ui-if、ui-show 、 ui-hide

与 ng-if、ng-show、ui-hide相似，不过ui-if、ui-show、`ui-hide'针对SharedState中的状态

<a class="btn btn-block btn-lg btn-primary scrollable-footer" ui-toggle="searchBar">
    <i class="fa fa-search"></i>
    <span ui-hide="searchBar">Show</span>
    <span ui-show="searchBar">Hide</span>
    Search Bar
  </a>

ui-toggle、ui-turnOff、ui-turnOn、ui-set

当元素上的事件触发时会调用sharedstate＃toggle、sharedstate＃turnOff、sharedstate＃turnOn、SharedState#set方法对状态进行切换、关闭、打开、设置为对应值。

ui-exclusion-group

该指令即 initialize方法中[options.exclusionGroup]参数：SharedState.initialize(scope, id, [options])

手势

过拽drag

http://mobileangularui.com/do...:mobile-angular-ui/module:gestures/module:drag/

var dragOptions = {
  transform: $drag.TRANSLATE_BOTH,
  start:  function(dragInfo, event){},
  end:    function(dragInfo, event){},
  move:   function(dragInfo, event){},
  cancel: function(dragInfo, event){}
};

$drag.bind(element, dragOptions, touchOptions);

swipe

http://mobileangularui.com/do...:mobile-angular-ui/module:gestures/module:swipe/

触摸 touch

http://mobileangularui.com/do...:mobile-angular-ui/module:gestures/module:touch/

转换 transform

http://mobileangularui.com/do...:mobile-angular-ui/module:gestures/module:transform/

core模块

activeLinks

http://mobileangularui.com/do...:mobile-angular-ui/module:core/module:activelinks/

capture

http://mobileangularui.com/do...:mobile-angular-ui/module:core/module:capture/

ui-yield-to定义了一个占位符，内部html被认为是默认的。其内容将被ui-content-for指令进一步替换。

// home.html
<div class="navbar navbar-app navbar-absolute-top">
    <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
      首页 <!-- 这里是默认title，当进入accordion.html页面时会被替换为ui-content-for="title"中的内容 -->
    </div>
    <div class="btn-group pull-left">
      <!-- -->
    </div>
    <div class="btn-group pull-right" ui-yield-to="navbarAction">
      <!-- -->
    </div>
  </div>
      
// accordion.html
<div ui-content-for="title">
  <span>Accordion</span>
</div>
<!-- -->

outerClick

提供指令，指定点击/点按事件发生在元素外部时的行为。例如用来点击菜单外部元素时关闭菜单。

<div class="btn-group">
  <a ui-turn-on='myDropdown' class='btn'>
    <i class="fa fa-ellipsis-v"></i>
  </a>
  <ul
    class="dropdown-menu"
    ui-outer-click="Ui.turnOff('myDropdown')"
    ui-outer-click-if="Ui.active('myDropdown')"
    role="menu"
    ui-show="myDropdown"
    ui-shared-state="myDropdown"
    ui-turn-off="myDropdown">

    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
    <li class="divider"></li>
    <li><a>Separated link</a></li>
  </ul>
</div>

touchmoveDefaults

http://mobileangularui.com/do...:mobile-angular-ui/module:core/module:touchmovedefaults/

提供指令和服务阻止鼠标移动时的默认行为。
ui-prevent-touchmove-defaults 该指令经过touchmove.preventDefault实现取消触摸事件时元素的默认行为。

<body ng-app='myApp' ui-prevent-touchmove-defaults>
    <!-- ... -->
  </body>

若是你但愿内部元素保持默认的触摸行为，如滚动，你能够经过给元素增长scrollable指令实现，也能够经过allowTouchmoveDefault服务恢复默认行为，即：

allowTouchmoveDefault 服务

// 恢复默认的触摸行为
 allowTouchmoveDefault(myelem);

// 在知足条件的状况下恢复元素默认的触摸行为
allowTouchmoveDefault(myelem, function(touchmove){
  return touchmove.pageY > 100;
});