Skip to content

Commit c396f46

Browse files
zhangxinxuzhangxinxu
committed
Merge pull request #84 from zhangxinxu/develop
Develop
2 parents 0ae4b2c + 56fbfe3 commit c396f46

File tree

10 files changed

+109
-32
lines changed

10 files changed

+109
-32
lines changed

‎src/mobilebone.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -96,33 +96,33 @@ html, body, .page {
9696
to { -webkit-transform: translate3d(0,0,0); }
9797
}
9898
@keyframes slideinfromright {
99-
from { transform: translateX(100%); }
100-
to { transform: translateX(0); }
99+
from { transform: translate3d(100%,0,0); }
100+
to { transform: translate3d(0,0,0); }
101101
}
102102
@-webkit-keyframes slideinfromleft {
103103
from { -webkit-transform: translate3d(-100%,0,0); }
104104
to { -webkit-transform: translate3d(0,0,0); }
105105
}
106106
@keyframes slideinfromleft {
107-
from { transform: translateX(-100%); }
108-
to { transform: translateX(0); }
107+
from { transform: translate3d(-100%,0,0); }
108+
to { transform: translate3d(0,0,0); }
109109
}
110110
/* keyframes for slideout to sides */
111111
@-webkit-keyframes slideouttoleft {
112112
from { -webkit-transform: translate3d(0,0,0); }
113113
to { -webkit-transform: translate3d(-100%,0,0); }
114114
}
115115
@keyframes slideouttoleft {
116-
from { transform: translateX(0); }
117-
to { transform: translateX(-100%); }
116+
from { transform: translate3d(0,0,0); }
117+
to { transform: translate3d(-100%,0,0); }
118118
}
119119
@-webkit-keyframes slideouttoright {
120120
from { -webkit-transform: translate3d(0,0,0); }
121121
to { -webkit-transform: translate3d(100%,0,0); }
122122
}
123123
@keyframes slideouttoright {
124-
from { transform: translateX(0); }
125-
to { transform: translateX(100%); }
124+
from { transform: translate3d(0,0,0); }
125+
to { transform: translate3d(100%,0,0); }
126126
}
127127

128128
/* chrysanthemum loading effect */

‎src/mobilebone.js

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,8 @@
254254
// for title change
255255
var title = params_in.title,
256256
header = document.querySelector("h1"),
257-
first_page = document.querySelector("." + this.classPage);
257+
first_page = document.querySelector("." + this.classPage);
258+
258259
// do title change
259260
if (title) {
260261
document.title = title;
@@ -266,10 +267,22 @@
266267
// set data-title for first visibie page
267268
pageInto.setAttribute("data-title", document.title);
268269
}
270+
// Fastclick may cause slide bug in iOS8, any innerHTML change can fix it!
271+
// issues #80
272+
if (typeof FastClick != "undefined") {
273+
var mobilebone = document.querySelector("mobilebone");
274+
if (mobilebone == null) {
275+
mobilebone = document.createElement("mobilebone");
276+
mobilebone.style.position = "absolute";
277+
mobilebone.style.clip = "rect(0 0 0 0)";
278+
document.body.appendChild(mobilebone);
279+
}
280+
mobilebone.innerHTML = mobilebone.innerHTML.replace('11', '') + '1';
281+
}
269282

270283
// delete page with same id when options.remove !== false
271284
var pageid = options.id || pageInto.id;
272-
285+
273286
if (options.remove !== false && store[pageid] && store[pageid] != pageInto && store[pageid].parentElement) {
274287
store[pageid].parentElement.removeChild(store[pageid]);
275288
delete store[pageid];
@@ -868,7 +881,7 @@
868881
}
869882
store.timerTap = Date.now();
870883
*/
871-
884+
872885
// get target and href
873886
var target = event.target || event.touches[0], href = target.href;
874887
if ((!href || /a/i.test(target.tagName) == false) && (target = target.getParentElementByTag("a"))) {
@@ -944,15 +957,18 @@
944957
external = external || (href.replace("://", "").split("/")[0] !== location.href.replace("://", "").split("/")[0]);
945958
if ((external == true || capture == false) && target.getAttribute("data-ajax") != "true") return;
946959
}
947-
960+
948961
// judge that if it's a ajax request
949962
if (/^#/.test(target.getAttribute("href")) == true) {
950963
// hash slide
951964
var idTargetPage = href.split("#")[1], eleTargetPage = idTargetPage && document.getElementById(idTargetPage);
952965
if (back == false && rel == "auto") {
953966
back = Mobilebone.isBack(eleTargetPage, self_page);
954967
}
955-
if (eleTargetPage) Mobilebone.transition(eleTargetPage, self_page, back, options);
968+
969+
if (eleTargetPage) {
970+
Mobilebone.transition(eleTargetPage, self_page, back, options);
971+
}
956972
event.preventDefault();
957973
} else if (/^javascript/.test(href)) {
958974
// back
@@ -1064,6 +1080,7 @@
10641080
// hash ↔ id
10651081
if (page_in) {
10661082
Mobilebone.transition(page_in, page_out, Mobilebone.isBack(page_in, page_out), {
1083+
id: hash, // fix issue #83
10671084
history: false,
10681085
remove: false
10691086
});

‎test/ajax-html/b.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</head>
66

77
<body>
8-
<div class="page out">
8+
<div class="page out" data-onpagefirstinto="page_b_first">
99
<ul>
1010
<li><a href="c.html">此为b页面，点击加载c页面</a></li>
1111
</ul>

‎test/ajax-html/c.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<div class="page out">
99
<ul>
1010
<li><a href="#pageHome" data-rel="back">c页面，直接刷新，浏览器返回</a></li>
11+
<li><a href="javascript:" data-rel="back">直接返回b页面</a></li>
1112
</ul>
1213
</div>
1314
</body>

‎test/ajax-html/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
show.innerHTML = should.innerHTML;
5959
}
6060
};
61+
62+
var page_b_first = function() {
63+
// console.log("first?");
64+
};
6165
</script>
6266
</body>
6367
</html>

‎test/complex/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -244,13 +244,13 @@ <h6>Mobilebone</h6>
244244

245245
<script src="js/iscroll-lite.js"></script>
246246

247-
<script src="js/zepto-docs.js"></script>
247+
<!--<script src="js/zepto-docs.js"></script>-->
248248
<!--zepto或者fastclick都是可以的
249249
-->
250-
<!--<script src="js/fastclick.js"></script>
250+
<script src="js/fastclick.js"></script>
251251
<script>
252252
FastClick.attach(document.body);
253-
</script>-->
253+
</script>
254254
<script src="../../src/mobilebone.js"></script>
255255
<script src="js/wechat.js"></script>
256256
</body>

‎test/fixed-header-footer/1.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
<title>页面1</title>
5+
</head>
6+
7+
<body>
8+
<div class="page out">
9+
<div class="content">页面1内容...</div>
10+
</div>
11+
</body>
12+
</html>

‎test/fixed-header-footer/2.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
<title>页面2</title>
5+
</head>
6+
7+
<body>
8+
<div class="page out">
9+
<div class="content">页面2内容...</div>
10+
</div>
11+
</body>
12+
</html>

‎test/fixed-header-footer/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,35 @@
1717
<a href="javascript:" data-rel="back">返回</a>
1818
<h1>首页</h1>
1919
</div>
20+
2021
<div id="pageHome" class="page out">
2122
<div class="content">
2223
<p>首页内容...本页可垂直滚动...</p>
2324
<p><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></p>
2425
<div style="height: 800px;"></div>
2526
</div>
2627
</div>
28+
2729
<div id="page1" class="page out" data-title="页面1"><div class="content">页面1内容...</div></div>
2830
<div id="page2" class="page out" data-title="页面2"><div class="content">页面2内容...</div></div>
2931
<div id="page3" class="page out" data-title="页面3"><div class="content">页面3内容...</div></div>
32+
<!--<div id="container"></div>-->
3033
<div class="footer">
3134
<h4><a href="#pageHome" data-rel="auto">首页</a></h4>
35+
<!--<h4><a href="1.html" data-rel="auto" data-container="container">页面1</a></h4>
36+
<h4><a href="2.html" data-rel="auto" data-container="container">页面2</a></h4>-->
3237
<h4><a href="#page1" data-rel="auto">页面1</a></h4>
3338
<h4><a href="#page2" data-rel="auto">页面2</a></h4>
3439
<h4><a href="#page3" data-rel="auto">页面3</a></h4>
3540
</div>
3641

42+
43+
3744
<script src="../../src/mobilebone.js"></script>
45+
<script src="../complex/js/fastclick.js"></script>
46+
<script>
47+
FastClick.attach(document.body);
48+
</script>
3849
<script>
3950
Mobilebone.callback = function(page_in, page_out) {
4051
var id_in = page_in.id, id_out = "";

‎test/form-submit/zxx.lib.css

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
/*!
22
* by zhangxinxu(.com) 2010-?
3+
* https://github.com/zhangxinxu/zxx.lib.css
4+
* under MIT license
5+
*/
6+
/*
37
* 2010-07-12 v1.0
48
* 2010-07-21 v1.1 添加block元素居中之auto属性，增加鼠标手形样式
59
* 2010-09-17 v1.2 添加z-index层级属性
@@ -14,7 +18,18 @@
1418
2. margin/padding增加15px/30px组
1519
3. 中文字体改成英文字符表示，例如“微软雅黑” → "microsoft yahei"
1620
4. 新增border系列, background-color系列, width(fixed value/percent value)系列以及.ell以下所有样式
17-
* 保留版权说明
21+
* 2013-07-31 v2.1 inline_any等12px字体大小限制去除，inline_box的-3px间距缩进改成-.25em, 以便适应各种字体大小环境
22+
* 2013-09-13 v2.2 12px字体大小限制修改为1px笔误了，应该为1em, 删除-ms-transition
23+
* 2013-10-11 v2.3 float_seven一直没删除，清掉。增加两个绝对定位隐藏：abs_out和abs_clip
24+
* 2013-11-23 v2.4 add p0, ova, f18. 去除trans中-moz-和-o-私有前缀
25+
* 2014-02-26 v2.5 fix two name mistake
26+
* 2014-02-27 v2.6 add fl
27+
* 2015-02-08 v2.7 具体改动有：
28+
1. 添加h0
29+
2. 修改 .vn -2px → -4px
30+
3. zoom增加webkit重绘修复
31+
4. 去除.trans非webkit私有前缀
32+
5. loading背景图使用about:blank代替
1833
*/
1934

2035
/* ---------------------single CSS----------------------- */
@@ -24,6 +39,7 @@
2439
.db{display:block;}
2540
.dib{display:inline-block;} /* if the element is block level(eg. div, li), using 'inline_any' instead */
2641
/* height */
42+
.h0{height:0;}
2743
.h14{height:14px;}
2844
.h16{height:16px;}
2945
.h18{height:18px;}
@@ -111,7 +127,7 @@
111127
.mr-1{margin-right:-1px;}
112128
.mt-1{margin-top:-1px;}
113129
.mb-1{margin-bottom:-1px;}
114-
.ml-l{margin-left:-3px;}
130+
.ml-3{margin-left:-3px;}
115131
.mr-3{margin-right:-3px;}
116132
.mt-3{margin-top:-3px;}
117133
.mb-3{margin-bottom:-3px;}
@@ -120,6 +136,7 @@
120136
.mt-20{margin-top:-20px;}
121137
.mb-20{margin-bottom:-20px;}
122138
/* padding */
139+
.p0{padding:0;}
123140
.p1{padding:1px;}
124141
.pl1{padding-left:1px;}
125142
.pt1{padding-top:1px;}
@@ -192,14 +209,16 @@
192209
.f13{font-size:13px;}
193210
.f14{font-size:14px;}
194211
.f16{font-size:16px;}
212+
.f18{font-size:18px;}
195213
.f20{font-size:20px;}
196214
.f24{font-size:24px;}
197215
/* font-family */
198216
.fa{font-family:Arial;}
199217
.ft{font-family:Tahoma;}
200218
.fv{font-family:Verdana;}
201-
.fs{font-family:'simsun';}
202-
.fw{font-family:'microsoft yahei';}
219+
.fs{font-family:Simsun;}
220+
.fl{font-family:'Lucida Console';}
221+
.fw{font-family:'Microsoft Yahei';}
203222
/* font-style */
204223
.n{font-weight:normal; font-style:normal;}
205224
.b{font-weight:bold;}
@@ -225,7 +244,7 @@
225244
.vtb{vertical-align:text-bottom;}
226245
.vb{vertical-align:bottom;}
227246
.vt{vertical-align:top;}
228-
.vn{vertical-align:-2px;}
247+
.vn{vertical-align:-4px;}
229248
/* float */
230249
.l{float:left;}
231250
.r{float:right;}
@@ -242,11 +261,12 @@
242261
.def{cursor:default;}
243262
/* overflow */
244263
.ovh{overflow:hidden;}
264+
.ova{overflow:auto;}
245265
/* visibility */
246266
.vh{visibility:hidden;}
247267
.vv{visibility:visible;}
248268
/* zoom */
249-
.z{*zoom:1;}
269+
.z{*zoom:1; -webkit-transform: translateZ(0);}
250270

251271

252272
/* ------------------- multiply CSS ------------------ */
@@ -263,25 +283,25 @@
263283
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
264284
/* css3过渡动画效果 */
265285
.trans{
266-
-webkit-transition:all 0.3s;
267-
-moz-transition:all 0.3s;
268-
-ms-transition:all 0.3s;
269-
-o-transition:all 0.3s;
286+
-webkit-transition:all 0.3s;
270287
transition:all 0.3s;
271288
}
272289
/* 大小不定元素垂直居中 */
273290
.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}
274-
/* 加载中背景图片 */
275-
/*.loading{background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;}*/
291+
/* 加载中背景图片 - 如果您使用该CSS小库，务必修改此图片地址 */
292+
.loading{background:url(about:blank) no-repeat center;}
276293
/* 无框文本框文本域 */
277294
.bd_none{border:0; outline:none;}
295+
/* 绝对定位隐藏 */
296+
.abs_out{position:absolute; left:-999em; top:-999em;}
297+
.abs_clip{position:absolute; clip:rect(0 0 0 0);}
278298
/* 按钮禁用 */
279299
.disabled{color:#acacac!important; border-color:#acacac!important; text-shadow:1px 1px #fff!important; outline:0!important; cursor:default!important; pointer-events:none;}
280300
.disabled:hover{text-decoration:none!important;}
281301
/*inline-block与float等宽列表*/
282-
.inline_box{font-size:1px; letter-spacing:-3px; font-family:Arial;}
283-
.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; font-size:12px; letter-spacing:0; vertical-align:top; *zoom:1;}
284-
.float_two, .float_three, .float_four, .float_five, .float_six,.float_seven{float:left;}
302+
.inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;}
303+
.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;}
304+
.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}
285305
.inline_two, .float_two{width:49.9%;}
286306
.inline_three, .float_three{width:33.3%;}
287307
.inline_four, .float_four{width:24.9%;}

0 commit comments

Comments
 (0)