차단 도움말

도움말 팁과 도움말 URL 형식으로 차단 도움말을 제공할 수 있습니다.

도움말

도움말은 사용자가 블록 위로 마우스를 가져가면 즉시 도움을 제공합니다. 텍스트가 길면 자동으로 줄바꿈됩니다.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

자바스크립트

init: function() {
  this.setTooltip("Tooltip text.");
}

JavaScript API에서 도움말은 정적 문자열 대신 함수로 정의할 수도 있습니다. 이를 통해 동적 도움말을 제공할 수 있습니다. 선택한 드롭다운 옵션에 따라 변경되는 도움말의 예는 math_arithmetic를 참고하세요.

자바스크립트

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_ADD'],
        'MINUS': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MINUS'],
        'MULTIPLY': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MULTIPLY'],
        'DIVIDE': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_DIVIDE'],
        'POWER': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_POWER']
      };
      return TOOLTIPS[mode];
    });
  }
};

JavaScript API를 사용하면 블록에서 도움말 문자열을 반환하는 정적 문자열 대신 함수를 지정할 수 있습니다. 이를 통해 동적 도움말을 표시할 수 있습니다. 예를 보려면 math_arithmetic을 참고하세요.

맞춤설정

맞춤 렌더링 함수를 제공하여 도움말의 모양을 맞춤설정할 수도 있습니다. 두 개의 매개변수를 허용하는 함수를 만듭니다.

• 첫 번째는 콘텐츠를 렌더링할 <div> 요소입니다.
• 두 번째로 마우스 오버되어 도움말이 표시되는 실제 요소입니다.

함수 본문에서 원하는 콘텐츠를 div에 렌더링할 수 있습니다. 마우스 오버하는 블록에 정의된 도움말 문자열을 가져오려면 Blockly.Tooltip.getTooltipOfObject(element);를 호출하면 됩니다. 여기서 element는 위의 두 번째 매개변수입니다.

마지막으로 Blockly에서 적절한 시점에 호출할 수 있도록 이 함수를 등록합니다.

Blockly.Tooltip.setCustomTooltip(yourFnHere);

예를 보려면 커스텀 도움말 도움말 데모를 참고하세요.

도움말 URL

블록에는 관련 도움말 페이지가 있을 수 있습니다. 사용자는 블록을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 '도움말'을 선택하여 도움말을 확인할 수 있습니다. 이 값이 null이면 '도움말' 항목이 표시되지 않습니다.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

자바스크립트

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

JavaScript API를 사용하면 블록에서 URL 문자열을 반환하는 정적 문자열 대신 함수를 지정할 수 있으므로 동적 도움말을 사용할 수 있습니다.