forked from Teal/TealUI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgetstarted.html
136 lines (114 loc) · 5.88 KB
/
getstarted.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三分钟快速上手 - jPlusUI</title>
<link href="assets/web/styles/jplus-welcome.css" rel="stylesheet">
<link href="assets/demo/demo.css" rel="stylesheet">
<style>
#forkmeongithub {
position: absolute;
top: 0;
right: 0;
}
body {
font-family: 'Microsoft YaHei';
}
h2.demo {
font-size: 24px;
line-height: 40px;
}
</style>
<script src="assets/web/scripts/jplus-welcome.js" type="text/javascript"></script>
<script>var Demo = {web: true}</script>
<script src="assets/demo/demo.js" type="text/javascript"></script>
</head>
<body>
<a href="https://github.com/jplusui/jplusui/" target="_blank" id="forkmeongithub">
<img src="assets/web/images/fork_me_on_github.png">
</a>
<div id="topbar">
<div class="x-container x-clear">
<h1 class="x-left"><a href="index.html" title="jPlusUI - 一个轻量但完整的UI组件库">jPlusUI</a></h1>
<ul class="x-left">
<li><a href="whyjplusui.html" title="组件概念">组件概念</a></li>
<li><a href="features.html" title="设计思路和原则">设计理念</a></li>
<li><a href="demo.html" title="查看组件列表">文档和演示中心</a></li>
<li><a href="download.html" title="获取 jPlusUI">下载</a></li>
<li><a href="community.html" title="讨论和联系方式">社区</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="body">
<article class="demo">
<h2 class="demo">三分钟快速上手 <small>最快时间体验组件化的乐趣</small></h2>
<h3 class="demo">1. 下载</h3>
<p class="demo">下载 <a href="https://github.com/downloads/jplusui/jplusui/jplusui-1.0b-release.zip">jplusui-latest-release.zip</a> , 或者下载 <a href="https://github.com/jplusui/jplus-milk/zipball/master">jPlusUI 源码</a> </p>
<p class="demo">解压zip文件，会得到如下文件结构: </p>
<script class="demo" type="text/plain">
jPlusUI-latest/
└── build/
├── images/
├── styles/
│ ├── jplus.css
│ ├── jplus.min.css
└── scripts/
├── jplus.js
└── jplus.min.js
</script>
<p>其中，<code>jplus.*</code> 是已经编译好的源文件，包含了 100 多个常用组件。<code>jplus.min.*</code> 是相应的压缩版。您也可以使用 <a href="/assets/dpl/dplfilelist.html" target="_blank">组件合成工具</a> 来自行编译需要用到的组件。</p>
<h3 class="demo">2. 引入文件</h3>
<p class="demo">新建一个 HTML 文件，内容如下:</p>
<script class="demo-noformat" type="pre/html">
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
##<link href="__build/styles/jplus.css__" rel="stylesheet">##
##<script src="__build/scripts/jplus.js__" type="text/javascript"></\script>##
</head>
<body>
<h1>Hello j+ UI!</h1>
</body>
</html>
</script>
<p class="demo">以上文件已经引入了 jPlusUI 所需要的全部文件。jPlusUI 不支持怪癖(Quirks)模式，因此必须定义<!DOCTYPE>, 推荐使用 HTML 5版本的 <!DOCTYPE></p>
<h3 class="demo">3. 使用组件（以按钮为例）</h3>
<p class="demo">从<a href="src/Controls/Button/Button.html" target="_blank">按钮的示例页</a>粘贴如下代码: </p>
<script class="demo demo-noformat" type="code/html">
<button class="x-button">我是按钮</button>
</script>
即可见到效果：
<button class="x-button">我是按钮</button>
<p class="demo">所有组件都可以复制示例页中的代码并立即见到效果。</p>
<p class="demo"><strong>jPlusUI 拥有超过 100 个常用组件, 每个组件都有对应的示例和文档。</strong></p>
<p>
<a class="x-button x-button-large x-button-fixed" href="demo.html">查看更多组件示例 »</a>
</p>
<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"jplusui"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- Duoshuo Comment END -->
</article>
</div>
<div id="footer">
<div class="x-container">
<span class="x-right"><a href="about.html">关于我们</a> | <a href="LICENSE.txt" target="_blank">The BSD License</a> | <a href="https://github.com/jplusui/jplusui/issues/new" target="_blank">意见反馈</a> | <a href="community.html">加入我们</a></span>
Copyright © 2011-2012 jPlusUI Team. All Rights Reserved.
</div>
</div>
</div>
<script type="text/javascript" src="assets/web/scripts/stat.js"></script>
</body>
</html>