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

Inspiration for Menu Hover Effectsオシャレで多彩なホバーエフェクト実装「Inspiration for Menu Hover Effects」前のページ

パララックス効果を備えたスライダーを実装できる「PIGNOSE-ParallaxSlider」次のページPIGNOSE-ParallaxSlider

関連記事

  1. no-image

    JavaScript

    スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」

    ScrollFixはスクロール時に特定の要素を固定して表示できるjQu…

  2. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  3. 3D Cube CountDown script
  4. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  5. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  6. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP