zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
var ws=null,list=null;
// 扩展API加载完毕，现在可以正常调用扩展API 
function plusReady(){
	ws=plus.webview.currentWebview();
	wo=ws.opener();
	var topoffset='45px';
	if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
		topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';
	}
	list=plus.webview.create('webview_pullcustom_content.html', 'webview_pullcustom_content', {
		top: topoffset,
		bottom: '0px',
		bounce: 'vertical'
	});
	ws.append(list);
	ws.addEventListener('show', function(){
		refresh();
	}, false);
	if(!ws.preate){
		list.addEventListener('loaded', function(){//页面加载完成后才显示
			ws.show('pop-in');
		},false);
	}
	ws.append(list);
	// 实现列表可下拉刷新
	list.addEventListener('dragBounce', onPullStateChange, false);
	list.setBounce({position:{top:'100px'}, changeoffset:{top:'50px'}});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// DOMContentLoaded事件处理
var etext=null,eicon=null;
document.addEventListener('DOMContentLoaded', function(){
	etext=document.getElementById('text');
	eicon=document.getElementById('icon');
}, false);

// 下拉状态改变
function onPullStateChange(e){
	switch(e.status){
		case 'beforeChangeOffset'://下拉可刷新状态
		pull1();
		break;
		case 'afterChangeOffset'://松开可刷新状态
		pull2();
		break;
		case 'dragEndAfterChangeOffset'://正在刷新状态
		list.evalJS('onRefresh()');
		pull3();
		break;
		default:
		break;
	}
}
function pull1(){
	etext.textContent='下拉可刷新';
	eicon.style.webkitTransition='all 0.3s ease-in';
	eicon.style.webkitTransform='rotate(0deg)';
}
function pull2(){
	etext.textContent='松开可刷新';
	eicon.style.webkitTransition='all 0.3s ease-in';
	eicon.style.webkitTransform='rotate(180deg)';
}
function pull3(){
	etext.textContent='正在刷新...';
	eicon.src='../img/pull_fresh.png';
	eicon.style.webkitAnimation='spin 1s infinite linear';
}
function pullReset(){
	etext.textContent='下拉可刷新';
	eicon.src='../img/pull_arrow.png';
	eicon.style.webkitTransition='';
	eicon.style.webkitTransform='';
	eicon.style.webkitAnimation='';
}
function refresh(){
	pull3();
	list.setBounce({offset:{top:'50px'}});
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
#pull{
	width:24px;
	height:100%;
	display:inline-block;
	margin:0 1em;
}
#icon{
	height:24px;
	vertical-align:middle;
}
@-webkit-keyframes spin{
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}
.irefresh {
	background:no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMTAvMTUgEQA0AAAEP0lEQVR4nO3aTWhcVRTA8f+NQ6ImLqsu7MLuSiOt74SOoJBYDCp0UdG1BUVdWFBR/CiCLqzaClWhLlQUiqCIHwh1EUFqRyshMudRcVRcWdBFsZCVNQzEXhcz1ZeXaTOdN9N3Jp7f7t3J3JzmD52XvBtijDg7RsoewK3kQYzxIMZ4EGM8iDEexBgPYowHMcaDGONBjPEgxngQYzyIMR7EGA9ijAcxxoMY40GM8SDGeBBjPIgxHsQYD2KMBzHGgxjjQYzxIMZUyh6gF/V6fWsIYQa4A9gCbGy/9BvwIzAXYzw2NTX1fTf7qerDIvLGQIa9SGFYDls3Go2RZrO5C9gNbAeuXeMtp4DvgMNjY2OfTU5Onu30Rar6OPC8iFzV14F7NBRBVHUHcACQXrcAnhSRo7l9HwVeBRCRUGjIPjEdpFarhYmJiX3AM33a8qXFxcW9s7OzK2KAB1mTqo4C7wN3d3h5CfgSOA6cAP5or18NbANuAW4Drujw3neBBnAwu+hBLkBVLwM+ZHWMJeC1EMLbSZL8eqE90jS9Psb4APAYcPla39NKEKt3WS+wOoaGEB5MkiTtZoN2sL2q+inwFnBjn2ccCHO/h6jqNPB0bvkYMNNtjCwRqQM30bolNs9UkIWFhQrwem45BXaKyJ8Ftn4OuKbA+y8ZU/9lVSqVncDWzNJfwG4ROdPrnqr6CvBE0dkuFVNBgPtz14dEpNHrZqp6kNaH+tAwE6Rer28OIVQzS2dCCId62UtVR4B9tGL8Ddi7lTwPM0FCCLcDGzJLR5Mk6fWD+CzwJq3Po6GJAYaCxBjvDGHFrwK1XvcSEYCTBUcqhZm7rBDC5tz1D2XNUiYzQfjvT+gAxBhPlTVImSwFcdgK8nv2IoSw1vOOdclMkBjjT7nrG8qapUxmgoQQ5nJL06UMUjIzQYA54HTmekeaphvP98XrlZkgIvIzsJBZGo8x7ilrnrKYCdL2Tu56j6pOljJJSUwFWV5e/hzIHt25EjisquNF907TdGx+ft7Uv7cTUwNWq9Vl4JHccgIcKRJFVcdjjLXR0dFPGo3GaKEhB8xUEAARqQEv55ZvBWqqmlzsfqoqtA5DVIFdzWbzC1XdVHzSwTAXpO1Z4OPcmgDHVXV/Nz9QVd2kqvuBb2idRDlnBnioX4P2m8lTJwCqWgE+AO7p8PIS8BXwdQghjTGeBgghbIgxbgdupvWD73QM6CPgvoKPhAfGbBAAVQ3Ai6w+9NCrAyLyVJ/2GgjTQc4Z1FFSi4YiCPz7WPYu4F66P2z9LfAecEREOh62tmZogmSp6jZguv2UcQtwHa1HtSeBX2j9GaYmIifKm7I3QxlkPbN62/u/5UGM8SDGeBBjPIgxHsQYD2KMBzHGgxjjQYzxIMZ4EGM8iDEexBgPYowHMcaDGONBjPEgxngQYzyIMR7EGA9ijAcxxoMY40GM8SDG/AOZAi+0sACgewAAAABJRU5ErkJggg==);
	background-size:50px 44px;
}
		</style>
	</head>
	<body style="background:#EAEAEA;">
		<div style="text-align:center;height:44px;line-height:44px;">
			<div id="pull"><img id="icon" src="../img/pull_arrow.png"/></div><font id="text">下拉可刷新</font>
		</div>
	</body>
</html>