<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>通知公告</title><link rel="stylesheet" href="jquery.mobile.min.css"><script src="jquery-1.7.1.min.js"></script><script src="jquery.mobile.min.js"></script><script src="jquery.cookie.js"></script><script src="jquery.cookies.2.2.0.js"></script><script src="jquery.cookies.2.2.0.min.js"></script><link rel="stylesheet" type="text/css" href="scrollbar.css"><script src="iscroll.js"></script><script src="json2.js"></script><style type="text/css">/**上下拉的樣式代碼**/
.ui-li-heading {font-size: 16px;font-weight: 700;display: block;margin: .6em 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}body,ul,li {padding:1;margin:0;border:0;}body {font-size:12px;-webkit-user-select:none; -webkit-text-size-adjust:none;font-family:helvetica;}#header {position:absolute;top:0; left:0;width:100%;height:0px;line-height:0px;background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);padding:0;color:#eee;font-size:20px;text-align:center;}#header a {color:#f3f3f3;text-decoration:none;font-weight:bold;text-shadow:0 -1px 0 rgba(0,0,0,0.5);}#footer {position:absolute;bottom:0; left:0;width:100%;height:0px;background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));background-image:-moz-linear-gradient(top, #999, #666 2%, #222);background-image:-o-linear-gradient(top, #999, #666 2%, #222);padding:0;border-top:1px solid #444;}#wrapper {position:absolute; z-index:1;top:0px; bottom:0px; left:0;width:100%;background:#f1f1f1;overflow:auto;}#scroller {position:relative;/*-webkit-touch-callout:none;*/-webkit-tap-highlight-color:rgba(0,0,0,0);float:left;width:100%;padding:0;}/** * * 下拉樣式 Pull down styles * */#pullDown, #pullUp {background:#fff;height:40px;line-height:40px;padding:5px 10px;border-bottom:1px solid #ccc;font-weight:bold;font-size:14px;color:#888;}#pullDown .pullDownIcon, #pullUp .pullUpIcon {display:block; float:left;width:40px; height:40px;background:url(pull-icon@2x.png) 0 0 no-repeat;-webkit-background-size:40px 80px; background-size:40px 80px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms;}#pullDown .pullDownIcon {-webkit-transform:rotate(0deg) translateZ(0);}#pullUp .pullUpIcon {-webkit-transform:rotate(-180deg) translateZ(0);}#pullDown.flip .pullDownIcon {-webkit-transform:rotate(-180deg) translateZ(0);}#pullUp.flip .pullUpIcon {-webkit-transform:rotate(0deg) translateZ(0);}#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {background-position:0 100%;-webkit-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}@-webkit-keyframes loading {from { -webkit-transform:rotate(0deg) translateZ(0); }to { -webkit-transform:rotate(360deg) translateZ(0); }}/**關於loading載入轉圈的圖片**/.ui-icon-loading {background: url(images/ajax-loader.gif);background-size: 46px 46px;}</style><SCRIPT LANGUAGE="JavaScript">//載入效果$(document).ready(function(){$.mobile.loading('show', {text: '載入中...', //載入器中顯示的文字 textVisible: true, //是否顯示文字 theme: 'd', //載入器主題樣式a-e textonly: false, //是否只顯示文字 html: "" //要顯示的html內容，如圖片等 }); $('#pullDown').hide(); })function close(){$.mobile.loading('hide');}//頁面載入完首先執行onload<span style="white-space:pre"></span>var ifs=true;<span style="white-space:pre"></span>var page=1;function sstz(){$.ajax({type:"get",url:"http://**/Ydbgpt/rest/query/getsjsstz?page=1",data:"",dataType:"json",success:callback});}function callback(data){var obj=eval(data);var tree="";if(obj.data.length!=0){$.each(obj.data,function(i,item){$("#list").append("<li><a onclick=sstzid('"+item.url+"')>"+"<img src='image/img"+i+".png' />"+"<h2>"+item.title+"</h2>"+"<p><strong>"+item.date+"</strong></p></a>"+"</li>");})$("#list").listview("refresh");close();//myScroll = new iScroll('wrapper',{snap:false,checkDOMChange:true,vScrollbar:true});myScroll.refresh();//這條資料在上一章關於listview說明過，資料在頁面載入了，但是不出現捲軸，加上這條代碼就好了ifs=true;}else{$("#message").text("網路不穩定或者資料異常,請稍後再試");//判斷沒有資料的時候彈出框$("#pop").popup("open");CLoses();$('#pullDown').hide();ifs=false;}}//頁面載入完 轉圈消失function CLoses(){ $.mobile.loading( "hide");}//點擊標題跳轉到文章頁面var tzid="";function sstzid(url){//alert(url);var id=url.split("=");tzid=id[2];//alert(tzid);$.cookies.set("tzid",tzid);document.location.href="sstzart.html";}//一下就是關於iscroll下拉上拉資料的處理，var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = 1;/** * 下拉重新整理 （自訂實現此方法） * myScroll.refresh();// 資料載入完成後，調用介面更新方法 */function pullDownAction () {if(ifs==false){//這是我下拉重新整理的時候判斷，當因為網路或者是其他原因沒有載入出來，我下拉再一次重新整理資料$.ajax({type:"get",url:"http://**/page=1",data:"",dataType:"json",success:function(data){var obj=eval(data);$.each(obj.data,function(i,item){$("#list").append("<li><a onclick=sstzid('"+item.url+"')>"+"<img src='image/img"+i+".png' />"+"<h2>"+item.title+"</h2>"+"<p><strong>"+item.date+"</strong></p></a>"+"</li>");})//$("#list").remove(); $("#list").listview("refresh");myScroll.refresh();$('#pullDown').hide();}});}else if(ifs==true){//網路穩定載入出來的資料，再一次下拉重新整理的時候提示已經是最新資訊了。因為onload已經重新整理載入的是最新資料了 pullDownEl.querySelector('.pullDownLabel').innerHTML = "當前為最新資訊"; setTimeout(function () { $('#pullDown').hide(); },1500);//定時1500毫秒之後關閉下拉重新整理的div // $('#pullDown').hide(); // return; } }/** * 滾動翻頁 （自訂實現此方法） * myScroll.refresh();// 資料載入完成後，調用介面更新方法 */function pullUpAction () {//下拉翻頁載入資料//setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!var el, li, i;el = document.getElementById('list');var tree="";$.ajax({type:"get",url:"http://**/page="+(++generatedCount),data:"",dataType:"json",success:function(data){var obj=eval(data);if(obj.data.length!=0){$.each(obj.data,function(i,item){$("#list").append("<li><a onclick=sstzid('"+item.url+"')>"+"<img src='image/img"+i+".png' />"+"<h2>"+item.title+"</h2>"+"<p><strong>"+item.date+"</strong></p></a></li>");//$("#list").append(tree).find("li:last").hide(); })$('#list').listview('refresh'); //myScroll = new iScroll('wrapper',{snap:false,checkDOMChange:true,vScrollbar:true});myScroll.refresh();}else{//tree=$("無資料，當前欄目已載入完");//$("#list").append(tree).find("li:last").hide(); //$('#list').listview('refresh'); pullUpEl.querySelector('.pullUpLabel').innerHTML = '當前欄目資料已載入完'; setTimeout(function () { $('#pullUp').hide(); },1000);}}});//myScroll.refresh();// 資料載入完成後，調用介面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)//}, 1000);// <-- Simulate network congestion, remove setTimeout from production!}/** * 一下就是初始化iScroll控制項，貼的原始碼上來，基本沒有做任何操作，本來在iscroll.js裡面添加了一段代碼，但是在本次效果中沒有任何效果所以屏蔽掉了 */function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp');pullUpOffset = pullUpEl.offsetHeight;myScroll = new iScroll('wrapper', {scrollbarClass: 'myScrollbar', /* 重要樣式 */useTransition: false, /* 此屬性不知用意，本人從true改為false */topOffset: pullDownOffset,onRefresh: function () {if (pullDownEl.className.match('loading')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉重新整理...';} else if (pullUpEl.className.match('loading')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉載入更多...';}},onScrollMove: function () {if (this.y > 5 && !pullDownEl.className.match('flip')) {pullDownEl.className = 'flip';pullDownEl.querySelector('.pullDownLabel').innerHTML = '鬆手開始更新...';this.minScrollY = 0;} else if (this.y < 5 && pullDownEl.className.match('flip')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉重新整理...';this.minScrollY = -pullDownOffset;} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {pullUpEl.className = 'flip';pullUpEl.querySelector('.pullUpLabel').innerHTML = '鬆手開始更新...';this.maxScrollY = this.maxScrollY;} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉載入更多...';this.maxScrollY = pullUpOffset;}},onScrollEnd: function () {if (pullDownEl.className.match('flip')) {pullDownEl.className = 'loading';pullDownEl.querySelector('.pullDownLabel').innerHTML = '載入中...';$('#pullDown').show();//myScroll.refresh();// Execute custom function (ajax call?)//pullDownEl.querySelector('.pullDownLabel').innerHTML = '當前為最新xinxi';//document.getElementById('wrapper').style.left = '0';pullDownAction();} else if (pullUpEl.className.match('flip')) {pullUpEl.className = 'loading';pullUpEl.querySelector('.pullUpLabel').innerHTML = '載入中...';pullUpAction();// Execute custom function (ajax call?)}}});setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);}//初始化綁定iScroll控制項 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', loaded, false); </SCRIPT></head><body onload="sstz()"><div data-role="content" ><div id="wrapper"><div id="scroller"><div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉重新整理...</span></div><ul data-role="listview" id="list">//這裡面就是迴圈出來的資料</ul><div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉載入更多...</span></div></div></div></div><!-- 彈出框提示 --><div data-role="popup" id="pop"><div data-role="header" data-theme="d"><h2>提示</h2></div><div data-role="content" class="ui-bar-b" data-theme="d"><p id="message"></p></div><div dataa-role="foot" data-theme="a"><a data-role="button" data-transition="flow" data-theme="d" onclick="CLose()" data-rel="back">確定</a></div></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
