前言
鑑於前幾節內容比較多，可能需要消化，所以本節就搞的簡單點，主要講添加事項
添加頁
功能
1.點擊左上角的圖標，彈出添加頁
2.填寫內容，將事項添加到todo表中，隱藏添加頁，顯示列表頁
3.進入添加頁後頂部圖標的變化
4.默認提示
頁面
1.index頁面需要創建添加頁，監聽跳轉添加的事件，以及改變按鈕的方法
2.add頁填寫內容，fire事件到list頁面
3.list頁監聽添加事件，添加內容
代碼
index.js
index.js中，plusready後：
// 添加
add = mui.preload(qiao.h.normalPage('add'));
qiao.on('.adda', 'tap', showAdd);
qiao.on('.mui-icon-back', 'tap', hideAdd);
第一行是預加載添加頁面，這個之前說過了，normalPage只是對style做了封裝，
第二行是監聽左上角的按鈕點擊事件
第三行是監聽右上角的後退按鈕（進入添加頁後右上角變爲後退按鈕）
對應方法：
// showAdd
function showAdd(){
showBackBtn();
qiao.h.show('add', 'slide-in-bottom', 300);
}
function hideAdd(){
hideBackBtn();
qiao.h.getPage('add').hide();
// qiao.h.getPage('detail').hide();
}
function showBackBtn(){
$('.menua').removeClass('mui-icon-bars').addClass('mui-icon-back');
$('.adda').hide();
}
function hideBackBtn(){
$('.menua').removeClass('mui-icon-back').addClass('mui-icon-bars');
$('.adda').show();
}
比較簡單，就是當進入添加頁後將左上角修改爲後退按鈕，右上角的添加按鈕隱藏掉，
退出添加頁的方法正好相反，都做提供。
add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- mui -->
<link type="text/css" rel="stylesheet" href="@/css/mui.min.css"/>
<script type="text/javascript" src="@/js/mui.min.js"></script>
</head>
<body>
<div class="mui-content-padded">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="待辦事項標題" id="addTitle">
</div>
<div class="mui-input-row">
<textarea rows="14" placeholder="待辦事項內容" id="addContent"></textarea>
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-block mui-btn-primary addItemBtn">添加</button>
</div>
</div>
<!-- jquery -->
<script type="text/javascript" src="@/js/lib/jquery-1.11.2.min.js"></script>
<!-- qiao.js -->
<script type="text/javascript" src="@/js/lib/qiao.js"></script>
<!-- app -->
<script type="text/javascript" src="@/js/app/add.js"></script>
</body>
</html>
用了mui中的輸入框和按鈕樣式，出來的效果看頂部的圖片
add.js
// 初始化
mui.init({
keyEventBind : {
backbutton : false,
menubutton : false
}
});
// 所有方法都放到這裏
mui.plusReady(function(){
resetPage();
qiao.on('.addItemBtn', 'tap', addItem);
});
// 重置頁面
function resetPage(){
$('#addContent').val('');
$('#addTitle').val('');
}
// 添加待辦事項
function addItem(){
var title = $.trim($('#addTitle').val());
var content = $.trim($('#addContent').val()).replace(/\n/g, '<br/>');
if(!title){
qiao.h.alert('請填寫待辦事項標題！');
}else{
qiao.h.getPage('add').hide();
resetPage();
qiao.h.fire('list', 'addItem', {title:title, content:content});
}
}
初始化，將不需要的按鈕事件屏蔽，
監聽添加按鈕事件，然後將標題和內容通過fire的方式傳到list頁面，
在list頁面操作是爲了add頁面的添加效果流暢。
list.js
在plusready中監聽add頁的fire事件：
window.addEventListener('addItem', addItemHandler);
對應方法：
// 添加待辦事項
function addItemHandler(event){
// 主界面按鈕修改
qiao.h.indexPage().evalJS("hideBackBtn();");
var db = qiao.h.db();
var title = event.detail.title;
var content = event.detail.content ? event.detail.content : '暫無內容！';
qiao.h.query(db, 'select max(id) mid from t_plan_day_todo', function(res){
var id = (res.rows.item(0).mid) ? res.rows.item(0).mid : 0;
qiao.h.update(db, 'insert into t_plan_day_todo (id, plan_title, plan_content) values (' + (id+1) + ', "' + title + '", "' + content + '")');
$('#todolist').prepend(genLi({id:id+1, 'plan_title':title, 'plan_content':content})).show();
});
}
首先修改按鈕，
其次操作數據庫，基本都是上節講的內容，
這裏沒有將列表重新加載了一遍，而只是將添加想prepend到了list頁面，也是爲了流暢。
兩個效果
添加頁從底部進入效果
添加頁的顯示不是簡單的顯示出來，而是用了一個從底部進入的效果，
所有的webview調用show方法的時候都可以 添加效果，
詳見
http://www.dcloud.io/docs/api/zh_cn/webview.html#plus.webview.show
http://www.dcloud.io/docs/api/zh_cn/webview.html#plus.webview.AnimationTypeShow
默認的提示框
當沒有填寫待辦事項標題的時候，你會看到一個提示框，調用的qiao.h.alert('請填寫待辦事項標題！');
// 提示框相關
qiao.h.modaloptions = {
title : 'title',
abtn : '確定',
cbtn : ['確定','取消'],
content : 'content'
};
qiao.h.alert = function(options, ok){
var opt = $.extend({}, qiao.h.modaloptions);
opt.title = '提示';
if(typeof options == 'string'){
opt.content = options;
}else{
$.extend(opt, options);
}
plus.nativeUI.alert(opt.content, function(e){
if(ok) ok();
}, opt.title, opt.abtn);
};
稍作封裝，底層是調用的nativeUI的alert方法，詳見這裏。
更多教程：
HBuilder開發App教程：http://uikoo9.com/book/detail/3
更多學習筆記：http://uikoo9.com/book