HBuilder开发App教程11-添加事项 作于2015-08-04

1438674782945061006.jpg

前言

鉴于前几节内容比较多,可能需要消化,所以本节就搞的简单点,主要讲添加事项


添加页

功能

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方法,详见这里


滴石

官网:http://uikoo9.com/dishi

源码:https://github.com/uikoo9/dishi


http://uikoo9.com/
更多精彩内容

求打赏(长按图片即可识别)~
微信 捐助列表:http://uikoo9.com/donate/

阅读:9423

HBuilder开发App入门-滴石