웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
샘플화면
언어선택옆에 언어별국기 출력하기
2010.09.17 23:13
XE 레이아웃들은 보통 XE 기본스킨의 언어출력소스를 사용합니다.
언어선택옆에 언어별국기가 출력되면 언어 선택시 좀 더 편리해지겠죠.
xe_official_v2 레이아웃에 있는 소스를 수정해 봅니다.
layout.html 파일을 열어서 언어출력소스를 수정합니다.
<li class="language">
<!-- class="language" | class="language open" -->
<em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em>
<button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button>
<ul class="languageList">
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li>
<!--@end--><!--@end-->
</ul>
</li>
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<a href="#" onclick="doChangeLangType('{$key}');return false;"><img src="./img/flag/{$key}.png" width="16px" height="11px" style="margin-top:2px;"></a>
<!--@end--><!--@end-->
</ul>
빨간색부분을 추가합니다.
flag.zip 파일의 압축을 풀어서 각나라 국기들을 ./layouts/xe_official_v2/img/flag 방안에 올립니다.
그러면 언어출력옆에 관리자 Setting화면에서 선택한언어들의 국기가 각각 출력됩니다.<!-- class="language" | class="language open" -->
<em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em>
<button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button>
<ul class="languageList">
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li>
<!--@end--><!--@end-->
</ul>
</li>
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<a href="#" onclick="doChangeLangType('{$key}');return false;"><img src="./img/flag/{$key}.png" width="16px" height="11px" style="margin-top:2px;"></a>
<!--@end--><!--@end-->
</ul>
샘플화면