jquery.xtr

JavaScript

クライアントサイドで変換してくれる「jquery.xtr」

jquery.xtrはページのリフレッシュなしにクライアントアイドでテキストを変換してくれるjQueryプラグインです。多言語に対応させたWebサイトなんかに活用できそうですね。

jquery.xtr

デモ

デモでは、Welcom、Hello、Good Byeと書かれたテキストが並べられていて、その下にあるCurrent Languageから英語以外の言語を選択できるようになっています。

他の言語を選択してみると、ページリフレッシュなしに先ほどの3つのテキストが選択した言語に変換されます。その場でパッと多言語に置き換わるのでとても便利ですね。

使い方もシンプルでとても簡単です。jQueryとプラグインを読み込んだ状態で、表示させる要素には「xtr」という属性を加えるか、または「data-xtr-key="<translation key">」を付与します。

var <translations> = {
    "Welcome": {
        de: "Willkommen",
        fr: "Bienvenue",
        es: "Bienvenido"
    },
    "bye": {
        de: "Auf Wiedersehen",
        fr: "Au revoir",
        es: "Adi?s"
    }
};

あとはプラグインをセットすればOKです。

ページリフレッシュなしでクライアントサイドで変換させる機能を実装したいという人は、ぜひ「jquery.xtr」を使われてみてはいかがでしょうか?

jquery.xtr

関連記事

  1. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  2. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  3. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  4. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  5. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  6. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP