摘自runjs
RunJS 是什么?
RunJS 是一个在线的 HTML、Javascript、CSS 等 web 前端代码的编辑分享平台,拥有实时预览、高亮显示、代码格式化等功能,我们提供 OSChina、微博、qq、github、google、yahoo、hotmail这七种登录方式,你只需要有七种任意一个帐号就可以点击右上角的登 录按钮来立即体验RunJS。
如何在 RunJS 上创建代码?
可以在 RunJS 的首页点击编辑器进入编辑器界面,登录后点击左边栏右上角的加号来添加代码。
Fork 是什么?如何 Fork 别人的代码?
Fork 就是分支的意思,如果你熟悉 Github,想必你对 Fork 不会陌生,这里的 Fork 也一样,你可以通过在代码详情页面的代码展示框点击右上角的 Fork 按钮,或者在查看源码页面点击左上角的 Fork 按钮来 Fork 别人的代码,这样你就拥有了当前代码的一份拷贝,可以自行维护。
如何上传图片、js、css 等资源文件?
在编辑器页面,你可以在左边栏下方的资源文件中看到你上传的资源文件,并可以在这里进行上传、删除、插入等操作。
如何使用一些第三方 js 库?
RunJS 已经提供了大量的常见 js 库(在 HTML 编辑器上方可以快速引用),如果您需要的库不在这其中,可以告诉我们,或者自行上传文件进行引用。
如何在代码中做 Ajax 调用的演示?
RunJS 提供了 Ajax 的 Echo API,可以方便用户测试 Ajax 功能,点击这里查看详细使用方法。
如何在外站嵌入 RunJS 的代码(gist)?
RunJS 推出的一个叫做 Gist 的小功能,假如你在 RunJS 上写好了代码,你可以通过在你自己的网站中加入如下 script 标签来引用该代码,代码将被语法着色,另外你还可以选择不同的主题样式。 使用办法:
- xxxxxxxx(代码标识符):使用代码的标识符替换掉,代码标识符可以在代码详情页和编辑器页面的 URL 中找到
- yyyy(代码类型):有(js、css、html、all)四种方式供选择,可以根据需要来定制。
- zzzzzz(主题样式):有(default、eclipse、django、emacs、fadetogrey、midnight、rdark)这七种主题样式可供选择,默认为default样式。
注:URL中所有字母均为小写。例如,在这个页面里我嵌入如下代码: 将出现如下效果:
HTML :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
http-equiv``=``"Content-Type"
content``=``"text/html; charset=UTF-8"``>
RunJS``title``>
class``=``"jqueryform library"
src``=``"/js/sandbox/jquery/jquery-1.8.2.min.js"
type``=``"text/javascript"``>``script``>
class``=``"jqueryform library"
src``=``"/js/sandbox/jquery-plugins/jquery.form-2.82.js"
type``=``"text/javascript"``>``script``>
``head``>
class``=``"white"``>RunJS echo 测试:``div``>
action``=``"/action/echo/json"
method``=``"post"
id``=``"form"``>
class``=``"white"``>参数1:``label``>
name``=``"p1"``/>
class``=``"white"``>参数2:``label``>
name``=``"p1"``/>
class``=``"white"``>参数3:``label``>
name``=``"p2"``/>
class``=``"white"``>参数4:``label``>
name``=``"p3"``/>
class``=``"white"``>参数5:``label``>
name``=``"name"``/>
type``=``"submit"``/>
``form``>
id``=``"result"
class``=``"white"``>``div``>
``body``>
``html``>
JavaScript :
1
2
3
4
5
6
7
$(document).ready(``function``() {
$(``"#form"``).ajaxForm({
success:
function``(m) {
$(``"#result"``).html(m);
}
});
})
CSS :
1
2
3
4
5
6
.``white``{
color``:``white``;
}
body{
background-color``:``black``;
}