-
Notifications
You must be signed in to change notification settings - Fork 1
/
diylibrary.html
150 lines (118 loc) · 7.04 KB
/
diylibrary.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基于 jPlusUI 创建自己的组件库 - 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">基于 jPlusUI 创建自己的组件库</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">
<a href="src/" target="_blank" class="x-thumbnail"><img src="assets/web/preview/list.png" /></a>
</p>
<p class="demo">点击右边的 <code class="demo">✚ 添加组件</code> , 填好组件的分类和名字，然后点<code class="demo">添加并转到</code>（注意仅在使用 localhost 打开网站的时候才会显示这个按钮。）</p>
<p class="demo">
<img src="assets/web/preview/add.png" />
</p>
<p class="demo">系统会帮您新建以下 3 个文件： (其中 Test 是刚才填的分类，MyButton 则是组件名）</p>
<ul class="demo">
<li>src/Test/MyButton.html</li>
<li>src/Test/assets/scripts/MyButton.js</li>
<li>src/Test/assets/styles/MyButton.css</li>
</ul>
<p class="demo">
<img src="assets/web/preview/mybutton.png" />
</p>
<p class="demo">在相应的 js/css 文件中编写组件自身的源码。在 html 中编写组件的示例。一个组件就可以完成了。</p>
<h3 class="demo">第四步：使用组件</h3>
<p class="demo">一次项目可能要用到 10 个组件，因此需要一个工具将这 10 个组件提取出来使用。</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">其中，组件路径即"组件大分类.组件分类.组件名"。比如我们刚才添加的 MyButton ，其路径为 Controls.Test.MyButton。</p>
<h3 class="demo">第五步：使用组件</h3>
<p class="demo">
<img src="assets/web/preview/dplbuilderresult.png" />
</p>
<p class="demo">写完后点击保存并生成，即可得到一个 js 和 css文件。这2个文件包含了之前填写的组件及其依赖的组件。在项目中引用这 2 个文件即可使用组件了。</p>
<h3 class="demo">扩展阅读：使用模块化的组件加载方式</h3>
<p class="demo">如果项目比较大，使用模块化的组件加载方式会更轻松。库中 Widgets 分类下的组件都遵循 CommonJs 规范。</p>
<!--<a href="" class="x-button">下载组件开发细则</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>