HBuilder开发App教程12-详情页，删除和退出

/ 845 次浏览/ APP开发

0e2442a7d933c8956d7483e9d11373f08202001d.jpg

接近尾声

本节讲讲详情页，删除和退出，然后基本接近尾声了，希望大家有所收获。


详情页

说明

点击待办事项，我跳转到详情页，可以看到事项的详情

detail.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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

1
2
// 详情
    detail = mui.preload(qiao.h.normalPage('detail'));

在index中选哟将detail页面预加载进来。

list.js

1
2
3
4
// 查看详情
    qiao.on('#todolist li', 'tap', function(){
        qiao.h.fire('detail', 'detailItem', {id:$(this).data('id')});
    });

在list页面添加点击事件，然后fire到detail页面

detail.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 初始化
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

1
2
3
4
5
6
7
8
<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

1
2
3
4
5
6
7
8
9
10
// 删除
    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的退出，如下：

1
2
3
4
5
6
// 退出
qiao.h.exit = function(){
    qiao.h.confirm('确定要退出吗？', function(){
        plus.runtime.quit();
    });
};

这里用到了一个提示框，相关代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// 提示框相关
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教程11-添加事项

下一篇 >>

HBuilder开发App教程13-ios调试以及发布【完结】

相关文章