使用369平台使用Html5快速开发的新闻客户端，在这篇android之使用Html5开发的基础上。
实验apk:http://dev.369cloud.com/down/compile/15577
看看效果
都是使用封装好的代码，官方文档有说明，数据库在建立时使用了主外键的方式，这个也提供了模式 OTO
html 的body部分分为了上中下三部分
<body>
<div id="all" class="container box box-ov">
<div id="header" class="c-wh box c-307 box-ac box-pc" style="height:3em;">
<div id="titleName" class="box-f1 tx-c t-wh font2">新闻</div>
</div>
<div id="content" class="box-f1 c-wh">
</div>
<div id="footer" class="box box-s box-pc c-wh t-gra">
<div id="news" class="footerBtn box box-f1 box-ac box-pc padd-tb t-307">
<!--fa在线图标库 http://fontawesome.dashgame.com/-->
<span class="fa fa-newspaper-o font2"></span>
<span class="padd-l font1">新闻</span>
</div>
<div id="pic" class="footerBtn box box-f1 box-ac box-pc padd-tb">
<span class="fa fa-photo font2"></span>
<span class="padd-l font1">图集</span>
</div>
<div id="my" class="footerBtn box box-f1 box-ac box-pc padd-tb ">
<span class="fa fa-user font2"></span>
<span class="padd-l font1">我的</span>
</div>
</div>
</div>
</body><script>
// 创建一个view对象很简单，只需通过app的currentView方法即可。
var view = app.currentView();
domReady(function(require){
app.lockRotate(true);
if($.os.ios){
app.setStatusBarBackgroundColor('#307ab3');
app.statusBarFontColor(1);
}
var y = $('#header').height();// y 轴
// var height = view.getHeight()-y-$('#footer').height();//content高度
var height = $('#content').height();
// console.log(height);
var news = view.createPopover(0,y,0,height);// createPopover
var albums = view.createPopover(0,y,0,height);
var my = view.createPopover(0,y,0,height);
news.open("news_content.html");
//设置全局变量，存储 content 高度
app.storage.set("contentHeight", height);
//footerBtn 点击事件
$('.footerBtn').button(function(evt){
var page = $(evt).attr('id');
// 字体变色
$('.footerBtn').removeClass("t-307");
$('#' + page).addClass("t-307");// '#'+page 转型 id
if(page == "news"){
$('#titleName').html("新闻");//设置header 文字内容
news.open("news_content.html");
}else if(page == "pic"){
$('#titleName').html("图集");
albums.open("pic_content.html");
}else if(page == "my"){
$('#titleName').html("个人主页");
albums.open("my_content.html");
}
});
});
</script>
<script>
var dataSources;
domReady(function(require){
contentHeight = app.storage.get("contentHeight");
// tabMark 在整篇文档中,此对象只创建一次. 请不要重复创建.
var tabmark = app.require("tabMark");
setDataSource();
tabmark.setDataSource(dataSources);
// setFrame(x, y, width, height)
tabmark.setFrame(0,0,app.currentView().getWidth(),contentHeight);
tabmark.show();
});
function setDataSource(){
dataSources = {
titleFont:12.0, //文字大小
titleHighlightFont:15.0,//文字高亮大小
titleColor:"#009ACD",//文字颜色
titleHighlightColor:"#CD8500",//文字高亮颜色
vernierColor:"#00E5EE",//游标颜色
naviBgColor:"#ffffff",//导航条背景色
btnHeight:36.0,//导航条(按钮)高度
manyBtn:false,//true:多按钮模式(自适应按钮宽度) false:自动等距分割
EditButtonImg:"abc.png",//编辑按钮图片
interval: true, //分割线，android不支持
naviHidden:false, //是否隐藏导航条
defaultIndex:1,//默认开启的页面
dataSource:[
{
menu:'头条',
url:"news_first.html"
},
{
menu:'科技',
url:"news_technology.html"
},
{
menu:'体育',
url:'news_sports.html'
},
{
menu:'社会',
url:'news_sociology.html',
},
{
menu:'财经',
url:'news_finance.html'
},
{
menu:'汽车',
url:'news_car.html'
},
{
menu:'时尚',
url:'news_fashion.html'
},
{
menu:'历史',
url:'news_history.html'
}
]
}
};
</script>
/*请求新闻列表切填充新闻列表页面
* @param Json whereJson 查询新闻列表的条件
*/
var newsNowpage = 1;
var isLastPage = false;
var isLoading = false;
function getNewsListData(whereJson,count){
// getHeader();
var _news = _dt.DB.Tab("news_content");//对表的属性（列）操作 对表内数据的操作
// http://docs.369cloud.com/BaaS/shujucunchu/Js-sdk#getlistdata
var _option = {
page:newsNowpage,
size:10,
where:whereJson,
order:[["_edtm",1]]
};
// Failed to load resource: net::ERR_CONNECTION_REFUSED http://127.0.0.1:30007/
_news.getListData(_option,function(err){
if(whereJson.type == "technology"){
$hideProgress();
}
app.alert("网络请求超时,请检查网络");
},function(result){
// console.log(result.data.length);
// alert(result.data.length);
if(result.data.length==0){
isLastPage = true;
isLoading = false;
}
if(result.data.length>0 && !isLastPage){
//是否是最后一页，否：加载页加1；是：isLastPage是true；
newsNowpage += 1;
for(var i in result.data){
var newsInfo = result.data[i];
// 每次查询的结果的前三条做轮播图的
if(i<3 && result.current == 1){
var sliderHtmls = '';
sliderHtmls +='<div id="'+newsInfo._id+'" class="showInfo-js ui-slider-item w-100">';
sliderHtmls +='<div class="ui-slider-img banner bg-img1">';
sliderHtmls +='<div class="mar-t-11 t-wh opt-06 hei-2 box box-ps box-ac">';
sliderHtmls +='<div class="w-70 omit1">'+newsInfo.title+'</div>';
sliderHtmls +='</div>';
sliderHtmls +='</div>';
sliderHtmls +='</div>';
$("#slider-js").append(sliderHtmls);
$("#"+newsInfo._id).children().css("background-image", 'url("' + newsInfo.image + '")');
}else{
var listHtmls = '';
listHtmls += '<div id="'+newsInfo._id+'" class="showInfo-js box b-d2d mar-a padd-b">';
listHtmls += '<div class="wh-pic"><img src="'+newsInfo.image+'" class="wh-100"></div>';
listHtmls += '<div class="box box-f1 box-ov padd-l">';
listHtmls += '<div class="omit1 font1">'+newsInfo.title+'</div>';
listHtmls += '<div class="t-gra padd-t omit line2 box box-ps">'+newsInfo.brief+'</div>';
listHtmls += '</div>';
listHtmls += '</div>';
$("#dataBody-js").append(listHtmls);
}
}
$('#slider').slider( {
loop:true,
autoPlay:true,
speed:100,
dots:true,
guide : true,
mulViewNum:1
});
if(whereJson.type == "technology"){
$hideProgress();
}
//跳转到详情页面
$(".showInfo-js").button(function(btn,el){
app.storage.set("newsId",btn.id);
var win = app.createWindow();
win.open('newsDetail.html', 'newsDetail');
})
}else if(newsNowpage == 1 && result.data.length == 0){
var emptyHtml = '<div class="box box-f1 box-pc box-ac mar-t-3 font2">暂无数据</div>'
$(".body-js").html(emptyHtml);
}
if(isLastPage&&count==10){
app.alert("没有更多数据了","");
}
});
headerRefresher.completeRefresh();
footerRefresher.completeRefresh();
}附件：源码：https://github.com/CL-window/html5_news（Json里为数据库数据）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
