서 문 .
최근에 독 자가 블로그 를 통해 저에게 문의 했습니다 . 노 드 - 레 드 노 드를 사용자 정의 할 때 노 드의 구성 페이 지를 작성 하는 방법은 우리가 일반적으로 볼 수있는 이 중 노 드 에서 열 리는 정보 팝 업 입니다 .다음 그림 :
위의 두 그림 은 in ject 노 드와 m q tt in 노 드의 구성 팝 업 창 을 보여줍니다 .
팝 업 창 에서는 위의 삭제 , 취소 , 완료 및 아래 의 무 효 화 버튼 을 제외하고 .
중간 부분은 모두 개발 자가 직접 작성 해야 합니다 .
필요한 버튼 , 필요한 입력 상 자 및 텍스트 필 드 .
노 드 구성 팝 업 은 사용자 구성 이며 노 드 구성 데이터를 수정 하는 주요 방법입니다 .
아래 는 이 부분을 어떻게 작성 하는지 알려 드리 겠습니다 .
구성 팝 업 은 노 드의 ht ml 파 일에 작성 되어
<script type = text / ht ml 데이터 - template - name = node - type"""">
<!--편집 대화 상 자 내용 -->
</ script>스크 립 트 태 그의 type 속 성은 text / ht ml 으로 구성 되어야 하며 , 이는 편집 자가 js 구 문을 강조 표시 하는 데 도움이 됩니다 .
태 그 에는 데이터 - template - name 속 성이 포함되어 있어야 하며 , 스크 립 트가 해당 노 드 유형 에 적용 되는 것으로 보입니다 .
여기서 ht ml 을 작성 할 수 있습니다 .
다음과 같이 표시 합니다 .
<div 클래 스 = form - row"">
<label for=>
<input type=">
</ div>
위의 상 자는 이름을 입력 하는 데 사용됩니다 .일부 클래 스는 form - row 과 같은 공식 클래 스를 직접 사용할 수 있으며 , 이 클래 스는 정보를 줄 로 표시 하는 블록 레벨 요소 를 만드는 데 도움이됩니다 .
개발 자가 자체 적으로 CSS 와 HTML 을 작성 하는 것 외에도 Node - Red 은 모든 사람들이 사용할 수있는 표준 구성 요소 를 제공합니다 .
노 드 구성 팝 업 창 을 작성 하기 위해 그들을 사용하면 더 아름답 고 단순 하며 노 드 레 드의 전반 적인 스타 일에 잘 맞 을 것입니다 .
아래 와 함께 한번 보세요 .
단 추
버튼 이 자주 사용 되기 때문에 모든 공식 은 표준 버튼 구성 요소 세 트를 제공합니다 .
이런 식으로 사용할 수 있습니다 .
<button type = button class = red - ui - button 버튼 / 버튼""""><> <button type=> <span class="> <button type=> </ span / span>
위의 코 드에 대한 표시 버튼
입력 상 자
입력 상 자를 사용 하려면 공식 제공 한 사례 를 살펴 볼 수 있습니다
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">
如果你要使用选择框
<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"},
]
}
]
})
它就会表现成这样子。
多行文本域
在node-red中多行文本域其实都是 使用的代码编辑器，使用monaco或者ace
你可以这样使用
<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-example-editor"></div>
// 使用RED.editor.createEditor 方法创建编辑器，
this.editor = RED.editor.createEditor({
id: 'node-input-example-editor',
mode: 'ace/mode/text',
value: this.exampleText
});
// 在保存或取消时，销毁无用的对象，释放资源
oneditsave: function() {
this.exampleText = this.editor.getValue();
this.editor.destroy();
delete this.editor;
},
oneditcancel: function() {
this.editor.destroy();
delete this.editor;
},
编辑器效果
总结
node-red提供的自定义节点功能，让我们可以自由地制作各种各样的节点来满足自己的需要。
之前有个读者说他们要在node-red中做直播会议系统，非常佩服这些人的创造力。
要想더 빨리, 더 잘 사용 가능한 노드를 개발, 기본 기술을 잘해야 만장 빌딩은 먼저 기초를 잘해야합니다.너는 배웠다니?
Markdown
请问怎么赋值数据到form里面呢