前言
鉴于前几节内容比较多，可能需要消化，所以本节就搞的简单点，主要讲添加事项
添加页
功能
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