HBuilder开发App教程11-添加事项
来源:互联网 发布:淘宝充流量多久到账 编辑:程序博客网 时间:2024/06/06 07:34
前言
鉴于前几节内容比较多,可能需要消化,所以本节就搞的简单点,主要讲添加事项
添加页
功能
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做了封装,
第二行是监听左上角的按钮点击事件
第三行是监听右上角的后退按钮(进入添加页后右上角变为后退按钮)
对应方法:
// showAddfunction 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方法,详见这里。
更多教程:
HBuilder开发App教程:http://uikoo9.com/book/detail/3
更多学习笔记:http://uikoo9.com/book
- HBuilder开发App教程11-添加事项
- HBuilder开发App教程10-完成事项
- HBuilder开发App教程
- HBuilder开发App教程
- HBuilder开发App教程06-首页
- HBuilder开发App教程07-列表页
- HBuilder开发App
- HBuilder开发App简介
- HBuilder开发App
- HBuilder开发App 01
- hbuilder+dcloud开发APP
- HBuilder开发App教程05-滴石和websql
- HBuilder开发App教程08-几种页面打开方式
- HBuilder开发App教程09-侧滑菜单
- HBuilder开发App教程12-详情页,删除和退出
- HBuilder开发App教程13-ios调试以及发布【完结】
- HBuilder开发App教程01-推开前端开发App的大门
- 介绍hbuilder开发打包app
- Redis Geo:Redis新增位置查询功能
- HDU1114_Piggy-Bank
- 斐波那契数列算法及时间复杂度分析
- Oracle 11g R2+RAC+ASM+redhat安装详解2
- 基于UBUNTU的NODEJS开发环境搭建
- HBuilder开发App教程11-添加事项
- 在Win7中运行某些软件时,突然提示出错信息“应用程序无法启动,因为应用程序的并行配置不正确。有关详细信息,请参阅应用程序事件日志,或使用命令行sxstrace.exe工具。”
- asmack在openfire中发送自定义属性、节点的消息
- hdu 2844 Coins dp
- BZOJ 3781 小B的询问 序列莫队算法
- Codeforces 4C
- nutch2.2.1抓取流程
- HD 1789 Doing Homework again【贪心】
- 汤姆猫