-
Notifications
You must be signed in to change notification settings - Fork 0
/
widget.html
392 lines (374 loc) · 10.6 KB
/
widget.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
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amaze UI Widget</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 不提供支持。 请 <a
href="http://browsehappy.com/" target="_blank">升级浏览器</a>
以获得更好的体验！</p>
<![endif]-->
<script type="text/x-handlebars-template" id="amz-tpl">
{{>header header}}
{{>menu menu}}
{{>slider slider}}
{{>list_news list1}}
{{>gallery gallery}}
{{>list_news list2}}
{{>footer footer}}
{{>navbar navbar}}
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.js"></script>
<script src="assets/js/handlebars.min.js"></script>
<script src="assets/js/amazeui.widgets.helper.js"></script>
<script>
var $tpl = $('#amz-tpl');
var source = $tpl.text();
var template = Handlebars.compile(source);
var data = {
header: {
"content": {
"title": "Amaze UI"
}
},
menu: {
"options": {
"cols": "1"
},
"content": [
{
"link": "##",
"title": "公司",
"subCols": 2,
"channelLink": "进入栏目 »",
"subMenu": [
{
"link": "##",
"title": "公司"
},
{
"link": "##",
"title": "人物"
},
{
"link": "##",
"title": "趋势"
},
{
"link": "##",
"title": "投融资"
},
{
"link": "##",
"title": "创业公司"
},
{
"link": "##",
"title": "创业人物"
}
]
},
{
"link": "##",
"title": "人物",
"subCols": 3,
"subMenu": [
{
"link": "##",
"title": "公司"
},
{
"link": "##",
"title": "人物"
},
{
"link": "##",
"title": "趋势"
},
{
"link": "##",
"title": "投融资"
},
{
"link": "##",
"title": "创业公司"
},
{
"link": "##",
"title": "创业人物"
}
]
},
{
"link": "#c3",
"title": "趋势",
"subCols": 4,
"channelLink": "泥煤 »",
"subMenu": [
{
"link": "##",
"title": "公司"
},
{
"link": "##",
"title": "人物"
},
{
"link": "##",
"title": "趋势"
},
{
"link": "##",
"title": "投融资"
},
{
"link": "##",
"title": "创业公司"
},
{
"link": "##",
"title": "创业人物"
}
]
},
{
"link": "##",
"title": "投融资",
"subCols": 3,
"subMenu": [
{
"link": "##",
"title": "公司"
},
{
"link": "##",
"title": "人物"
},
{
"link": "##",
"title": "趋势"
},
{
"link": "##",
"title": "投融资"
},
{
"link": "##",
"title": "创业公司"
},
{
"link": "##",
"title": "创业人物"
}
]
},
{
"link": "##",
"title": "创业公司"
},
{
"link": "##",
"title": "创业人物"
}
],
"theme": "offcanvas1"
},
slider: {
"theme": "a2",
//"sliderConfig": "{\"directionNav\":false}",
"content": [
{
"img": "http://s.amazeui.org/media/i/demos/bing-1.jpg"
},
{
"img": "http://s.amazeui.org/media/i/demos/bing-2.jpg"
},
{
"img": "http://s.amazeui.org/media/i/demos/bing-3.jpg"
},
{
"img": "http://s.amazeui.org/media/i/demos/bing-4.jpg"
}
]
},
list1: {
"options": {
"type": "thumb",
"thumbPosition": "left"
},
"content": {
"header": {
"title": "栏目标题",
"link": "###",
"moreText": "更多 >>",
"morePosition": "top"
},
"main": [
{
"title": "我很囧，你保重....晒晒旅行中的那些囧！",
"link": "http://www.douban.com/online/11614662/",
"desc": "囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！",
"img": "http://img5.douban.com/lpic/o636459.jpg"
},
{
"title": "我最喜欢的一张画",
"link": "http://www.douban.com/online/11624755/",
"desc": "你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，",
"img": "http://img3.douban.com/lpic/o637240.jpg"
},
{
"title": "“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！",
"link": "http://www.douban.com/online/11645411/",
"desc": "还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次",
"img": ""
}
]
}
},
gallery: {
"options": {
"cols": 2,
"gallery": true
},
"content": [
{
"img": "http://s.amazeui.org/media/i/demos/bing-1.jpg",
"link": "http://s.amazeui.org/media/i/demos/bing-1.jpg",
"title": "远方 有一个地方 那里种有我们的梦想",
"desc": "2375-09-26"
},
{
"img": "http://s.amazeui.org/media/i/demos/bing-2.jpg",
"link": "http://s.amazeui.org/media/i/demos/bing-2.jpg",
"title": "某天 也许会相遇 相遇在这个好地方",
"desc": "2375-09-26"
},
{
"img": "http://s.amazeui.org/media/i/demos/bing-3.jpg",
"link": "http://s.amazeui.org/media/i/demos/bing-3.jpg",
"title": "不要太担心 只因为我相信",
"desc": "2375-09-26"
},
{
"img": "http://s.amazeui.org/media/i/demos/bing-4.jpg",
"link": "http://s.amazeui.org/media/i/demos/bing-4.jpg",
"title": "终会走过这条遥远的道路",
"desc": "2375-09-26"
}
]
},
list2: {
"content": {
"header": {
"title": "栏目标题",
"link": "###",
"moreText": "更多 >>",
"morePosition": "top"
},
"main": [
{
"title": "我很囧，你保重....晒晒旅行中的那些囧！",
"link": "http://www.douban.com/online/11614662/",
"date": "2013-09-18"
},
{
"title": "我最喜欢的一张画",
"link": "http://www.douban.com/online/11624755/",
"date": "2013-10-14"
},
{
"title": "“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！",
"link": "http://www.douban.com/online/11645411/",
"date": "2013-11-18"
}
]
}
},
footer: {
"options": {
"modal": true,
"techSupportCo": "XXX",
"techSupportSite": "http://www.yunshipei.com/"
},
"content": {
"owner": "云适配",
"companyInfo": [
{
"detail": "CopyRight©2013 AllMobilize Inc."
},
{
"detail": "京ICP备13033158"
}
]
}
},
navbar: {
"options": {
"cols": "4",
"iconpos": "top"
},
"content": [
{
"title": "一键拨号",
"link": "tel:123456789",
"icon": "phone",
"dataApi": ""
},
{
"title": "一键分享",
"link": "",
"icon": "share-square-o",
"dataApi": "data-am-navbar-share"
},
{
"title": "二维码",
"link": "",
"icon": "qrcode",
"dataApi": "data-am-navbar-qrcode"
},
{
"title": "关于我们",
"link": "http://yunshipei.com",
"icon": "user-md",
"dataApi": ""
},
{
"title": "下载说明",
"link": "http://yunshipei.com",
"icon": "download",
"dataApi": ""
},
{
"title": "联系我们",
"link": "http://yunshipei.com",
"icon": "location-arrow",
"dataApi": ""
}
]
}
};
var html = template(data);
$tpl.before(html);
/*
// 如果 Handlebars 渲染出来的 HTML 在 DOM ready 事件之后插入文档，需要手动初始化组件
$.each(['slider', 'menu', 'gallery', 'footer', 'navbar'], function(i, m) {
var module = $.AMUI[m];
module && module.init && module.init();
})
*/
</script>
</body>
</html>