hs
/
hbghj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
							<!doctype html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>湖北智慧水运</title>
<link href="../css/mui.min.css" rel="stylesheet">
<style>
*{
    margin: 0;
    padding:0;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-text-size-adjust:none;
}
html{
    font-size:10px;
}
body{
    background-color: #f5f5f5;
    font-size: 1.2em;
}
.outer{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction:column;
    -webkit-box-orient:vertical;
    box-orient:vertical;
    -webkit-flex-direction:column;
    flex-direction:column;
}
.header{
    position: relative;
    background-color: #eee;
    height:48px;
    line-height:48px;
    color:white;
    background: #2196f3;
}
.sousuo{
    position: relative;
    top:50px;
    background-color: #eee;
    height:48px;
    line-height:48px;
    color:white;
    background: white;
}
.header .btn{
    position: absolute;
    right: 0;
    top: 0;
    width: 4em;
    height: 100%;
    text-align: center;
    color: #06c;
    font-size: 1.4rem;
    background-color: #ccc;
}
.header .btn:active{
    background-color: #aaa;
    color: #fff;
}
.inner{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.inner .item{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align:center;
    -webkit-box-align:center;
    box-align:center;
    -webkit-align-items:center;
    align-items:center;
    padding:3.125%;
    border-bottom: 1px solid #ddd;
    color: #333;
}
.inner .item img{
    display: block;
    width: 40px;
    height: 40px;
    border:1px solid #ddd;
}
.inner .item h3{
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    max-height: 40px;
    overflow: hidden;
    line-height: 20px;
    margin: 0 10px;
    font-size: 1.2rem;
}
.inner .item .date{
    display: block;
    height: 20px;
    line-height: 20px;
    color: #999;
}
.opacity{
    -webkit-animation: opacity 0.5s linear;
    animation: opacity 0.5s linear;
}
@-webkit-keyframes opacity {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes opacity {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/* dropload */
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
.dropload-refresh,.dropload-update,.dropload-load{
    position: absolute;
    font-size:15px;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0);
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
</head>
<body>
<div class="outer">
    <div class="header">
        <h3>已办发文</h3>
        <a href="javascript:;" class="btn lock" style="display: none;">锁定</a>
    </div>
    <div class="inner">
        <ul class="mui-table-view lists">
	    </ul>
    </div>
</div>
<script src="../js/zepto.min.js"></script>
<script src="../js/dropload.min.js"></script>
<script>
// 按钮操作
 var page =1;
 var rows = 10;
$(function(){
	 $.ajax({
         type: 'post',
         url: '../../fwcontroller/ybfw.do',
         data:{uid:"402881e44e86c26d014e86c8062b0004",page:page,rows:rows,no:"",title:"",start:"",stop:""},
         dataType: 'json',
         success: function(data){
        	 var result = '';
                for(var i = 0; i < data.length; i++){
                    result +=   '<li class="mui-table-view-cell mui-media"><a href="ybfwinfo.html?id='+data[i].id+'" >'+
							'<div class="mui-media-body">'+data[i].title+
								'<p class="mui-ellipsis">当前环节:'+data[i].status+' 拟稿日期:'+todata(data[i].fwdate)+'</p>'+
							'</div>'+
					'</a></li>';
                }
                    $('.lists').html('');
                    $('.lists').prepend(result);
         }})
	 })
$('.header .btn').on('click',function(){
    var $this = $(this);
    if(!!$this.hasClass('lock')){
        $this.attr('class','btn unlock');
        $this.text('解锁');
        // 锁定
        dropload.lock();
    }else{
        $this.attr('class','btn lock');
        $this.text('锁定');
        // 解锁
        dropload.unlock();
    }
});

// dropload
var dropload = $('.inner').dropload({
    domUp : {
        domClass   : 'dropload-up',
        domRefresh : '<div class="dropload-refresh">↓ 下拉刷新</div>',
        domUpdate  : '<div class="dropload-update">↑ 释放更新</div>',
        domLoad    : '<div class="dropload-load" ><img src="../images/zhuanquan.GIF" style="width:22px;height:22px;margin-right:10px" />加载中...</div>'
    },
    domDown : {
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">↑ 上拉加载更多</div>',
        domUpdate  : '<div class="dropload-update">↓ 释放加载</div>',
        domLoad    : '<div class="dropload-load" ><img src="../images/zhuanquan.GIF" style="width:22px;height:22px;margin-right:10px"  />加载中...</div>'
    },
    loadUpFn : function(me){
    	page = 1;
    	rows = 10;
        $.ajax({
         type: 'post',
         url: '../../fwcontroller/ybfw.do',
          data:{uid:"402881e44e86c26d014e86c8062b0004",page:page,rows:rows,no:"",title:"",start:"",stop:""},
         dataType: 'json',
         success: function(data){
        	 var result = '';
                for(var i = 0; i < data.length; i++){
                    result +=   '<li class="mui-table-view-cell mui-media"><a href="ybfwinfo.html?id='+data[i].id+'" >'+
							'<div class="mui-media-body">'+data[i].title+
								'<p class="mui-ellipsis">当前环节:'+data[i].status+' 拟稿日期:'+todata(data[i].fwdate)+'</p>'+
							'</div>'+
					'</a></li>';
                }
                    $('.lists').html('');
                    $('.lists').prepend(result);
                     me.resetload();
         }})
    },
    loadDownFn : function(me){
    	page+=1;
        $.ajax({
         type: 'post',
         url: '../../fwcontroller/ybfw.do',
         data:{uid:"402881e44e86c26d014e86c8062b0004",page:page,rows:rows,no:"",title:"",start:"",stop:""},
         dataType: 'json',
         success: function(data){
         if(data.length>0){
      		var result = '';
                for(var i = 0; i < data.length; i++){
                    result +=   '<li class="mui-table-view-cell mui-media"><a href="ybfwinfo.html?id='+data[i].id+'">'+
							'<div class="mui-media-body">'+data[i].title+
								'<p class="mui-ellipsis">当前环节:'+data[i].status+' 拟稿日期:'+todata(data[i].fwdate)+'</p>'+
							'</div>'+
					'</a></li>';
                }
                    $('.lists').append(result);
                     me.resetload();
         }else{
         	alert("没有更多数据了")
         	   me.resetload();
         }
         }})
    }
});
</script>
</body>
</html>