html创建文件域的代码,用“响应式JS-UI框架PathJs-UI制作一个代码域”

【本篇教程需要依赖于PathJs-UI框架】

首先，再开始的时候先放一波简介：

PathJs是一款响应式JavaScript UI框架，他有着出色的能力，帮助你化繁为简。有了他，你大可不必担心繁杂的UI设计工作，只需2行代码，轻松胜任工作里的一切事物。

再来波链接：https://www.oschina.net/p/pathjs-ui

好了，现在正式开始！

1、首先在html文件里先把基础结构写好

Pathjs Demo

window.onload = function(){

}

2、在window.onload里写创建PathJs控件的方法

pathjsCreate();

3、接下来我们往这个方法里写参数，这个创建控件的方法有9个参数，不过请放心，不是每个参数都是需要填写的(参数分别是：type\div\title\content\id\url\size\code\CallBackCode)

type填写code，div填写#div1，title随便填写，content就是里面要显示的代码(如果需要显示<>请使用&gt和&lt)【content里面如果需要换行请写
】，id填写一个独一无二的就行、url不写、size是代码域的宽度，code不写，回调代码就随便

pathjsCreate("code","#div1","PathJs code","//这是一个代码域
//用&ltbr&gt可以直接换行","pathjs1","","300","","");

4、这时我们就创建好了一个代码域，现在它还没显示，我们需要使用pathjsShow方法来让他显示

pathjsShow方法有2个参数，分别是：id和回调函数

于是我们这样写：

pathjsShow("pathjs1","");

5、现在我们运行一下，就会发现我们的html文件变成了这样：

现在我们就创建完成了！

Ps：同时，code还可以创建多个哦！但是要注意PathJs Id不能重复！

但是，创建多个的时候要注意！create方法必须集中统一写，像这样：

pathjsCreate("code","#div1","PathJs code","//这是一个代码域
//用&ltbr&gt可以直接换行","pathjs1","","300","","");

pathjsCreate("code","#div1","PathJs code","//这是一个代码域2
//用&ltbr&gt可以直接换行2","pathjs2","","300","","");

pathjsCreate("code","#div1","PathJs code","//这是一个代码域3
//用&ltbr&gt可以直接换行3","pathjs3","","300","","");

pathjsShow("pathjs1","");

pathjsShow("pathjs2","");

pathjsShow("pathjs3","");

绝对不能像这样写：

pathjsCreate("code","#div1","PathJs code","//这是一个代码域
//用&ltbr&gt可以直接换行","pathjs1","","300","","");

pathjsShow("pathjs1","");

pathjsCreate("code","#div1","PathJs code","//这是一个代码域2
//用&ltbr&gt可以直接换行2","pathjs2","","300","","");

pathjsShow("pathjs2","");

pathjsCreate("code","#div1","PathJs code","//这是一个代码域3
//用&ltbr&gt可以直接换行3","pathjs3","","300","","");

pathjsShow("pathjs3","");

否则会显示不全！

好了，那么教程就到此结束了！

警告框代码：(警告框一个页面同时只能出现一个哦！想了解更多，请参考https://www.oschina.net/p/pathjs-ui)

pathjsCreate("alert","#div1","Hello PathJs","教程完结了！
欢迎访问https://www.oschina.net/p/pathjs-ui来下载PathJs-UI哦！","pathjs1","","300","","");

pathjsShow("pathjs1","");