接近尾聲
本節講講詳情頁，刪除和退出，然後基本接近尾聲了，希望大家有所收穫。
詳情頁
說明
點擊待辦事項，我跳轉到詳情頁，可以看到事項的詳情
detail.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">
<h4 id="detailTitle" style="text-align: center;">title</h4>
<p id="detailContent">content</p>
</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/detail.js"></script>
</body>
</html>index.js
// 詳情
detail = mui.preload(qiao.h.normalPage('detail'));
在index中選喲將detail頁面預加載進來。
list.js
// 查看詳情
qiao.on('#todolist li', 'tap', function(){
qiao.h.fire('detail', 'detailItem', {id:$(this).data('id')});
});
在list頁面添加點擊事件，然後fire到detail頁面
detail.js
// 初始化
mui.init({
keyEventBind : {
backbutton : false,
menubutton : false
}
});
// 所有方法都放到這裏
mui.plusReady(function(){
window.addEventListener('detailItem', detailItemHandler);
});
// 展示待辦事項
function detailItemHandler(event){
qiao.h.indexPage().evalJS("showBackBtn();");
var detailId =event.detail.id;
var sql = 'select * from t_plan_day_todo where id=' + detailId;
qiao.h.query(qiao.h.db(), sql, function(res){
if(res.rows.length > 0){
var data = res.rows.item(0);
$('#detailTitle').text(data.plan_title);
$('#detailContent').html(data.plan_content);
qiao.h.show('detail', 'slide-in-right', 300);
}
});
}
detail中禁用無關按鈕事件，然後監聽從list頁面fire過來的todoid，最後顯示待辦事項詳情。
刪除
說明
用到了mui的popover插件，當長按待辦事項的時候會顯示刪除選項，點擊刪除後執行操作。
list.html
<div class="mui-popover">
<div style="text-align:center;position:fixed;top:80px;width:90%;">
<ul class="mui-table-view">
<li class="mui-table-view-cell">滴石-操作</li>
<li class="mui-table-view-cell delli">刪除</li>
</ul>
</div>
</div>需要在頁面添加如上代碼。
list.js
// 刪除
qiao.on('.delli', 'tap', delItem);
// 刪除事項
function delItem(){
if(tapId){
qiao.h.update(qiao.h.db(), 'delete from t_plan_day_todo where id=' + tapId);
qiao.h.pop();
initList();
}
}
監聽點擊刪除的事件，並執行刪除操作，最後重新加載該頁面。
退出
簡單封裝了mui的退出，如下：
// 退出
qiao.h.exit = function(){
qiao.h.confirm('確定要退出嗎？', function(){
plus.runtime.quit();
});
};
這裏用到了一個提示框，相關代碼如下：
// 提示框相關
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);
};
qiao.h.confirm = function(options, ok, cancel){
var opt = $.extend({}, qiao.h.modaloptions);
opt.title = '確認操作';
if(typeof options == 'string'){
opt.content = options;
}else{
$.extend(opt, options);
}
plus.nativeUI.confirm(opt.content, function(e){
var i = e.index;
if(i == 0 && ok) ok();
if(i == 1 && cancel) cancel();
}, opt.title, opt.cbtn);
};
qiao.h.prompt = function(options, ok, cancel){
var opt = $.extend({}, qiao.h.modaloptions);
opt.title = '輸入內容';
if(typeof options == 'string'){
opt.content = options;
}else{
$.extend(opt, options);
}
plus.nativeUI.prompt(opt.content, function(e){
var i = e.index;
if(i == 0 && ok) ok(e.value);
if(i == 1 && cancel) cancel(e.value);
}, opt.title, opt.content, opt.cbtn);
};
更多教程：
HBuilder開發App教程：http://uikoo9.com/book/detail/3
更多學習筆記：http://uikoo9.com/book