FormDialog

FormDialog는 일반적인 HTML FORM을 Dialog로 만들어줍니다. 사용자가 Form에 입력한 값은 자바스크립트 객체(Dictionary 혹은 Hash)로 변환됩니다.

FormDialog 인스턴스 생성하기

다음과 같은 코드를 통해 인스턴스를 만들 수 있습니다:

1. var dialog = new xq.Control.FormDialog(xed, html, onLoadHandler, onCloseHandler);

첫번째 인자(xed)는 xq.Editor 인스턴스 입니다. 두 번째 인자는 화면에 보여줄 HTML 스트링입니다. "<form ...> ... </form>"과 같은 형식으로 써주시면 됩니다. 혹은 화면의 안보이는 영역(이를테면 style="display: none;"으로 설정된 DIV 등)에 FORM을 넣어두고, 이에 대한 innerHTML을 얻어서 인자로 넘겨도 됩니다. 세번째 인자는 FORM이 화면에 나타날 준비가 끝나면 호출될 콜백 함수이며, 생략하려면 null을 넘기시면 됩니다. onCloseHandler 함수는 사용자가 FORM을 submit 하거나 cancel 할 때 발생합니다. FORM을 submit 한 경우라면 콜백 함수의 인자로 자바스크립트 객체가 넘겨집니다.

예를 들어 FORM이 다음과 같을 때

1. <form>
2. <input type="text" name="field1" />
3. <input type="text" name="field2" />
4. </form>

사용자가 field1에 "hello", field2에 "world"를 입력하고 submit을 한 경우 콜백 함수의 첫번째 인자는 다음과 같습니다:

1. {field1: "hello", field2: "world"}

따라서, 아래와 같은 코드로 폼 값을 얻어올 수 있습니다:

1. var onCloseHandler = function(data) {
2. alert(data.field1 + " " + data.field2);
3. }

FormDialog 화면에 보여주기

FormDialog를 생성하였으면 다음 코드를 통해 다이얼로그를 화면에 나타낼 수 있습니다:

1. dialog.show();

참고로, 다이얼로그가 뜰 때 특정 필드에 자동으로 초점(focus)을 주고 싶으면 해당 필드에 class="initialFocus" 속성을 지정하시면 됩니다:

1. <input type="text" name="url" class="initialFocus" />

예제

xq.Editor.handleLink 함수에서 FormDialog API를 이용하여 기본적인 링크 다이얼로그를 구현한 코드를 참고하시기 바랍니다.