标签：mui nativejs hbuilder 开发app html5+
本节讲讲详情页，删除和退出，然后基本接近尾声了，希望大家有所收获。
点击待办事项，我跳转到详情页，可以看到事项的详情
<!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>
// 详情
detail = mui.preload(qiao.h.normalPage(‘detail‘));
在index中选哟将detail页面预加载进来。
// 查看详情
qiao.on(‘#todolist li‘, ‘tap‘, function(){
qiao.h.fire(‘detail‘, ‘detailItem‘, {id:$(this).data(‘id‘)});
});
在list页面添加点击事件，然后fire到detail页面
// 初始化
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插件，当长按待办事项的时候会显示删除选项，点击删除后执行操作。
<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>
需要在页面添加如上代码。
// 删除
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
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：mui nativejs hbuilder 开发app html5+
原文地址：http://blog.csdn.net/uikoo9/article/details/47304675
