-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
268 lines (265 loc) · 15.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web App - by SUI Mobile</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 项目的第三方样式库 -->
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<!-- 项目的公共样式 -->
<link rel="stylesheet" href="/lib/app/main.css">
</head>
<body>
<div class="page-group page-group-index">
<style>
/* 针对单页的样式内嵌到 page-group 中 */
/* 要注意样式冲突(可以追加 page-group-index 这样的作用域来限制所有样式) */
/* 对于公共样式尽量提升到全局样式或者作为公共组件样式(app.css) */
/* 如果你觉得麻烦, 也可以将所有样式都合并到一个 css */
/* 或者单独做一个模块的 css 文件, 请参考 customize 模块 */
.bar-nav .text-hello {
color: #333;
}
.bar-nav .text-logout {
color: #999;
}
.spread-bar {
border-bottom: 1px solid #ddd;
}
.spread-bar img {
vertical-align: middle;
}
.spread-bar .col-50:first-child {
border-right: 1px solid #ddd;
}
.case-list {
list-style: none;
padding-left: 0;
}
.case-list h2 {
font-size: 0.546875rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
color: #666;
}
</style>
<!-- 注意一般都需要设置id -->
<!-- 如果需要确保页面 title 是正确的, 必须设置 data-page-title -->
<div class="page" id="page-index" data-page-title="Index - by SUI Mobile">
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left text-hello">你好, xxxx</a>
<a class="button button-link button-nav pull-right text-logout">注销</a>
</header>
<!--
"跳转"页面的时候, 底部工具栏也伴随着有页面切换动画,
因为此时他是作为 page-group 的节点, 会被当成是页面的展示内容.
折中的解决办法是:
1. 将 nav 放到 page-group 外面(即与 page-group 平级)
2. 修改 page-group 的样式(默认样式是占满整屏的), 预留出 nav 的高度
3. 注意内嵌在 page-group 中的 popup, 打开时并没有处于全屏状态
因为此时 page-group 预留出了 nav 的高度, 并非全屏,
因此相应的内嵌 popup 也没有全屏了.
要解决这个问题, 可以采用动态创建 popup 的方式来避免($.popup)
或者尝试下
https://github.com/sdc-alibaba/SUI-Mobile/issues/311
参考代码 app.css 强制让某些页是0时长动画
-->
<nav class="bar bar-tab bar-tab-brand">
<a class="tab-item active" href="/index.html">
<span class="icon icon-home"></span>
<span class="tab-label">首页</span>
</a>
<a class="tab-item" href="/customize/customize.html">
<span class="icon icon-edit"></span>
<span class="tab-label">编辑</span>
</a>
<a class="tab-item" href="/profile/profile.html">
<span class="icon icon-me"></span>
<span class="tab-label">我</span>
<span class="badge">2</span>
</a>
</nav>
<div class="content">
<div class="swiper-container" data-space-between="10" data-loop="true">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="img-responsive" src="http://temp.im/640x250/34AADC/fff" alt=""></div>
<div class="swiper-slide"><img class="img-responsive" src="http://temp.im/640x250/4CD964/fff" alt=""></div>
<div class="swiper-slide"><img class="img-responsive" src="http://temp.im/640x250/FF2D55/fff" alt=""></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="row no-gutter spread-bar">
<div class="col-50">
<img class="img-responsive" src="http://temp.im/320x158/3C3C3C/fff">
</div>
<div class="col-50">
<img class="img-responsive" src="http://temp.im/320x158/3C3C3C/fff">
</div>
</div>
<div class="buttons-tab buttons-tab-brand">
<a href="#tab1" class="tab-link active button">案例1</a>
<a href="#tab2" class="tab-link button">案例2</a>
</div>
<div class="content-block">
<div class="tabs">
<div id="tab1" class="tab active">
<ul class="row case-list">
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
<li class="col-33">
<a href="http://bing.com" target="_blank" class="external">
<img class="img-responsive" src="http://temp.im/220x226">
</a>
<h2 title="这里放一个名字可好可好可好啊?">这里放一个名字可好可好可好啊?</h2>
</li>
</ul>
</div>
<div id="tab2" class="tab">
<div class="content-block">
<p>基于 <a href="http://m.sui.taobao.org/" target="_blank" class="external">SUI Mobile</a> 来实现 Web App by <a href="https://github.com/appbone/mobile-spa-boilerplate" target="_blank" class="external">mobile-spa-boilerplate</a></p>
<p><a href="#" class="open-popup">关于 SUI Mobile</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- XXX 这里没有按照官网文档将 popup 与 page-group 平行放置而是包含在其里面 -->
<!--
如果与 page-group 平行放置, 那么当首页不是 index.html 时,
跳转到 index.html, 会造成 popup 节点丢失,
因为路由只会将 index.html 中 page-group 的内容抽取出来替换到页面中
-->
<div class="popup">
<header class="bar bar-nav">
<a class="button button-link button-nav pull-right close-popup">关闭</a>
<h1 class="title">关于 SUI Mobile</h1>
</header>
<div class="content">
<div class="content-inner">
<div class="content-block">
<p>SUI Mobile 是阿里巴巴国际UED前端团队出品的移动端 UI库。</p>
<p>主要借鉴 Framework7 的形态并以此为基础，能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台 Web App。</p>
<p>提供的配置和功能较 Framework7 要少一些, 但轻量简单得多。</p>
</div>
</div>
</div>
</div>
<!-- 注意: 必须将所有脚本都放在 page-group 中, -->
<!-- 才能够确保不管是用户主动刷新页面, 还是页面路由, 都会执行 -->
<!-- 先放公共模块, 再放页面逻辑 -->
<script src="http://g.alicdn.com/sj/lib/zepto/zepto.min.js"></script>
<script src="http://g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js"></script>
<!-- 公共模块 -->
<script src="/lib/app/app.js"></script>
<!-- 页面逻辑 -->
<script>
(function($) {
// 不用担心代码因为反复路由而重复执行,
// 因为每次路由都只是拿了页面的 HTML 字符串来渲染, 因此每次都是全新的 DOM 节点
// @see https://github.com/sdc-alibaba/SUI-Mobile/blob/dev/js/router.js
// Router.prototype._doSwitchDocument
// $($('<div></div>').append(this.cache[urlObj.base].$content).html());
//
// 也可以考虑将 js 全部放置到一个模块的 js 文件中, 请参考 customize 模块
//
// 建议所有的 DOM 查找都控制在单页的内容范围内
$('.page-group-index').on('click', '.text-logout', function() {
$.confirm('确认注销吗?', function() {
$.alert('确定');
}, function() {
$.alert('取消');
});
});
})(Zepto);
</script>
</div>
</body>
</html>