-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdiy.html
118 lines (97 loc) · 5.21 KB
/
diy.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
<!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">如何定制组件</h2>
<h3 class="demo">第一步：下载项目</h3>
<p class="demo">
下载地址: <a href="https://github.com/jplusui/jplusui/" target="_blank">https://github.com/jplusui/jplusui/</a></p>
<p class="demo">
<img src="assets/web/preview/download.png" /></p>
<h3 class="demo">第二步：启动服务器</h3>
<p class="demo">
库里的所有开发工具都是使用 <a href="http://nodejs.org" target="_blank">Node.js</a> 开发的。所以需要执行跟目录的 startserver.bat 启动服务器（linux 下为 startserver.sh）。<br />
控制台中显示如下文字说明服务器启动成功。关闭控制台可关闭服务器。<a href="javascript:alert('修改 assets/demo/demo.js 内的端口号。')">[端口冲突?]</a></p>
<p class="demo">
<img src="assets/web/preview/cmd.png" />
</p>
<h3 class="demo">第三步：定制组件</h3>
<p class="demo">在浏览器中输入 <code class="demo">http://localhost:50001/src</code>，即可见到组件列表。</p>
<p class="demo">在组件列表页点右上角的 <code class="demo">工具/组件合成工具</code> 即可进入合成工具界面。</p>
<p class="demo">点击右上角的 <code class="demo">新建合成方案</code>。</p>
<p class="demo">
<img src="assets/web/preview/dplbuilder.png" />
</p>
<p class="demo">其中，组件路径即"组件大分类.组件分类.组件名"。</p>
<h3 class="demo">第四步：使用组件</h3>
<p class="demo">
<img src="assets/web/preview/dplbuilderresult.png" />
</p>
<p class="demo">写完后点击保存并生成，即可得到一个 js 和 css文件。这2个文件包含了之前填写的组件及其依赖的组件。在项目中引用这 2 个文件即可使用组件了。</p>
<a href="demo.html">返回组件列表</a>
<!-- 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>