Merge pull request #92 from zhangxinxu/develop

Develop

Author: zhangxinxu

ReadMe.md

@@ -10,7 +10,9 @@ mobilebone.js
 </ul>
 
 <ul>
-	<li>测试页面：<a href="http://rawgit.com/zhangxinxu/mobilebone/develop/test/index.html">test/index.html</a></li>
+	<li>测试页面：<a href="http://rawgit.com/zhangxinxu/mobilebone/develop/test/index.html">test/index.html</a>
+		<p><img src="http://image.zhangxinxu.com/image/blog/201410/2014-10-28_174538.png" width="176" height="178"></p>
+	</li>
 </ul>
 
 <ul>
@@ -50,7 +52,7 @@ Mobilebone会自动捕获页面上的a元素，如果其href值存在猫腻，
 
 所有ajax请求默认是缓存的，如果你想根据url地址不缓存，可以设置<code>data-reload</code>或者<code>data-reload="true"</code>；如果你想根据url根地址不缓存，需要设置<code>data-reload="root"</code>。
 
-你可以控制切换的方向，可以被seajs, requiejs模块化加载(<code>require('mobilebone')</code>)，可以和Backbone组合使用等。
+你可以控制切换的方向，任意扩展动画类型，可以被seajs, requiejs模块化加载(<code>require('mobilebone')</code>)，可以和Backbone组合使用等。
 
 当然，上面介绍的，只是强大功能的冰山一角，更多信息请[参考这里](http://www.zhangxinxu.com/wordpress/?p=4381). 
 
@@ -62,15 +64,16 @@ Mobilebone会自动捕获页面上的a元素，如果其href值存在猫腻，
 
 优势？
 ------------------
-mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。同时，巧妙提供各类缓存管理、事件管理的接口，就像是个完整健全的骨架体系，就等你来加血添肉了！<img src="http://mat1.gtimg.com/www/mb/images/face/4.gif" align="absmiddle">
+mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后4~5K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。同时，巧妙提供各类缓存管理、事件管理的接口，就像是个完整健全的骨架体系，就等你来加血添肉了！<img src="http://mat1.gtimg.com/www/mb/images/face/4.gif" align="absmiddle">
 
 许可
 -------------------
 MIT许可
 
 捐赠
 ------------------
-<img src="http://www.zhangxinxu.com/alipay.png" width="256" height="256" alt="支付鼓励">
+左支付宝，右微信<br>
+<img src="http://www.zhangxinxu.com/alipay.png?v=1" width="176" height="176" alt="支付宝"> &nbsp; &nbsp; <img src="http://www.zhangxinxu.com/wxpay.png" width="176" height="176" alt="微信">
 
 mobilebone.js
 =============

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobilebone",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Bone main for mobile web APP with a sigle page mode.",
   "main": "src/mobilebone.js",
   "directories": {

src/mobilebone.css

@@ -65,8 +65,8 @@ html, body, .page {
                 7px -7px 0 1.5px currentColor,        /* right-top, 1.5px expand */
                 7px 7px currentColor,                 /* right-bottom */
                 -7px 7px currentColor;                /* left-bottom */
-	-webkit-animation: loading 1s step-start infinite;
-	animation: loading 1s step-start infinite;
+	-webkit-animation: spin 1s steps(8) infinite;
+	animation: spin 1s steps(8) infinite;
 	/*center*/
 	position: absolute;
 	top: 0; right: 0; bottom: 0; left: 0;
@@ -127,25 +127,11 @@ html, body, .page {
 }
 
 /* chrysanthemum loading effect */
-@-webkit-keyframes loading {
+@-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
-    12% { -webkit-transform: rotate(45deg); }
-    25% { -webkit-transform: rotate(90deg); }
-    37% { -webkit-transform: rotate(135deg); }
-    50% { -webkit-transform: rotate(180deg); }
-    63% { -webkit-transform: rotate(225deg); }
-    75% { -webkit-transform: rotate(270deg); }
-    87% { -webkit-transform: rotate(315deg); }
-   90% { -webkit-transform: rotate(360deg); }
-}
-@keyframes loading {
+   100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
      0% { transform: rotate(0deg); }
-    12% { transform: rotate(45deg); }
-    25% { transform: rotate(90deg); }
-    37% { transform: rotate(135deg); }
-    50% { transform: rotate(180deg); }
-    63% { transform: rotate(225deg); }
-    75% { transform: rotate(270deg); }
-    87% { transform: rotate(315deg); }
-    90% { transform: rotate(360deg); }
+    100% { transform: rotate(360deg); }
 }

src/mobilebone.js

@@ -38,7 +38,7 @@
 	 *
 	 * @type string
 	**/
-	Mobilebone.VERSION = '2.4.0';
+	Mobilebone.VERSION = '2.4.1';
 
 	/**
 	 * Whether catch attribute of href from element with tag 'a'

test/ajax-html/index.html

@@ -15,7 +15,7 @@
         <li><a href="ajax-page.html" data-container="container">点击加载(缓存，若后2项已请求，则无请求)</a></li>
         <li><a href="ajax-page.html#a=1#b=1&c=1#" data-reload>点击加载(每次都请求， 返回含page结构)</a></li>
         <li><a href="ajax-page.html?&&" data-formdata="?a=1">点击加载(缓存, url过滤测试)</a></li>
-        <li><a href="ajax-page.html?a" data-reload data-formdata="?a=1">点击加载(data-formdata测试)-全覆盖loading</a></li>
+        <li><a href="ajax-page.html?debug=zhangrui.songyi#&/index.php/Home/Mall/index/sid/251 " data-reload data-formdata="?a=1">点击加载(data-formdata测试)-全覆盖loading</a></li>
         <li><a href="ajax-page.html?a=1&#tt_fo#nt=m&tt_#daymode=1" data-reload data-formdata="&c=1" data-mask="true">点击加载(data-formdata测试)-内覆盖loading</a></li>
         <li><a href="ajax-page.html?a=1&b=" class="follow" data-reload data-formdata="c=1&d=1" data-mask="true">点击加载(data-formdata测试)-跟随loading</a></li>
     </ul>

test/base-slide/index.html

@@ -14,6 +14,7 @@
         <li><a href="#&page1">页面1-#&amp;page1</a></li>
         <li><a href="#page2">页面2-#page2</a></li>
         <li><a href="#page3">页面3</a></li>
+        <li><a>测试菊花：<div class="mask"><i class="loading"></i></div></a></li>
     </ul>
     <ul>
         <li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>