제로보드 XE-다국어 선택기 펼치기

제로보드 다국어 기능
제로보드의 다국어 기능은 아래와 같이 셀렉트박스의 형태로 제공합니다.

사실 셀렉트 박스가 아니라 ul li 태그를 css로 셀렉트박스 처럼 만들어 놓은 것이지요.
태그를 열어보면 아래와 같이 ul li 그리고 그 속에 button이 있습니다.
실질적인 기능은 이 button이 합니다. ul li는 모양을 거들뿐이죠.



목표기능
이것을 아래와 같이 펼쳐진 형태로 만들려면 어떻게 해야 할까요?


ul li 태그를 css로 float:left 시킬 수도 있겠지만, 이렇게 하면 10가지가 넘는 언어 모두 보이게 됩니다.
저의 목적은 위와 같이 3개의 언어만 보이게 하는 것 입니다.
그래서 약간의 꼼수를 쓰기로 했습니다.

위 그림에 있는 KOREAN, ENGLISH, CHINESE에 해당하는 버튼을 만들고,
각 버튼을 클릭하면, ul li 속에 있는 특정 button을 클릭하도록 하는 것 입니다.
그리고 <div class="language">을 안보이게 합니다.


코딩
상단 헤더 부분은 layout.html에서 수정 합니다.
전 디폴트 레이아웃에다가 걍 코딩하는 중입니다.(/layouts/xe_official/layout.html)

먼저 버튼 3개를 만듭니다.
<div id="selectLang_ko" style="position:absolute;left:670px;width:86px;height:30px;cursor:pointer;"></div>
<div id="selectLang_en" style="position:absolute;left:756px;width:90px;height:30px;cursor:pointer;"></div>
<div id="selectLang_ch" style="position:absolute;left:846px;width:88px;height:30px;cursor:pointer;"></div>
전 div로 투명버튼을 자주 만듭니다. button으로 하려면 이미지 슬라이싱 해야 하니깐 귀찮습니다. 시간도 걸리구요.
div로 투명버튼을 만드는 방법은 position:absolute해주고, width,height 지정하고, left,top 지정하고, cursor:pointer만 먹여주면 됩니다. 때론 left,top 대신에 margin-left,margin-top을 사용해야 할 때도 있습니다.

그 다음 <ul class="selectLang">에서 특정 버튼들을 얻어 오고, 만들어둔 버튼에 연결시킵니다.
<script type="text/javascript">
// <![CDATA[
jQuery(function($){
    var $btnKo = $('.selectLang button:contains("한국어")');
    var $btnEn = $('.selectLang button:contains("English")');
    var $btnCh = $('.selectLang button:contains("中文(中国)")');
   
    $('#selectLang_ko').click(function(){ $btnKo.click(); });
    $('#selectLang_en').click(function(){ $btnEn.click(); });
    $('#selectLang_ch').click(function(){ $btnCh.click(); });
});
// ]]>
</script>

마지막으로 아래와 같이 셀렉트박스쪽을 안보이게 해줍니다.
없애면 안되고, 안보이게만 해줍니다.
<div class="language" style="display:none;">