<!doctype html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title></title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<link href="css/mui.min.css" rel="stylesheet" />
|
<link rel="stylesheet" href="node_modules/weui/dist/style/weui.min.css"/>
|
|
<!--<link href="css/datouwang.css" rel="stylesheet" type="text/css" />-->
|
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
|
<script type="text/javascript" src="js/koala.min.1.5.js"></script>
|
|
|
<style>
|
.mui-table-view-chevron .mui-table-view-cell{
|
padding-right: 15px !important;
|
}
|
#pullrefresh{
|
font-family: "SimHei", "Helvetica", "Arial", "sans-serif";
|
font-size:15px;
|
}
|
.number{
|
font-size:12px;
|
}
|
|
.mui-table-view-cell{
|
height:105px;
|
}
|
.left_img{
|
width:25%;
|
height: 100%;
|
background-color:pink;
|
float:left;
|
|
}
|
.left_img img{
|
height:100%;
|
width:100%;
|
}
|
.right_content{
|
color:#fff;
|
width:60%;
|
height:100%;
|
/*background-color:yellow;*/
|
float: left;
|
padding:10px 0 0 5px;
|
position: relative;
|
/*border:1px solid #000000;*/
|
}
|
.right_content .title{
|
font-size:15px;
|
}
|
.right_content .data_time{
|
position: absolute;
|
right:0px;
|
bottom:0px;
|
font-size:13px;
|
/*margin-top:20px;*/
|
|
}
|
.open{
|
float: left;
|
vertical-align: middle;
|
|
|
}
|
.open img{
|
|
width:16px;
|
height:16px;
|
position: absolute;
|
top:40%;
|
right:6%;
|
}
|
|
|
/*轮播*/
|
#box {
|
position: relative;
|
width: 100%;
|
height: 172px;
|
background: #fff;
|
/*border-radius: 5px;*/
|
/*border: 8px solid #fff;*/
|
margin: 0px auto;
|
}
|
|
#box .list {
|
position: relative;
|
width: 100%;
|
height: 170px;
|
overflow: hidden;
|
border: 1px solid #ccc;
|
}
|
|
#box .list li {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 170px;
|
opacity: 0;
|
transition: opacity 0.5s linear
|
}
|
|
#box .list li.current {
|
opacity: 1;
|
}
|
|
#box .count {
|
display:none;
|
position: absolute;
|
right: 0;
|
bottom: 5px;
|
}
|
|
#box .count li {
|
color: #fff;
|
float: left;
|
width: 20px;
|
height: 20px;
|
cursor: pointer;
|
margin-right: 5px;
|
overflow: hidden;
|
background: #F90;
|
opacity: 0.7;
|
border-radius: 20px;
|
}
|
|
#box .count li.current {
|
color: #fff;
|
opacity: 0.7;
|
font-weight: 700;
|
|
}
|
.title_news{
|
height:50px;
|
background-color:#000000;
|
padding:0 15px;
|
color: #ffffff;
|
/*margin-bottom:-10px;*/
|
}
|
.title_news div{
|
padding-top:5px;
|
}
|
.title_news .close{
|
float: left;
|
width:10%;
|
}
|
.title_news .nav{
|
float: right;
|
width:10%;
|
}
|
body{
|
filter: Alpha(Opacity=50) /* for IE */
|
background-color: rgba(0, 0, 0, 0.5); /*for FF*/
|
}
|
.mui-table-view-cell{
|
background-image:url("images/news/bg.png");
|
}
|
.banner img{
|
width:100%;
|
height:207px;
|
}
|
|
</style>
|
</head>
|
|
<body>
|
|
|
|
|
<!--下拉刷新容器-->
|
|
|
|
|
|
|
|
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
|
<div class="mui-scroll">
|
<!--banner-->
|
<div class="banner" style="line-height:0">
|
<img src="images/news/banner.png" alt="" />
|
</div>
|
|
|
<ul class="mui-table-view mui-table-view-chevron" style="line-height:1.6">
|
|
<!--<li class="mui-table-view-cell">-->
|
|
<!--<div class="left_img">-->
|
<!--<img src="images/01.jpg" alt="" />-->
|
<!--</div>-->
|
|
<!--<div class="right_content">-->
|
<!--<div class="title">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>-->
|
<!--<div class="data_time">2016-03-12</div>-->
|
<!--</div>-->
|
|
|
<!--</li>-->
|
|
|
</ul>
|
|
|
<!--<div class="mui-table">-->
|
<!--<div class="mui-table-cell mui-col-xs">-->
|
<!--<h4 class="mui-ellipsis">'+entity.title+' 教委动态</h4>'+-->
|
<!--'<span class="mui-ellipsis-2">'+content+' 新闻类型</span>-->
|
<!--<p class="mui-h6 mui-ellipsis">发布人：'+entity.peoples+' updateUserId更新人ID</p>-->
|
<!--</div>-->
|
<!--<div class="mui-table-cell mui-col-xs-3 mui-text-right">-->
|
<!--<span class="mui-h5">'+timeStr+' updateTime创建时间</span>-->
|
<!--</div>-->
|
<!--</div>-->
|
|
|
</div>
|
</div>
|
|
|
<!--<script>-->
|
<!--var box=document.getElementById('box');-->
|
<!--var uls=document.getElementsByTagName('ul');-->
|
<!--var imgs=uls[0].getElementsByTagName('li');-->
|
<!--var btn=uls[1].getElementsByTagName('li');-->
|
<!--var i=index=0; //中间量，统一声明；-->
|
<!--var play=null;-->
|
<!--console.log(box,uls,imgs,btn);//获取正确-->
|
|
<!--//图片切换, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单 在css里面-->
|
<!--function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应-->
|
<!--for(i=0;i<btn.length;i++ ){-->
|
<!--btn[i].className=''; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。-->
|
<!--btn[a].className='current';-->
|
<!--}-->
|
<!--for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同-->
|
<!--imgs[i].style.opacity=0;-->
|
<!--imgs[a].style.opacity=1;-->
|
<!--}-->
|
<!--}-->
|
<!--//切换按钮功能，响应对应图片-->
|
<!--for(i=0;i<btn.length;i++){-->
|
<!--btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住-->
|
<!--btn[i].onmouseover=function(){-->
|
<!--show(this.index);-->
|
<!--clearInterval(play); //这就是最后那句话追加的功能-->
|
<!--}-->
|
<!--}-->
|
|
<!--//自动轮播方法-->
|
<!--function autoPlay(){-->
|
<!--play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了-->
|
<!--index++;-->
|
<!--index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。-->
|
<!--show(index);-->
|
<!--},1000)-->
|
<!--}-->
|
<!--autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了-->
|
|
<!--//div的鼠标移入移出事件-->
|
<!--box.onmouseover=function(){-->
|
<!--clearInterval(play);-->
|
<!--};-->
|
<!--box.onmouseout=function(){-->
|
<!--autoPlay();-->
|
<!--};-->
|
<!--//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。-->
|
|
<!--</script>-->
|
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
|
<script src="js/mui.min.js"></script>
|
<script src="js/common.js" ></script>
|
|
|
|
|
|
<script type="text/javascript">
|
// if(sessionCache.getSessionCashe("userToken") == null){
|
// location.href="login.html";
|
// }
|
mui_.init({
|
load:true,
|
pull:true,
|
callback:function(){
|
|
mui.ajax(
|
'http://www.fschool365.cn/auth/news/searchPageable.json', {
|
data: JSON.stringify({
|
dataDto: {cstNewsTypeId: "16"},
|
cstNewsTypeId: "16",
|
page:0,
|
size:6
|
}),
|
dataType:'json',
|
async : false,
|
type: 'post', //HTTP请求类型
|
headers: {
|
'Content-Type': 'application/json',
|
'Authorization':'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJoamppYW93ZWkiLCJMb2dpblVzZXIiOiIzNGNiOTMyMGFhNmUxMWU2YTkyNGMwNWE2MTk1MjljNyIsImlhdCI6MTQ3OTQ0ODI1N30.f7bKhrQGI5vQVGKD7v9DvVDnpMm8oEIjhv2--Z6Xqcg'
|
// 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJyZGZ6LWFxIiwiTG9naW5Vc2VyIjoiMGRmNjFlZTA3ZjlmMTFlNjQ4NTExOTY4MTFjMjdkMGEiLCJpYXQiOjE0NzgwNDk5MTJ9.8hLxwecuFgMssqtUqkV4XPEZQz7jPvZ3oyoGyP4fEQ4'
|
// sessionCache.getSessionCashe("userToken")
|
|
},
|
success: function(data) {
|
$.each(data.data.pageList.content, function (index, entity) {
|
var dateTime = new Date();
|
dateTime.setTime(entity.createTime);
|
var timeStr = ((dateTime.getMonth() + 1) < 10 ? "0" + (dateTime.getMonth() + 1) : (dateTime.getMonth() + 1)) + "-" + (dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate()) + " " + (dateTime.getHours() < 10 ? "0" + dateTime.getHours() : dateTime.getHours()) + ":" + (dateTime.getMinutes() < 10 ? "0" + dateTime.getMinutes() : dateTime.getMinutes());
|
// var contentElement = jQuery(entity.content);
|
// var content = $(contentElement).text().length > 40 ? $(contentElement).text().substring(0,40)+"..." : $(contentElement).text();
|
var li ='<li class="mui-table-view-cell"><div class="left_img"><img src="images/shuijiao.jpg" alt="" /> </div><div class="right_content">'+
|
'<div class="title">' + entity.title + '</div><div class="data_time">' + timeStr + '</div></div><div class="open"><img src="images/news/open.png" alt=""/></div></li>';
|
$(".mui-table-view").prepend(li);
|
|
|
|
$(li).bind("tap", function () {
|
|
sessionCache.setSessionCashe("newsInfo", entity, sessionCache.json_value);
|
window.open("newsInfo.html");
|
mui.openWindow({
|
id: 'newsInfo',
|
url: 'newsInfo.html'
|
});
|
});
|
|
|
|
});
|
|
|
|
}
|
,
|
error: function (xhr, type, errorThrown) {
|
// 异常处理；
|
console.log(type);
|
}
|
|
|
});
|
|
|
}
|
});
|
</script>
|
</body>
|
|
</html>
|
