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

时间 2019-11-13

标签响应框架 pathjs 制做一个代码栏目 JavaScript 繁體版

原文原文链接

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

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

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

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

好了，如今正式开始！函数

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

<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>

二、在window.onload里写建立PathJs控件的方法url

pathjsCreate();

三、接下来咱们往这个方法里写参数，这个建立控件的方法有9个参数，不过请放心，不是每一个参数都是须要填写的（参数分别是：type\div\title\content\id\url\size\code\CallBackCode）.net

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

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

四、这时咱们就建立好了一个代码域，如今它还没显示，咱们须要使用pathjsShow方法来让他显示code

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

因而咱们这样写：

pathjsShow("pathjs1","");

五、如今咱们运行一下，就会发现咱们的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","");