【本篇教程需要依赖于PathJs-UI框架】
首先,再开始的时候先放一波简介:
PathJs是一款响应式JavaScript UI框架,他有着出色的能力,帮助你化繁为简。有了他,你大可不必担心繁杂的UI设计工作,只需2行代码,轻松胜任工作里的一切事物。
再来波链接:
好了,现在正式开始!
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就是里面要显示的代码(如果需要显示<>请使用>和<)【content里面如果需要换行请写
】,id填写一个独一无二的就行、url不写、size是代码域的宽度,code不写,回调代码就随便
pathjsCreate("code","#div1","PathJs code","//这是一个代码域
//用<br>可以直接换行","pathjs1","","300","","");
4、这时我们就创建好了一个代码域,现在它还没显示,我们需要使用pathjsShow方法来让他显示
pathjsShow方法有2个参数,分别是:id和回调函数
于是我们这样写:
pathjsShow("pathjs1","");
5、现在我们运行一下,就会发现我们的html文件变成了这样:
现在我们就创建完成了!
Ps:同时,code还可以创建多个哦!但是要注意PathJs Id不能重复!
但是,创建多个的时候要注意!create方法必须集中统一写,像这样:
pathjsCreate("code","#div1","PathJs code","//这是一个代码域
//用<br>可以直接换行","pathjs1","","300","","");
pathjsCreate("code","#div1","PathJs code","//这是一个代码域2
//用<br>可以直接换行2","pathjs2","","300","","");
pathjsCreate("code","#div1","PathJs code","//这是一个代码域3
//用<br>可以直接换行3","pathjs3","","300","","");
pathjsShow("pathjs1","");
pathjsShow("pathjs2","");
pathjsShow("pathjs3","");
绝对不能像这样写:
pathjsCreate("code","#div1","PathJs code","//这是一个代码域
//用<br>可以直接换行","pathjs1","","300","","");
pathjsShow("pathjs1","");
pathjsCreate("code","#div1","PathJs code","//这是一个代码域2
//用<br>可以直接换行2","pathjs2","","300","","");
pathjsShow("pathjs2","");
pathjsCreate("code","#div1","PathJs code","//这是一个代码域3
//用<br>可以直接换行3","pathjs3","","300","","");
pathjsShow("pathjs3","");
否则会显示不全!
好了,那么教程就到此结束了!
警告框代码:(警告框一个页面同时只能出现一个哦!想了解更多,请参考)
pathjsCreate("alert","#div1","Hello PathJs","教程完结了!
欢迎访问来下载PathJs-UI哦!","pathjs1","","300","","");
pathjsShow("pathjs1","");