UIModuleFinder

Module Finder

특정 모듈을 찾아야 할 필요가 있을 때 사용하는 UI 패턴이다. 이 UI르 통해 선택할 수 있는 값은 모듈 종류, 모듈 아이디(고유 숫자)이다.

Basics

모듈 검색기의 모든 컨트롤은 modulefinder라는 클래스를 가진 컨테이너의 하위 요소여야 한다.

모듈 검색기를 사용하기 위해 필요한 규칙은 다음과 같다.

1. 모든 컨트롤은 modulefinder라는 클래스를 가진 요소의 하위 요소이다.
2. 가상 사이트를 검색하는 버튼은 tgAnchor 및 findsite라는 클래스를 가지는 앵커 요소(<a>)이다.
3. 가상 사이트를 검색하기 위해 도메인을 입력하는 텍스트 입력 상자는 반드시 가상 사이트 검색 앵커 요소 바로 앞에 위치한 형제 노드여야 한다.
4. 가상 사이트 검색 결과는 tgContent 및 suggestion이라는 클래스를 가진 요소의 자식 요소인 ul에 표시된다.
5. 가상 사이트를 선택하면 해당 가상 사이트에 속한 모듈의 종류와 모듈 목록을 표시한다. 모듈의 종류는 moduleList라는 클래스를 가진 select 요소에 표시되고, 모듈 목록은 moduleIdList라는 클래스를 가진 select 요소에 표시된다.

다음은 위 규칙을 만족하는 모듈 검색기의 예시이다.

<ul>
<li class="modulefinder">
    <p class="q">방명록 데이터를 어디로 옮길까요?</p>
    <div class="a">
        <input type="text" name="site_keyword" /> <a href="#suggestion3" class="tgAnchor findsite">사이트 찾기</a>
        <div id="suggestion3" class="tgContent suggestion">
            <ul>
            </ul>
        </div>
    </div>
    <p class="a">
        <select class="moduleList"></select>
    </p>
    <p class="a">
        <select class="moduleIdList"></select>
    </p>
</li>
</ul>

위 코드를 작성한 후 웹 브라우저에서 열고 사이트 검색을 실행하면 다음과 같은 화면을 볼 수 있다.

사이트 검색을 실행하기 전에는 모듈 종류와 모듈 목록이 화면에 나타나지 않을 수도 있다.

jQuery Plugin

이 패턴은 페이지를 읽어들일 때 자동으로 실행되기 때문에 페이지 요소를 동적으로 생성하는 경우에는 적용되지 않는 문제가 있다. 다음과 같이 modulefinder 요소를 선택한 후 xeModuleFinder 메소드를 실행하면 페이지를 읽어들인 뒤에도 스크립트를 적용할 수 있다.

$('.modulefinder').xeModuleFinder();

[Anonymous]

Originally posted by: dodong1...@naver.com

오타 수정 : 이 UI르 통해 선택할... -> 이 UI를 통해 선택할...