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;
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。