이 페이지에서는 UI 편집기에서 GUI 작업을 수행 할 때 자동으로 생성 된 JavaScript 코드에 대해 설명합니다.

자동 평가 (Auto Eval)에 대해

편집기의 컨텍스트 메뉴에서 갔다는 JavaScript 코드로 변환되어 자동으로 JavaScript 탭에 기록됩니다.
UI 편집기를 생성하는 jQuery 코드의 각 행의 시작 부분에 다음과 같은 코멘트가 붙습니다.

/*!kz:autoeval*/

이 댓글이 붙는 줄 jQuery 코드는 해당 요소가 나타나면 즉시 평가됩니다.

이에 따라 그리기 지연을 방지 할 수 있습니다.

해당 페이지 로딩 완료 (DOMContentLoaded)시까지 평가되지 않고 남은 코드는 그 시점에서 정리해 평가됩니다.

※ 자동 평가 대상의 요소가 존재하지 않으면 이후 JavaScript 탭에 기술 된 편집은 실행을 중단됩니다. 여러 페이지를 대상으로 디자인 만들 때주의하시기 바랍니다.

jQuery 메소드

• 편집기에서 사용할 수있는 jQuery 버전은1.10.2 입니다.
• jQuery의 메소드에 관해서는여기를 참조하십시오.

Edit HTML

다음 메소드를 사용하여 설정 된 HTML의 상태에 짧은 코드로 변경합니다.

• html(val)
• replaceWith(content)
• append(content)
• remove()
• attr(properties)

Edit Style

attr 메소드 style 속성을 설정합니다.

• attr(properties)

Edit Attributes

다음 메소드를 사용하여 설정 한 속성으로 변경합니다.

• attr(properties): 속성의 추가 · 값의 변경
• removeAttr(name): 속성 제거

Set background image

설정 한 이미지의 URL을 이용하여 css({ "background-image": "이미지 URL" })과 같은 JavaScript 코드를 추가합니다.

• css(properties)

Custom jQuery Code

임의의 jQuery 코드를 추가 할 수 있습니다. jQuery 참조 를 참조하십시오.

요소를 제거

• remove()

Drag Position

다음과 같은 코드를 사용하여 부모 요소의 상대적인 좌표를 설정합니다.

$("#element").css({"position":"relative","left":"150px","top":"69px"});

• css(properties)

이미지를 삽입

append(content)메소드를 사용하여<img> 태그를 삽입합니다.

• append(content)

Insert HTML

• before(content): 요소 앞에 HTML을 삽입한다.
• insertBefore(content): 요소를 지정한 다른 요소의 전에 삽입한다.
• after(content): 요소 후에 HTML을 추가한다.
• insertAfter(content): 요소를 지정한 다른 요소의 뒤에 삽입한다.
• prepend(content): HTML을 요소의 선두에 삽입한다.
• append(content): HTML을 요소의 끝에 추가한다.
• wrap(html): HTML 요소를 표시한다.
• wrapInner(html): 자식 요소를 HTML 요소를 표시한다.
• clone(): 요소를 복제하고 복제를 선택 상태로한다.

※주의 사항
편집기의 사양에 「HTML를 삽입 '에서 요소를 추가하는 경우 "(세미콜론)"를 클릭하면 Syntax error 될 수 있습니다. 대처법은 두 가지 방법이 있습니다.

ex. .after(“테스트”) 에서 Syntax error가 나오는

1. 「;(세미콜론)」을 탈출
   .after("<a href=\"javascript:void(0)\;\">테스트</a>")

2. 「;(세미콜론)」을 삭제
   .after("<a href=\"javascript:void(0)\">테스트</a>")