적용버전 : XpressEngine 공통 언어(language) 선택 토글버튼 만들기

Can you speak English?

언어(language) 선택 토글버튼

언어선택옵션토글(toggle)이란 선택과 전송(submit)의 과정을 거치지 않고 버튼을 클릭하는 동작만으로도 기능을 실행하는 역할을 하게 됩니다. XE의 언어선택 버튼도 토글 버튼으로 동작하게 되는데 buttonLang.gif 라는 이미지를 사용하여 토글할 수 있도록 JS 문서에서 스크립트로 도움을 받고 있답니다.


<div class="language">
   <strong title="{$lang_type}">{$lang_supported[$lang_type]}</strong>
   <button type="button" class="toggle">
      <img src="./images/{$layout_info->colorset}/buttonLang.gif" alt="Select Language" width="87" height="15" />
   </button>
   <ul class="selectLang">
      <li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type">
         <button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button>
      </li>
   </ul>
</div>

토글 버튼을 클릭하면 "무엇을 실행할 것인가?" 는 JS 문서에서 jQuery 함수로 설정해 두었습니다.

// Language Select
$('.language>.toggle').click(function(){
   $('.selectLang').toggle();
});

document 문서($) 안에 있는 선택자 .language 를 찾아봐! 그러면 거기에 .toggle 이라는 선택자를 가진 버튼이 있을꺼야! 그것을 클릭(click)하면 다음의 함수(function) {... 부터 ...}까지 실행하면 되! 어떻게 하냐면, 문서 안에서 .selectLang 라는 선택자를 가진 태그를 다시한번 찾아! 그리고 그것을 토글시키면 되! 어떻게 토글하냐구? 너, jQuery 라이브러리 워크샵에 가서 졸았니? toggle() 함수를 요청하면 어떻게 하라고 2시간이나 떠들었는데 너! 뭐했니? Can you speak English?

toggle() 함수를 요청하면 해야 할 일의 방법은 이미 XE의 <head>...</head> 안에서 jquery.js 의 도움을 받도록 준비되어 있답니다...^^

<script type="text/javascript" src="./common/js/jquery.js"></script>


토글 버튼을 클릭하게 되면 여러 종류의 언어를 선택할 수 있도록 loop를 이용해 리스트를 만들게 됩니다. XE 관리자 제어판에서 언어선택 옵션에 사용하기로 체크한 항목을 $lang_supported 라는 변수로 받아와서 배열을 분해하고 {$val} 자리에 리스트로 표시합니다. 그리고 그 중에서 하나늘 클릭(onclick)하게 되면 XE에서 미리 정의된 doChangeLangType(''); 함수를 실행하게 됩니다. doChangeLangType은 선택한 언어옵션($key)으로 변경하라는 뜻이겠지요.

현재 페이지에서 선택된 언어 설정은 {$lang_supported[$lang_type]} 에 표시되고 언어 선택 리스트에는 표시되지 않습니다. 왜냐하면 cond="$key != $lang_type" 이 리스트를 만드는 조건 구문으로 사용 되었지요? !="같지 않다"는 의미입니다. 즉 "현재의 페이지에서 선택되어 사용되는 언어와 같지 않은 것만" 목록을 만들고 출력합니다.

나머지 꾸미기는 CSS로 도움을 받습니다.