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. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  2. plusGallery

    JavaScript

    Google+のような画像ギャラリーを実装できる「plusGallery」

    plusGalleryはGoogle+のような画像ギャラリーを実装する…

  3. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  4. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  5. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  6. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP