• carousel: Contains the carousel object.所有项
• activeIndex: The index of the current active item.当前活跃项
• lastActiveIndex: The index of the previous active item.下一个活跃项
• waitToReturn()：滚动返回监听

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

$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">

  <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  usingmodifier（样式）, should-spin（布尔值）, animation and disabled attributes. modifier

• 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.

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

<span style="font-size:18px;"><ons-navigator var="myNavigator"></ons-navigator>
<script>
var options = {animation: 'slide', // What animation to useonTransitionEnd: 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>

<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" }):

<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个

<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>

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

<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工具条

<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.其他的控件

3.ons-loading-placeholder下载占位符

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

4.ons-template模板

5.ons 全局的