ゴール

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

レシピ概要

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. 他のページに行っても言語切り替えを維持する

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