<!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:centerposition:fixedtop:80pxwidth: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没有自带的数据库。需要用户自己连接数据库。Hbuildr作为前端软件，功能还是没有，特别的完善，不过你们的有一些软件儿，用途也是非常良好的，而且他的各种性能也是什么不错的，总的来说这个软件可以，值得信赖，而且它的发展前景也是特别良好的。我们也可以去相信这一款软件，去体验它真正的用途。如果有需求这类软件的朋友，可以去试用一下。这一个软件的性能还是非常不错的。
希望我的回答，对你有所帮助。
你是想问hbuilder中li前面的小圆点和文字对不齐怎么办吧，利用css即可对齐。利用css的vertical-align：middle即可实现对齐。
如果是文字输入的圆点，只要是中文输入法下，按~键就会出来·这种点。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）