jQuery で多言語切り替え

#ゴール#
[日本語 ←→ 英語] の表示をワンクリックで切り替えたい。それも読み込み無しで。

#レシピ概要#

1 UIはトグルスイッチのライブラリを探してきて使います
2 両言語のコンテンツを読み込んでから、必要なもの以外を非表示にすることで実現
3 言語情報をセッションに保持して他のページに行っても維持する

##1. UIのトグルスイッチ##
Simon Tabor 氏作成の jQuery Toggles (http://simontabor.com/toggles/ )を使います。

smarty.tpl

<div id="language-swicher" class="toggle-light" ></div>

<script type="text/javascript">
jQuery(function() {
	$('#language-swicher').toggles({
		text:{on:'日本語',off:'English'},
	});
	$('#language-swicher').on('toggle', function (e, active) {
		if (active) {
			showLanguage('jp');  // 日本語を表示 詳細後述
		} else {
			showLanguage('en');  // 英語を表示
		}
	});
	showLanguage('jp');  // デフォルトで日本語を表示
</script>

$(セレクタ).toggles(); を空div要素に実行するだけでトグルスイッチになる優れもののライブラリです。
$(セレクタ).on('toggle', function (e, active) {}); は、トグルが実行された際のコールバック関数。
showLanguage(); については後述します。

スタイルを調整してこんな感じのトグルスイッチができました。

##2-1. ページには両言語のコンテンツを読み込む##
要は以下のようなHTMLを書くということです。

html

<h1 class="jp">日本語見出し</h1>
<h1 class="en">English Title</h1>
<p class="jp">日本語の本文です。日本語の本文です。日本語の本文です。日本語の本文です。</p>
<p class="en">Text in English. Text in English. Text in English. Text in English. Text in English. </p>

##2-2. 必要なもの以外を非表示にする##
前述の showLanguage(); で、任意のクラス名だけを表示させます。

showLangage()

// 言語切り替え
function showLangage(lang) {
	var langSet = ["jp", "en"];		// 切り替え対象の locale リスト
	for (var i = 0, len = langSet.length; i < len; i++) {
		if (lang === langSet[i]) {
			$('.' + langSet[i]).show();
		} else {
			$('.' + langSet[i]).hide();
		}
	}
	setLang(lang);	// セッション保持：後述
}

##3-1.言語情報をセッションに保持##
言語切替スイッチを操作した際に、選んだ言語をセッションに保持します。
showLangage() で言語の表示切り替えが終わってから、 setLand() を実行します。

setLang()

// 言語設定をセッションに保存する
function setLang(lang) {
	$.post(
		'session_set.php',
		{
			'lang': lang
		},
		function(data){
			// 特に何もしない
		}
	);
}

これは単純に session_set.php に lang をパラメータにリクエストをしているだけです。
各フレームワークで標準のセッション管理を行なって下さい。

session_set.php

<?php
session_start();
$_SESSION['lang'] = $_REQUEST['lang'];
// サンプルのため 動作未確認です
?>

##3-2. 他のページに行っても言語切り替えを維持する##

トグルスイッチまわりの記述に以下のように追記します。

smarty.tpl

<div id="language-swicher" class="toggle-light" ></div>

<script type="text/javascript">
jQuery(function() {
	$('#language-swicher').toggles({
		text:{on:'日本語',off:'English'},
		// 追記ここから : トグルの初期選択状態
		<!--{if $session.lang == "en"}-->
			on: false
		<!--{else}-->
			on: true
		<!--{/if}-->
		// 追記ここまで
	});
	$('#language-swicher').on('toggle', function (e, active) {
		if (active) {
			showLanguage('jp');  // 日本語を表示 詳細後述
		} else {
			showLanguage('en');  // 英語を表示
		}
	});
	// 追記ここから : ページ読み込み時にセッション値に応じて表示を切り替え
	<!--{if $session.lang == "en"}-->
		showLanguage('en');  // 英語を表示
	<!--{else}-->
		showLanguage('jp');  // 日本語を表示
	<!--{/if}-->
	// 追記ここまで
</script>

< !--{if}-- >< !--{else}-- >< !--{/if}-- > はSmartyタグです。他のテンプレートエンジンやPHP記述でも実現可能です。

#動作例#
http://i-yan.com/world_food/