UIModuleSearch

Module Search

특정 모듈을 찾아야 할 필요가 있을 때 사용하는 UI 패턴이다. 기존 Module Finder와 기능은 동일하나 불편한 UI를 개선하기 위해서 개발됐다. 이 UI를 통해 선택할 수 있는 값은 모듈 종류, 모듈 아이디(고유 숫자)이다.

Basics

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

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

1. 모든 컨트롤은 moduleSearch라는 클래스를 가진 요소의 하위 요소이다.
2. 모듈 검색 창을 띄우는 버튼은 tgAnchor 및 moduleSearch라는 클래스를 가지는 앵커 요소(<a>)이다.
3. 모듈 선택 후 실행하고자 하는 함수는 moduleSearch라는 클래스를 가진 컨테이너 요소에 moduleSelect라는 이벤트 명으로 할당 해 둔다.

4. 위에 언급한 내용을 모두 포함하는 마크업은 아래와 같다.

   
   

   
   <script><br> jQuery(function($){<br> $('.moduleSearch1').bind('moduleSelect', function(e, aSelected){<br> var sType, sName, sSrl;</p> <div class="codehilite"><pre><span></span><code><span class="w"> </span><span class="k">for</span><span class="p">(</span><span class="nf">var</span><span class="w"> </span><span class="n">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="n">nLen</span><span class="o">=</span><span class="n">aSelected</span><span class="p">.</span><span class="n">length</span><span class="p">;</span><span class="w"> </span><span class="n">i</span><span class="o">&lt;</span><span class="n">nLen</span><span class="p">;</span><span class="w"> </span><span class="n">i</span><span class="o">++</span><span class="p">)</span><span class="err">{</span> <span class="w"> </span><span class="n">sType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">aSelected</span><span class="o">[</span><span class="n">i</span><span class="o">]</span><span class="p">.</span><span class="n">type</span><span class="p">;</span> <span class="w"> </span><span class="n">sName</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">aSelected</span><span class="o">[</span><span class="n">i</span><span class="o">]</span><span class="p">.</span><span class="n">browser_title</span><span class="p">;</span> <span class="w"> </span><span class="n">sSrl</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">aSelected</span><span class="o">[</span><span class="n">i</span><span class="o">]</span><span class="p">.</span><span class="n">module_srl</span><span class="p">;</span> <span class="w"> </span><span class="n">xe</span><span class="p">.</span><span class="n">broadcast</span><span class="p">(</span><span class="ss">&quot;ADD_MODULE_TO_MODULELIST_MANAGER&quot;</span><span class="p">,</span><span class="w"> </span><span class="o">[</span><span class="n">sType, sName, sSrl</span><span class="o">]</span><span class="p">);</span> <span class="w"> </span><span class="err">}</span> <span class="err">}</span><span class="p">);</span> </code></pre></div> <p>});<br> </script>

   <!-- 모듈 선택 창을 띄울 앵커 태그 -->
   <a href="#moduleSearchWindowDiv" class="tgAnchor moduleSearch">{$lang->cmd_find}</a>
   
   <!-- 모듈 선택 창 마크업 -->
   <div id="moduleSearchWindowDiv" class="moduleSearchWindow tgContent">
       <div class="siteList sectionDiv">
           <h2>{$lang->select_site}</h2>
           <div class="siteListSearchBox">
               <div class="siteListSearchBoxBorder">
                   <div class="searchImg icon-search"></div>
                   <input type="text" class="siteListSearchInput" name="site_filter">
               </div>
           </div>
           <div class="siteListUL">
               <ul>
               </ul>
           </div>
       </div>
       <div class="moduleTypeList sectionDiv">
           <h2>{$lang->select_module_type}</h2>
           <div>
               <ul class="moduleTypeListUL">
               </ul>
           </div>
       </div>
       <div>
           <!-- 단수 항목 선택 가능일 경우 multiple 속성 없앰 -->
           <select class="moduleInstanceListSelect" style="width:100%" multiple="multiple" size="8">
           </select>
       </div>
       <button class="btn btn_primary moduleSearch_ok" style="float:right">{$lang->cmd_select}</button>
   </div>
   

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

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

jQuery Plugin

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

$('.moduleSearch').xeModuleSearch();