forked from sdc-alibaba/SUI-Mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgetting-started.html
More file actions
163 lines (145 loc) · 6.25 KB
/
Copy pathgetting-started.html
File metadata and controls
163 lines (145 loc) · 6.25 KB
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
---
layout: default
title: 开始使用 · SUI Mobile
---
<div class="docs-sub-header">
{% include masthead.html %}
<div class="container">
<div class="docs-sub-content">
<h2 class="page-title">开始使用</h2>
<p class="page-description">只需要如下几个简单的步骤，就可以在你的应用中使用SUI Mobile了.</p>
</div>
{% include ad.html %}
</div>
</div>
<div class="container">
<div class="column-group">
<div class="column docs-content">
<div class="docs-section">
<h2>创建页面</h2>
<p class="lead"></p>
<h3>1. 引用静态资源</h3>
<p>我们提供了CDN地址可以直接使用，并且强烈建议使用我们的CDN而不是下载到本地。</p>
{% highlight html %}
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/{{ site.version }}/css/sm.min.css">
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/{{ site.version }}/js/sm.min.js' charset='utf-8'></script>
{% endhighlight %}
<p>如果你用到了拓展包中的组件，还需要引用extend扩展包，为减少请求数，可以使用阿里CDN的combo功能：</p>
{% highlight html %}
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/{{ site.version }}/css/??sm.min.css,sm-extend.min.css">
<script type='text/javascript' src='//g.alicdn.com/msui/sm/{{ site.version }}/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
{% endhighlight %}
<h3>2. 调试代码</h3>
<p>如果你希望在开发环境下可以调试代码，那么你可以这样引用未压缩的版本</p>
{% highlight html %}
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/{{ site.version }}/css/sm.css">
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/{{ site.version }}/js/sm.js' charset='utf-8'></script>
<!--如果你用到了拓展包中的组件，还需要引用下面两个-->
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/{{ site.version }}/css/sm-extend.css">
<script type='text/javascript' src='//g.alicdn.com/msui/sm/{{ site.version }}/js/sm-extend.js' charset='utf-8'></script>
{% endhighlight %}
<h3>完整的页面模板</h3>
<p>你可以直接用下面的模板来创建你的页面：</p>
{% highlight html %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/{{ site.version }}/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/{{ site.version }}/css/sm-extend.min.css">
</head>
<body>
<div class="page-group">
<div class="page page-current">
<!-- 你的html代码 -->
</div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/{{ site.version }}/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/{{ site.version }}/js/sm-extend.min.js' charset='utf-8'></script>
</body>
</html>
{% endhighlight %}
<h2>使用组件</h2>
<p class="lead">上面已经有了页面的基本结构，下一步就是把你需要的组件塞进去，这里我们以一个卡片形式的页面为例。我们主要会用到导航栏和卡片两个组件。</p>
<p>首先，我们需要一个标题栏和工具栏。</p>
{% highlight html %}
<div class="page">
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
<span class="icon icon-left"></span>
返回
</a>
<h1 class="title">我的生活</h1>
</header>
<nav class="bar bar-tab">
<a class="tab-item active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">首页</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-me"></span>
<span class="tab-label">我</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-star"></span>
<span class="tab-label">收藏</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-settings"></span>
<span class="tab-label">设置</span>
</a>
</nav>
<div class="content">
<!-- 这里是页面内容区 -->
</div>
</div>
{% endhighlight %}
<p>然后我们在内容区中填上几个卡片</p>
{% highlight html %}
<div class="page-index">
<div class="card">
<div style="background-image:url(//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250.3.0q60.jpg)" valign="bottom" class="card-header color-white no-border">旅途的山</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">发表于 2015/01/15</p>
<p>此处是内容...</p>
</div>
</div>
<div class="card-footer">
<a href="#" class="link">赞</a>
<a href="#" class="link">更多</a>
</div>
</div>
<div class="card">
<div style="background-image:url(//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250.3.0q60.jpg)" valign="bottom" class="card-header color-white no-border">旅途的山</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">发表于 2015/01/15</p>
<p>此处是内容...</p>
</div>
</div>
<div class="card-footer">
<a href="#" class="link">赞</a>
<a href="#" class="link">更多</a>
</div>
</div>
... 可以多放几张卡片
</div>
{% endhighlight %}
<p>最终效果是这样的 <a href="/examples/getting-started/" target="_blank" data-ignore="push">示例</a></p>
</div>
</div>
<div class="column">
<!-- Footer -->
{% include footer.html %}
</div>
</div>