- 1. 前言
- 2. Knopf
- 3. 输入框
- 4. 多行Text域
- 5. 总结
前言
最近有读者通过博客向我咨询，在Custom definiertnode-red节点时，如何编写该节点的配置页面，就是我们通Häufigzu的，双节节点Öffnen.的信息弹窗。如下图：
上面两张图，展示了inject节点与mqtt in 节点的配置弹窗。
在弹窗中，除了上面的Löschen，Absage，abgeschlossen.，和下面的失效Knopf。
中间部Unterteilung都是需要Entwickler自己编写的。
你需要什么Knopf，需要哪些输入框，还有Text域。
节点配置弹窗是用户配置，修改节点配置Daten的主要方式。
下面就教大家如何编写这部Unterteilung的页面
配置弹窗是编写在 节点的html 文件里 并且写在
<script type="text/html" data-template-name="node-type">
<!-- edit dialog content -->
</script>注意scriptKennzeichnung的 type属性 必须配置为 text/html，这能够帮助Herausgeber器高亮识别js语法。
Kennzeichnung还应该包含data-template-name 属性，表面该Drehbuch是应用于那个节点Typus。
你可以在这里编写html,
如下：
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
以上是一个用于输入名字的输入框。有些class是可以直接使用官方的，比如form-row ，该class会帮你创建一个块级元素，将信息展示一行一行地展示。
除了Entwickler自己编写css 和 html，node-red官方也提供了一些标准的组件供大家使用。
使用他们编写节点配置弹窗，会更美观，简约，也会很符合node-red的整体风格。
下面一起来看一下。
Knopf
由于Knopf经常被用zu，所有官方提供了一套标准的Knopf组件。
你可以这样使用
<button type="button" class="red-ui-button">Button</button> <button type="button" class="red-ui-button red-ui-button-small">Button</button> <span class="button-group"> <button type="button" class="red-ui-button toggle selected my-button-group">b1</button><button type="button" class="red-ui-button toggle my-button-group">b2</button><button type="button" class="red-ui-button toggle my-button-group">b3</button> </span>
以上代码的显示Knopf
输入框
如果你要使用输入框的话，可以看看官方提供的案例
Plain HTML Input <input type="text" id="node-input-name"> TypedInput String/Number/Boolean <input type="text" id="node-input-example1"> <input type="hidden" id="node-input-example1-type"> TypedInput JSON <input type="text" id="node-input-example2"> TypedInput msg/flow/global <input type="text" id="node-input-example3"> <input type="hidden" id="node-input-example3-type">
如果你要使用Auswahl框
<input type="text" id="node-input-example5">
$("#node-input-example5").typedInput({
types: [
{
value: "fruit",
multiple: "true",
options: [
{ value: "apple", label: "Apple"},
{ value: "banana", label: "Banana"},
{ value: "cherry", label: "Cherry"},
]
}
]
})
它就会表现成这样子。
多行Text域
在node-red中多行Text域其实都是 使用的代码Herausgeber器，使用monaco或者ace
你可以这样使用
<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-example-editor"></div>
// 使用RED.editor.createEditor 方法创建Herausgeber器，
this.editor = RED.editor.createEditor({
id: 'node-input-example-editor',
mode: 'ace/mode/text',
value: this.exampleText
});
// 在保存或Absage时，销毁无用的对象，释放资源
oneditsave: function() {
this.exampleText = this.editor.getValue();
this.editor.destroy();
delete this.editor;
},
oneditcancel: function() {
this.editor.destroy();
delete this.editor;
},
Herausgeber器效果
总结
node-red提供的Custom definiert节点Funktion，让我们可以自由地制作各种各样的节点来满足自己的需要。
之前有个读者说他们要在node-red中做直播会议Das System，非常佩服这些人的创造力。
要想更快，更好地开发出好用的节点，需要把基本功打好，万丈大楼先把地基打好。你学会啦吗？
Markdown 2920 字数 130 行数 gegenwärtig行 129, gegenwärtig列 36 Artikel已保存18:18:05
请问怎么ZuweisungDatenzuform里面呢