hs
/
hbghj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
							<!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.5em;
}
.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;
}
.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">
						<li class="mui-table-view-cell mui-hidden">cared
							<div id="M_Toggle" class="mui-switch mui-active">
								<div class="mui-switch-handle"></div>
							</div>
						</li>
						<li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html" > <!-- <img
								class="mui-media-object mui-pull-left"
								src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->
								<div class="mui-media-body">
									发文
									<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>
								</div>
						</a></li>
						<li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html" > <!-- <img
								class="mui-media-object mui-pull-left"
								src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->
								<div class="mui-media-body">
									发文
									<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>
								</div>
						</a></li><li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html" > <!-- <img
								class="mui-media-object mui-pull-left"
								src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->
								<div class="mui-media-body">
									发文
									<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>
								</div>
						</a></li><li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html" > <!-- <img
								class="mui-media-object mui-pull-left"
								src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->
								<div class="mui-media-body">
									发文
									<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>
								</div>
						</a></li><li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html"  > <!-- <img
								class="mui-media-object mui-pull-left"
								src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->
								<div class="mui-media-body">
									发文
									<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>
								</div>
						</a></li><li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html" > <!-- <img
								class="mui-media-object mui-pull-left"
								src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->
								<div class="mui-media-body">
									发文
									<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>
								</div>
						</a></li><li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html" > <!-- <img
								class="mui-media-object mui-pull-left"
								src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->
								<div class="mui-media-body">
									发文
									<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>
								</div>
						</a></li>
					</ul>
    </div>
</div>
<script src="../js/zepto.min.js"></script>
<script src="../js/dropload.min.js"></script>
<script>
// 按钮操作
$(function(){
	 $.ajax({
         type: 'post',
         url: '../json/update.json',
         dataType: 'json',
         success: function(data){
         }})
	 })

$('.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){
        $.ajax({
            type: 'post',
            url: '../json/update.json',
            dataType: 'json',
            success: function(data){
                // 为了测试，延迟1秒加载
                setTimeout(function(){
                    me.resetload();
                },1000);
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    },
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: '../json/more.json',
            dataType: 'json',
            success: function(data){
                var result = '';
                for(var i = 0; i < data.lists.length; i++){
                	result +=   '<li class="mui-table-view-cell mui-media"><a href="dbfwinfo.html" > <!-- <img'+
					'class="mui-media-object mui-pull-left"'+
						'src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg"> -->'+
						'<div class="mui-media-body">'+
							'发文'+
							'<p class="mui-ellipsis">当前环节:拟稿  拟稿日期:2015-05-02</p>'+
						'</div>'+
				'</a></li>';
                }
                // 为了测试，延迟1秒加载
                setTimeout(function(){
                    $('.lists').append(result);
                    me.resetload();
                },1000);
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
});
</script>
</body>
</html>