HTML5+中动态构建列表并填充数据
部分代码参考demo----《历史上的今天》。
感谢作者的分享，愿好人一生平安，虽然只有两个页面，但是通过这个示例让我学会了5+中如何动态构建列表并填充数据，非常实用。
html部分：
<body>
<header class="mui-bar mui-bar-nav">
<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title">历史上的今天</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-divider">
<span class="fs14">今天：</span><span class="mui-badge mui-badge-blue" id="curdatestr"></span>
<span style="margin-left: 50px;"></span>
<span class="fs14">星期：</span><span class="mui-badge mui-badge-red" id="curdateweekstr"></span>
</li>
<ul class="mui-table-view" id="TIH_EventList_UL">
</ul>
</ul>
</div>
<pre name="code" class="html"></body>js脚本:
<script type="text/javascript">
window.onload = function() {
mui.init();
mui.plusReady(function() {
// for Android back event
mui.options.maintabid = mui.currentWebview.__uuid__;
// fill head
var curDate = new Date();
fillHeader(curDate);
// righticon add event
mui.addEventListenerBySelector("#info", "tap", function() {
plus.device.vibrate();
});
// ajax request data
getListData(curDate);
});
}
function fillHeader(cdate) {
mui.html('curdatestr', cdate.toString("yyyy年MM月dd日"));
mui.html('curdateweekstr', cdate.week());
}
function getListData(cdate) {
if (!mui.constMap.key_historyOnToday) {
mui.toast("请在app.js中配置KEY!!! ");
return;
}
plus.nativeUI.showWaiting("数据加载中，请稍候...");
console.log(plus.storage.getLength());
var existsCache = false;
for (var i = 0; i < plus.storage.getLength(); i++) {
var stVal = plus.storage.key(i);
console.log(stVal.substring(5).length + "========" + cdate.toString().length);
if (stVal.substring(5) == cdate.toString()) {
// exists cache date in curdate
existsCache = true;
break;
}
}
if (!existsCache) {
// clear all cache
plus.storage.clear();
}
var stKey = "main:" + cdate;
var cdata = plus.storage.getItem(stKey);
if (cdata) {
console.log("read cache");
// fill cached data
cdata = mui.readJson(cdata);
notifiULList(cdata);
} else {
console.log("read real data");
var url = 'http://japi.juhe.cn/toh/toh?key=' + mui.constMap.key_historyOnToday + 'dtype=json&v=1.0&month=' + cdate.month() + '&day=' + cdate.day();
mui.sendRequest(url, {}, function(result) {
if (result.success) {
var n = result.retval.result;
notifiULList(n);
plus.storage.setItem(stKey, mui.writeJson(n));
} else {
mui.toast(result.error);
}
}, 'json');
}
};
function notifiULList(cdataList) {
plus.nativeUI.closeWaiting();
var doc = document,
fragment = doc.createDocumentFragment(),
container = doc.getElementById("TIH_EventList_UL");
mui.each(cdataList, function(i, n) {
console.info(n.id)
notifiAndSetLiDetail(fragment, n);
});
container.appendChild(fragment);
mui.addEventListenerBySelector("a.aEvent", "tap", showDetail);
}
function notifiAndSetLiDetail(fragment, n) {
var doc = document,
li = doc.createElement("li"),
a = doc.createElement("a"),
img = doc.createElement("img"),
div = doc.createElement("div"),
p = doc.createElement("p");
li.setAttribute("class", "mui-table-view-cell mui-media");
console.info(n._id)//明明是_id 接口上说id 坑我
a.setAttribute("eid", n._id);
//a.addEventListener("click", showDetail(n.id)); //note:showDetail() has been called every times. i dont know why.
a.setAttribute("class", "aEvent");
img.setAttribute("class", "mui-media-object mui-pull-left");
img.setAttribute("style", "width: 42px; height: 42px;");
img.setAttribute("src", n.pic.isBlank() ? 'images/logo.png' : n.pic);
div.setAttribute("class", "mui-media-body");
div.innerText = n.title;
p.innerHTML = n.year + "年" + n.month + "月" + n.day + "日" + ", " + n.lunar;
li.appendChild(a);
a.appendChild(img);
a.appendChild(div);
div.appendChild(p);
fragment.appendChild(li);
}
function showDetail(o) {
var a = o.target.offsetParent;
if (a.tagName != 'A') {
// fix the end of line onclick event, it's return li not a, i dont know why.
return;
}
mui.openWindow({
id: "detail.html",
url: "detail.html",
show: {
autoShow: false
},
extras: {
eid: a.getAttribute("eid")
}
});
}
</script>根据原作者的提示，我找到了聚合数据这个网站，注册后获取了免费试用接口100次的机会，为了让这个app跑起来，真机测试很多次，后来在聚合网站上测试才发现返回的不是id，而是_id，话说我的心碎了，太不专业了吧，接口文档明摆着，你却返回不一致的东西，这不坑人吗。
看来以后还要注意，发现错误， 要大胆质疑，多多实践。
HTML5+中动态构建列表并填充数据的更多相关文章
- jplayer中动态添加列表曲目（js提取request中的list数据作为js参数使用）
jplayer 的播放列表使用如下: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplaye ...
- datatable动态添加，及填充数据
DataTable tblDatas = new DataTable("Datas"); tblDatas.Columns.Add("ID", Type.Get ...
- 使用 Razor 生成 HTML5 中的 data- 属性
在 HTML5 中, 可以使用 data- 属性来表示用户数据,这些数据甚至可以是 JSON 格式的数据,对 Web 前端开发带来很大的方便. 在 MVC 的 Razor 中,可以使用匿名对象来生成定 ...
- python中元组、列表、字典、集合知识
像列表一样处理字符串: 仅需要看字符串的首字符就知道如何处理该字符串的情况也很常见.例如,如果有一个姓与名的列表,您可以使用与列表相同的语法查看名与姓的第一个字符.这种看待字符串的方法叫做分片(sli ...
- MFC中List控件动态填充数据(LVN_GETDISPINFO)
在使用List控件的过程中,有时候List控件中需要添加大量的数据,如果使用InsertItem填充,会一次性将数据全部添加进List控件中,比较耗时.这里记录下如何动态添加List控件数据. 步骤 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 在微信框架模块中，基于Vue&Element前端，通过动态构建投票选项，实现单选、复选的投票操作
最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...
- Android 实现在Activity中操作刷新另外一个Activity数据列表
做android项目中遇到这样一个问题:有两个acticity,一个显示好友列表,另外一个显示会话列表,现在问题是在会话界面增加一个添加好友功能,添加好友后要求实时的刷新好友列表. 想了想,找了两种方 ...
- [转载]java向word模板中填充数据（总结）
使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...
随机推荐
- ZJOI2002 昂贵的聘礼
题目描述 Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请 ...
- java修饰符——transient
一.背景 上星期去CRM上开发一个功能,该系统里面有自动分页,需要在实体类里加入一个分页变量 // 分页 private PageInfo pageInfo = new PageInfo(); 这个本 ...
- [Unity]模拟雨水的折射效果
用GrabPass做的小玩具. 并不是真的计算了折射,只是简单地扰动了uv,对于雨水来说效果已经足够好了. Shader代码: Shader "Unlit/Rain" { Prop ...
- java解析XML之DOM解析和SAX解析（包含CDATA的问题）
Dom解析功能强大,可增删改查,操作时会将XML文档读到内存,因此适用于小文档: SAX解析是从头到尾逐行逐个元素解析,修改较为不便,但适用于只读的大文档:SAX采用事件驱动的方式解析XML.如同在电 ...
- 【Windows使用笔记】使Onedrive同步任意文件夹
因为度盘实在是有点垃圾,经常看的剧之类的或者其他软件资源啥的动不动就被封. 所以跑去某宝买了一个5T的企业子账号,安全性不清楚,重要的隐私数据反正都用移动硬盘备份了.主要就是存一些资源性的文件吧.而且 ...
- vue-实现倒计时功能
JavaScript 创建一个 countdown 方法,用于计算并在控制台打印距目标时间的日.时.分.秒数,每隔一秒递归执行一次. msec 是当前时间距目标时间的毫秒数,由时间戳相减得到,我们将以 ...
- selenium===splinter模块和selenium异曲同工
学习文档: http://splinter.readthedocs.io/en/latest/ 安装以后用它来实现163邮箱的登陆操作:*和selenium一样,splinter同样需要对frame进 ...
- lsb_release查看当前系统的发行版信息
Linux除了用uname -r查看系统版本信息外,还可以用lsb_release. 安装: yum install -y redhat-lsb-core 使用: lsb_release -a
- Canvas 高级
一.Canvas 高级 1.变换--位移 translate(x, y) 2.变换-缩放 scale(xS, yS) 3.变换-旋转 rotate(弧度) 4.环境的保存和释放 save() rest ...
- [New learn]AutoLayout调查基于code
代码https://github.com/xufeng79x/TestAutolayout-code2 0.插在前面 必须关闭view的自动缩放掩码,自动缩放掩码是autolayout出现之前系统管理 ...