Node-Red 物联网平台二次开发教程6:Red-Sample中定制界面

1.介绍

Node-Red已经预留了修改界面的接口,不懂的可以翻看本站Node-Red配置项的详解;

仔细阅读editorTheme相关的内容.

2.加载自定义JS,CSS文件

通过Node-Red预留的配置接口,可以加载自定义JS和CSS文件;

有了这两个文件,就可以为所欲为的修改界面了;

不会JS和CSS的,去补习前端知识吧.

Red-Sample在Node-Red中加载了myred.css和myred.js这两个文件,见下图:

myred.js文件:

$(document).ready(function () {
    const newDiv = document.createElement('div')
    newDiv.setAttribute("class", "my-logout red-ui-editor")
    newDiv.innerHTML = '<a href="/api/ui">DashBoard</a><a href="/logout">注销账户</a> '

    const headerElement = document.querySelector("#red-ui-header")
    headerElement.appendChild(newDiv)
    console.log(newDiv)
    console.log(headerElement)
})

myred.css文件:

#red-ui-header span.red-ui-header-logo img {
    height: 30px !important;
}
.my-logout{
    line-height: 40px;
    float: right;
    background: #000;
    margin-right: 20px;
}
.my-logout a{
    vertical-align:middle;
    font-size: 16px;
    color: #ccc !important;
    padding: 0px 10px;
}