用「響應式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","");