-
Notifications
You must be signed in to change notification settings - Fork 1
/
whyjplusui.html
253 lines (185 loc) · 11.3 KB
/
whyjplusui.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
<!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="组件概念" class="selcted">组件概念</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">新一代组件概念</h2>
<style>
.block {
width: 480px;
float: left;
}
.block p {
text-align: center;
}
.block .next-page {
margin-top: 30px;
}
.block .left {
text-align: left;
}
.fixsize {
width: 418px;
}
</style>
<div class="x-carousel x-center" id="carousel" style="width: 480px; height: 400px;margin-top: 90px">
<ul class="x-clear x-carousel-body">
<li class="block block-1">
<p class="demo">
jPlusUI 不仅仅是简单的“又一个 UI 组件库”
</p>
<p class="demo">
它更多地代表了一个全新的开放组件模式。
</p>
<p class="demo next-page ">
<a href="javascript:;" onclick="carousel.moveTo(1);" class="x-button x-button-alt x-button-large">下一页</a>
</p>
</li>
<li class="block">
<p class="demo left">
请选择最符合您需求的一项：
</p>
<p>
<a href="javascript:;" onclick="carousel.moveTo(2);" class="x-button x-button-alt x-button-large left fixsize">我只需要一个浮层、日期选择器这样一些简单的组件。</a>
</p>
<p>
<a href="javascript:;" onclick="carousel.moveTo(4);" class="x-button x-button-alt x-button-large left fixsize">我不会设计，但又希望能快速搭建出漂亮的页面。</a>
</p>
<p>
<a href="javascript:;" onclick="carousel.moveTo(6);" class="x-button x-button-alt x-button-large left fixsize">我希望在通用组件基础上继续做一些和业务有关的组件。</a>
</p>
</li>
<li class="block">
<h4 class="demo">Q：我只需要一个浮层、日期选择器这样一些简单的组件。</h4>
<p class="demo left">
A：网上有很多现成组件。但是：
</p>
<ol class="demo left" style="margin-left: 44px;">
<li>有些组件功能多，代码大，而我只需要最简单的功能。</li>
<li>组件的风格不是我想要的。</li>
<li>组件之间风格不统一，而且也有很多重复的代码。</li>
<li>个人写的组件用到我的项目里就会出各种问题，最后还是得自己写。</li>
</ol>
<p class="demo next-page ">
<a href="javascript:;" onclick="carousel.moveTo(3);" class="x-button x-button-alt x-button-large">下一页</a>
</p>
</li>
<li class="block">
<a href="javascript:;" class="x-right" onclick="carousel.moveTo(1);">返回第一页</a>
<h4 class="demo">jPlusUI 为您提供简单但完整的组件。</h4>
<p class="demo left">
所有组件都可以方便地<strong>自定义样式、扩展功能</strong>。组件遵循统一的规范，使用方式完全一致。用户还可以先修改组件再使用。
</p>
<p class="demo next-page ">
<a href="demo.html" class="x-button x-button-alt x-button-large" target="_blank">组件 Demo </a> <a href="getstarted.html" class="x-button x-button-alt x-button-large" target="_blank">三分钟快速上手</a> <a href="diy.html" class="x-button x-button-alt x-button-large" target="_blank">定制组件</a>
</p>
</li>
<li class="block">
<h4 class="demo">Q：我不会设计，但又希望能快速搭建出漂亮的页面。</h4>
<p class="demo left">
A：我需要一些包含常用效果的 css 框架，这样就可以方便地 DIY 出自己的页面，又能保证漂亮。
</p>
<p class="demo next-page ">
<a href="javascript:;" onclick="carousel.moveTo(5);" class="x-button x-button-alt x-button-large">下一页</a>
</p>
</li>
<li class="block">
<a href="javascript:;" class="x-right" onclick="carousel.moveTo(1);">返回第一页</a>
<h4 class="demo">jPlusUI 内置了一套完整的 CSS 框架。</h4>
<p class="demo left">
从 css reset 到常用的菜单效果，jPlusUI 让您在没有设计稿的时候，快速构建出一个完整的漂亮的页面。
</p>
<p class="demo next-page ">
<a href="demo.html" class="x-button x-button-alt x-button-large" target="_blank">组件 Demo </a>
</p>
</li>
<li class="block">
<h4 class="demo">Q：我希望在通用组件基础上继续做一些和业务有关的组件。</h4>
<p class="demo left">
A：虽然每个公司都有自己的组件库，但都是根据自身业务需要而做的，特别是很多代码都加上了公司的 logo。而像 Extjs, jQuery UI 这样的知名 UI 框架，用它现成的组件很方便，但在其基础上添加自己的组件却很麻烦。
</p>
<p class="demo left">做组件更主要是要有一套完整的组件体系：从组件的开发到使用的完整解决方案。</p>
<p class="demo next-page ">
<a href="javascript:;" onclick="carousel.moveTo(7);" class="x-button x-button-alt x-button-large">下一页</a>
</p>
</li>
<li class="block">
<a href="javascript:;" class="x-right" onclick="carousel.moveTo(1);">返回第一页</a>
<h4 class="demo">jPlusUI 让您的公司快速拥有适合自己的组件库。</h4>
<p class="demo left">
任何用户都可以克隆 jPlusUI 组件库，并在其基础上<strong>任意添加、修改</strong>组件。
</p>
<p class="demo left">
项目里提供了很多做组件、用组件的工具。用户可以使用工具将用到的组件提取出来，自带的或用户自己做的组件一视同仁。
</p>
<p class="demo next-page ">
<a href="diylibrary.html" class="x-button x-button-alt x-button-large">如何开始</a>
</p>
</li>
</ul>
</div>
<script>
var MyCarousel = Carousel.extend({
onChange: Function.empty
});
var carousel = new MyCarousel('carousel');
carousel.stop();
var p = Dom.query('.block-1').children().hide();
var i = 0;
p.item(i++).show(1000).fx().then(function () {
if (i < p.length) {
p.item(i++).show(1200).fx().then(arguments.callee);
}
});
</script>
</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>