1.carousel 輪播圖的用法總結

界面方法：

     1.用於滿屏

<ons-carousel fullscreen swipeable overscrollable auto-scroll>  <ons-carousel-item>     Carousel Item 1  </ons-carousel-item>  <ons-carousel-item>     Carousel Item 2  </ons-carousel-item></ons-carousel>

   2. <ons-carousel-cover>用於頂部顯示的內容，一直在頂部

  3.initial-index 初始化顯示的項目

  4.滾動方向 可以左右，也可以上下 directionattribute. The possible values are horizontal(default) or vertical.

    5.單項的 item-width or item-height  豎向滾動，只能調節橫寬；橫的話，這能調節高

    6.swipeable屬性 可以用手滾動

  7.auto-refresh 數據自動刷新

  8.auto-scroll-ratio 滾動的比率

控制器方法：（angularjs）

用法：可以用var=myCarousel 命名，用此名稱，在控制器中調用

1.next下一個：myCarousel.next({ animation: "none", callback: function(){// Fired when the scroll is done }});

2.first(options), last(options)

3.setActiveCarouselItemIndex(index, options)指定活躍的當前項

4.如果用js添加<ons-carousel-item>必須用 auto-refresh或refresh()者刷新

5.事件方法：postchange滾動變化的過程

carousel: Contains the carousel object.所有項
activeIndex: The index of the current active item.當前活躍項
lastActiveIndex: The index of the previous active item.下一個活躍項
waitToReturn()：滾動返回監聽

事件方法：demo：

<pre name="code" class="javascript">app.controller("MyController", function($q, $scope) {
  $scope.status = "Init";
  ons.ready(function() {
    carousel.on('overscroll', function(event) {
      var deferred = $q.defer();
      $scope.status = "Overscroll " + event.direction;
      $scope.$apply();
      event.waitToReturn(deferred.promise);
      window.setTimeout(function() {
        deferred.resolve();
        $scope.status = "Finish";
      }, 1500);
    })
  });

2.`ons-lazy-repeat懶加載的用法`

第一大點：懶加載依賴一個代理加載所有數據：Delegate object in AngularJS用angularJS

$scope.MyDelegate = {
  configureItemScope: function(index, itemScope) {
    console.log("Created item #" + index);
    itemScope.item = {
      name: 'Item #' + (index + 1)
    };
  },
  calculateItemHeight: function(index) {
    return 40;
  },
  countItems: function() {
    return 10000000;
  },
  destroyItemScope: function(index, scope) {
    console.log("Destroyed item #" + index);
  }
};

configureItemScope contains the information about the items, which can be dynamically created or loaded from a array of items.（加載數據）
calculateItemHeight returns the height of an item. It could be different for every item.（每項的高）
countItems returns the total number of items in the list.（展示的項數）
destroyItemScope is an optional method that will be triggered everytime an item is unloaded. This can be used to destroy elements and remove event listeners in order to avoid memory leaks.（沒顯示的項目，毀掉）

第二大點：動態的加載數據 angularJS

configureItemScope: function(index, itemScope) {
  if (!itemScope.item) {
    itemScope.canceler = $q.defer();
    itemScope.item = {
      title: 'Item #' + (index + 1),
      label: '',
      desc: '',
      rand: Math.random()
    };

    $http.get('https://baconipsum.com/api/?type=meat-and-filler&sentences=1', {timeout: itemScope.canceler.promise})
    .success(function(data) {
      itemScope.item.desc = data[0];
      itemScope.item.label = data[0].substr(0, data[0].indexOf(" ")) + 'bacon';
    })
    .error(function() {
      itemScope.item.desc = 'No bacon lorem ipsum';
      itemScope.item.label = 'No bacon';
    });

  }
},
destroyItemScope: function(index, itemScope) {
  itemScope.canceler.resolve();
}

3.Pull Hook`<ons-pull-hook>`用於an `<ons-page>` or an `<ons-scroller>`

<ons-pull-hook ng-action="load($done)" var="loader">
  <span ng-switch="loader.getCurrentState()">
    <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
    <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
    <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
  </span>
</ons-pull-hook>

initial: default state before any user interaction, the element remains in this status until it’s totally dragged down, going beyond its height limit.（）
preaction: if the component is in this state it will execute its action if it’s released. It’s still possible to cancel the action by dragging the page up again.
action: the pull hook will be in this state while its action is running. After the $done function is called it will return to the initial state.
ng-action: used to specify custom behavior when the page is pulled down. A $done function is available to tell the component that the action is completed.
height: specifies the height of the component. When pulled down further than this value it will switch to the “preaction” state. The default value is “64px”.

4.Alert Dialog`<ons-alert-dialog>有三種`

第一種：Alert dialog

ons.notification.alert() 
一個button ，一段提醒文字

 $scope.alert = function(material) {
    ons.notification.alert({
      message: 'An error has occurred!',
      modifier: material ? 'material' : undefined
    });
  }

第二種：Confirm dialogons.notification.confirm() but can have multiple buttons.兩個按鈕

  $scope.confirm = function(material) {
    var mod = material ? 'material' : undefined;
    ons.notification.confirm({
      message: 'Are you sure you want to continue?',
      modifier: mod,
      callback: function(idx) {
        switch (idx) {
          case 0:
            ons.notification.alert({
              message: 'You pressed "Cancel".',
              modifier: mod
            });
            break;
          case 1:
            ons.notification.alert({
              message: 'You pressed "OK".',
              modifier: mod
            });
            break;
        }
      }
    });
  }

第三種：Prompt dialogons.notification.prompt() 有輸入框

 $scope.prompt = function(material) {
    var mod = material ? 'material' : undefined;
    ons.notification.prompt({
      message: "Please enter your age",
      modifier: mod,
      callback: function(age) {
        ons.notification.alert({
          message: 'You are ' + parseInt(age || 0) + ' years old.',
          modifier: mod
        });
      }
    });
  }

也可以自己定義創建：

<pre name="code" class="javascript"><ons-template id="alert-dialog.html">
<ons-alert-dialog var="alertDialog">
  <div class="alert-dialog-title"><strong style="color: #ff3333">Critical Alert!</strong></div>
  <div class="alert-dialog-content">
    An error has occurred!
  </div>
  <div class="alert-dialog-footer">
    <button class="alert-dialog-button" ng-click="alertDialog.hide(); alertDialog.show()">OK</button>
  </div>
</ons-alert-dialog>
</ons-template>

<script>
ons.ready(function() {
  ons.createAlertDialog('alert-dialog.html').then(function(alertDialog) {
    alertDialog.show();
  });
});
</script>

5. Dialog 自定義dialog

爲了顯示dialog,必須創建一個模板包含<ons-dialog>模板template，然後通過ons.createDialog()函數創建

`show()調用這個dialog`<ons-template id="dialogcontent.html">

相關方法：1. show(options), hide(options)Shows or hides the dialog. You can specify animations and callback in the options parameter to get more control.

isShown()Returns true if the dialog is shown.判斷是否在顯示
destroy()Hides the dialog and remove all related DOM elements.銷燬
setDisabled(disabled), isDisabled()Makes the dialog disable and prohibits any interaction from the user.禁用
setCancelable(cancelable), isCancelable()Set the dialog cancelable, which means it will close automatically when pressing the back button.

  <ons-dialog>
    Any HTML code here
  </ons-dialog>
</ons-template>
<script>
ons.ready(function() {
  ons.createDialog('dialogcontent.html').then(function(dialog) {
    dialog.show();
  });
});
</script>

<ons-template id="login.html">
  <ons-dialog var="dialog" cancelable>
    <ons-toolbar inline>
      <div class="center">
        Login
      </div>
    </ons-toolbar>
    <p>
      <input placeholder="Username" id="username" class="text-input">
    </p>

    <p>
      <input type="password" placeholder="Password" id="username" class="text-input">
    </p>

    <p>
      <ons-button modifier="large" ng-click="dialog.hide()">Sign in</ons-button>
    </p>
  </ons-dialog>
</ons-template>

5. button using`modifier（樣式）`, `should-spin（布爾值）`, `animation` and `disabled` attributes. `modifier`

6.Text input

Text input <inputclass="text-input"id="my-input"> 輸入一條文字
Text area <textareaclass="textarea"id="my-textarea"></textarea> 一大段段文字
Search input <inputtype="search"class="search-input">搜索框

Check box and radio button 多選框，單選框

Check box and radio button are provided as CSS components. Therefore, use the following HTML snippet to display each component.

<label class="checkbox">  <input type="checkbox">
  <div class="checkbox__checkmark"></div>
  <span class="ons-checkbox-inner"></span>
</label>

<label class="radio-button">
  <input type="radio">
  <div class="radio-button__checkmark"></div>
</label>

7.Grid `<ons-row>` and `<ons-col> 用法見下面的例子：`

 <ons-row align="bottom">
    <ons-col>
      <div class="Demo">
        This cell should be bottom-aligned.
      </div>
    </ons-col>
    <ons-col>
      <div class="Demo">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua.
      </div>
    </ons-col>
    <ons-col>
      <div class="Demo">
        This cell should be bottom-aligned.
      </div>
    </ons-col>
  </ons-row>

8.ons-iconOnsen UI offers over 400 icons provided by Font Awesome and over 500 icons by Ionicons.

不同的圖標庫，提供的圖標不一樣

Using Font Awesome：<ons-iconicon="fa-angle-left"></ons-icon>

Using Ionicons： <ons-iconicon="ion-angle-left"></ons-icon>

9.ons-gesture-detector手勢

use ng-gestureeventname if you prefer an AngularJS way.

<ons-gesture-detector ng-swipeleft="doSomething()">
  <div id="detect-area" style="width: 100px; height: 100px;">
    Swipe Here
  </div>
</ons-gesture-detector>

Following gestures are supported.

Drag gestures: drag, dragleft, dragright, dragup, dragdown 拖向左右上下
Hold gestures: hold, release 常安
Swipe gestures: swipe, swipeleft, swiperight, swipeup, swipedown 輕掃
Tap gestures: tap, doubletap 點擊
Pinch gestures: pinch, pinchin, pinchout 捏合
Other gestures: touch輕觸, transform變形, rotate旋轉

10.ons-keyboard-active 鍵盤響應

<div ons-keyboard-active>
  This will only be displayed if the software keyboard is open.
</div>
<div ons-keyboard-inactive>
  There is also a component that does the opposite.
</div>

11 List 列表 Onsen UI supports scrollable lists by using <ons-list> and <ons-list-item> tags.

1.ons-list-header

<ons-list>
  <ons-list-header>Header Text</ons-list-header>
  <ons-list-item>Item</ons-list-item>
  <ons-list-item>Item</ons-list-item>
</ons-list>

2.ons-list modifier可修改

12.ons-modal 蒙版可以在蒙版上加東西show()hide()getDeviceBackButtonHandler()

<ons-modal var="modal">
  <ons-icon icon="ion-load-c" spin="true"></ons-icon>
  <br>
  <br> Please wait.
  <br>Closing in 2 seconds.
</ons-modal>

13 Page Navigation

<ons-navigator> is a page stack manager + transition animator 堆棧管理加動畫沒有內容是個頂部controller 加nav 用 add a toolbar on top of the page

1.入新頁面add a new page to the stack, use pushPage()也可以傳遞參數

<span style="font-size:18px;"><ons-navigator var="myNavigator"></ons-navigator>
<script>
var options = {
  animation: 'slide', // What animation to use
  onTransitionEnd: function() {} // Called when finishing transition animation
};
myNavigator.pushPage("page2.html", options);
</script></span>

傳遞參數

<span style="font-size:14px;">myNavigator
  .pushPage("page2.html", {
    data: {
      param1: 'foo',
      param2: 'bar'
    }
  })
  .then(function(page) {
    console.log("Parameter passed: ", page.data)
  })</span>

返回安卓ios：myNavigator.popPage() 安卓設備返回，自動獲取 navigator’s popPage()

如果ihone的

<ons-toolbar>
  <div class="left"><ons-if platform="ios"><ons-back-button>Back</ons-back-button></ons-if></div>
  <div class="center">Page Title</div>
</ons-toolbar>

<ons-navigator var="myNavigator"></ons-navigator><script>myNavigator.popPage();</script>

2.動畫效果4種pushPage() and popPage() method can specify the following animation patterns: slide, lift, fadeand none.
navigator.pushPage("page2.html", { animation: "slide" }):

過度動畫也能定製

3.方法：navigator.getCurrentPage()得到當前頁面

navigator.getPages()得到Returns an array of page objects from the navigator.

navigator.insertPage(index, page, options)插入頁面

navigator.replacePage(page, options)替換頁面Replaces the current page with the specified one

<ons-navigator> has several events defined: prepush, postpush, prepop, postpop

14.ons-sliding-menu 滑動菜單
1.主要屬性：

menu-page 滑動菜單

main-page 主頁面

swipeable 手滑動

swipe-target-width 滑動寬度

max-slide-distance 菜單寬度

direction 方向"left" and "right"

type reveal (default), push and overlay

2.事件

setMainPage(pageUrl, [options])

setMenuPage(pageUrl, [options])

openMenu([options])

closeMenu([options])

toggleMenu([options])

<span style="font-size:14px;"><ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>
<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>
   <p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
  </ons-page>
</ons-template>
<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button οnclick="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>
    <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
  </ons-page>
</ons-template>
<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" οnclick="menu.setMainPage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" οnclick="menu.setMainPage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template></span>

15.ons-tabbar, ons-tab <ons-tabbar> component and <ons-tab> 3個-5個

1.主要屬性：ons-tab

page 添加頁面

icon 圖標

active-icon 活躍圖標

label tab 中間添加label

active Boolean設置活躍

<span style="font-size:14px;"><ons-tabbar position="top">
  <ons-tab page="page1.html" label="Page 1" icon="fa-square" active="true"></ons-tab>
  <ons-tab page="page2.html" label="Page 2" icon="fa-square"></ons-tab>
  <ons-tab page="page3.html" label="Page 3" icon="fa-square"></ons-tab>
</ons-tabbar></span>

<span style="font-size:14px;"><ons-tab page="page.html">
  <div ons-tab-active>
  </div>
  <div ons-tab-inactive>
  </div></span><span style="font-size: 16px;">
</ons-tab></span>

<ons-tabbar>

hide-tabs 顯示Boolean

animation "none", "slide" and "fade". Default is "none". Optional.

position "bottom" and "top"

2.事件：
There are prechange, postchange and reactive events in <ons-tabbar>.

<span style="font-size:14px;">ons.ready(function() {
  var myTabbar = document.querySelector("ons-tabbar")
  myTabbar.addEventListener("prechange", function(e) {
    if (e.index == 1) {
      e.cancel();
    }
  })
})</span>

setActiveTab(index,
options)

getActiveTabIndex()

on(eventName, listener)

16.ons-popover信息提示框
1.常用屬性

direction"up", "down", "left" and "right".

cancelable 點擊取消

animation "none" or "fade"

mask-color background mask

2.常用方法

show(target, [options])

hide([options])

isShown()

destroy()

setCancelable(cancelable)

<span style="font-size:14px;"><script>
ons.ready(function() {
  ons.createPopover('popover.html').then(function(popover) {
    popover.show('#mybutton');   
  });
});
</script>
<script type="text/ons-template" id="popover.html">
  <ons-popover cancelable>
    <p style="text-align: center; opacity: 0.5;">This popover will choose which side it's displayed on automatically.</p>
  </ons-popover>
</script></span>

17.ons-toolbar工具條

1. <ons-toolbar> or <ons-bottom-toolbar>

toolbar is divided into 3 sections (left, center, and right）

2.<ons-back-button>

<span style="font-size:14px;"><ons-toolbar>
  <div class="left"><ons-toolbar-button>Button</ons-toolbar-button></div>
  <div class="center">Title</div>
  <div class="right"><ons-toolbar-button><ons-icon icon="ion-navion" size="28px"></ons-icon></ons-toolbar-button></div>
</ons-toolbar></span>

18.其他的控件

1.ons-if-orientation portrait and landscape 橫屏樹屏

2.ons-if-platform平臺判斷

Either "opera", "firefox", "safari", "chrome", "ie", "android", "blackberry", "ios" or "windows".

3.ons-loading-placeholder下載佔位符

<span style="font-size:14px;"><div ons-loading-placeholder="page.html">
  Loading...
</div></span>

4.ons-template模板

5.ons 全局的

ready 等Onsen UI 初始化後，調用此方法
enableAutoStatusBarFill() 狀態欄填充

disableAutoStatusBarFill() 狀態欄不填充

findParentComponentUntil(name, [dom])找父視圖DOM

<divons-keyboard-active> This will only be displayed if the software keyboard is open.</div><divons-keyboard-inactive> There is also a component that does the opposite.</div>

大樹之殤

發佈了34 篇原創文章 · 獲贊 33 · 訪問量 5萬+

私信關注

onSenUI 常用UI組件筆記

界面方法：

控制器方法：（angularjs）

2.`ons-lazy-repeat懶加載的用法`

3.Pull Hook`<ons-pull-hook>`用於an `<ons-page>` or an `<ons-scroller>`

4.Alert Dialog`<ons-alert-dialog>有三種`

5. Dialog 自定義dialog

`show()調用這個dialog`<ons-template id="dialogcontent.html">

5. button using`modifier（樣式）`, `should-spin（布爾值）`, `animation` and `disabled` attributes. `modifier`

6.Text input

Check box and radio button 多選框，單選框

7.Grid `<ons-row>` and `<ons-col> 用法見下面的例子：`

8.ons-iconOnsen UI offers over 400 icons provided by Font Awesome and over 500 icons by Ionicons.

9.ons-gesture-detector手勢

1.ons-list-header

2.ons-list modifier可修改

onSenUI 配置環境

angular ckeditor 編輯文字

TypeScript 學習筆記之插件安裝

provide httpProvider 中注入指令injecto

ECMASript 之數組學習筆記

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

onSenUI 常用UI組件 筆記

界面方法：

控制器方法：（angularjs）

2.ons-lazy-repeat懶加載的用法

3.Pull Hook<ons-pull-hook>用於an <ons-page> or an <ons-scroller>

4.Alert Dialog<ons-alert-dialog>有三種

5. Dialog 自定義dialog

show()調用這個dialog<ons-template id="dialogcontent.html">

5. button usingmodifier（樣式）, should-spin（布爾值）, animation and disabled attributes. modifier

6.Text input

Check box and radio button 多選框，單選框

7.Grid <ons-row> and <ons-col> 用法見下面的例子：

8.ons-iconOnsen UI offers over 400 icons provided by Font Awesome and over 500 icons by Ionicons.

9.ons-gesture-detector手勢

1.ons-list-header

2.ons-list modifier可修改

onSenUI 常用UI組件筆記

2.`ons-lazy-repeat懶加載的用法`

3.Pull Hook`<ons-pull-hook>`用於an `<ons-page>` or an `<ons-scroller>`

4.Alert Dialog`<ons-alert-dialog>有三種`

`show()調用這個dialog`<ons-template id="dialogcontent.html">

5. button using`modifier（樣式）`, `should-spin（布爾值）`, `animation` and `disabled` attributes. `modifier`

7.Grid `<ons-row>` and `<ons-col> 用法見下面的例子：`