用“响应式JS-UI框架PathJs-UI制作一个代码域”

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

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

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

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

好了，现在正式开始！

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

<html>
    <head>
        <title>Pathjs Demo</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/pathjs.js"></script>
        <script>
            window.onload = function(){
                
            }
        </script>
    </head>
    <body>
        <div id="div1">
        
        </div>
    </body>
</html>

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里面如果需要换行请写<br>】，id填写一个独一无二的就行、url不写、size是代码域的宽度，code不写，回调代码就随便

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

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

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

于是我们这样写：

pathjsShow("pathjs1","");

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

现在我们就创建完成了！

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

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

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

绝对不能像这样写：

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

否则会显示不全！

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

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

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

用“响应式JS-UI框架PathJs-UI制作一个代码域”

猜你喜欢