add loading for wechat-example

add loading for wechat-example

Author: zhangxinxu

src/mobilebone.css

@@ -56,14 +56,12 @@ html, body, .page {
                 -7px 7px #333;                /* left-bottom */
 	-webkit-animation: loading 1s step-start infinite;
 	animation: loading 1s step-start infinite; 
-}
-.mask > .loading {
+	/*center*/
 	position: absolute;
 	top: 0; right: 0; bottom: 0; left: 0;
 	margin: auto;
 }
 
-
 /* Default animation - slide, you can visit '/test/transition/aniamte.css' to get more styles of animation */
 .slide.in {
 	-webkit-animation-name: slideinfromright;

test/complex/css/wechat.css

@@ -54,6 +54,7 @@ ul,ol{ margin: 0; list-style-type: none; }
 .wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; }
 .wechat-h-time .business { color: #54688D; }
 .wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+.wechat-detail { position: relative; z-index: 1; }
 
 .contact-group { padding-left: 10px; padding-right: 10px; background-color: #fff; }
 .contact-list { height: 36px; padding-top: 7.5px; padding-bottom: 8px; border-bottom: 1px solid #D8D8D8; }

test/complex/index.html

@@ -89,9 +89,10 @@ <h1>微信</h1>
         <h1>腾讯新闻</h1>
     </div>
 	<div class="content">
-    	<div class="">
-    		<img id="screenShot" data-src="img/screenshot/1.jpg" data-width="720" data-height="2405">
+    	<div class="wechat-detail">
+    		<img id="screenShot" data-src="img/screenshot/1.jpg" data-width="720" data-height="2405">          
     	</div>
+        <div class="loading"></div>
    	</div>
 </div>
 <div id="pageContacts" class="page out">

test/complex/js/wechat.js

@@ -36,8 +36,8 @@ Mobilebone.callback = function(pageinto, pageout) {
 			ele_link_out && ele_link_out.classList.remove("active");
 
 			if (ele_header_out != null) {
-				header.className = "header slide back in";	
-				footer.className = "footer slide back in";		
+				header.className = "header slide reverse in";	
+				footer.className = "footer slide reverse in";		
 			}
 		} else if (pageout && ele_header_out == null) {
 			// include header, slide-out fixed header