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

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  2. Jquery progress indicator on page scroll
  3. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

  4. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  5. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  6. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP