阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.i18next 中文API文档

      插件 jQuery.i18next 中文API文档 https://github.com/i18next/jquery-i18next

      源码可以通过 npm, bower 或者 从GitHub下载.

      如果您不使用模块加载器,它将被添加到window.jqueryI18next

      # npm package
      $ npm install jquery-i18next
      
      # bower
      $ bower install jquery-i18next
      

      简化了基于jquery构建的项目中的i18next使用情况,例如:

      页面来源:

      <ul class="nav">
        <li><a href="#" data-i18n="nav.home"></a></li>
        <li><a href="#" data-i18n="nav.page1"></a></li>
        <li><a href="#" data-i18n="nav.page2"></a></li>
      </ul>
      

      加载的资源文件 (locales/en/translation.json):

      {
        "nav": {
          "home": "Home",
          "page1": "Page One",
          "page2": "Page Two"
        }
      }
      

      javascript code:

      $(".nav").localize();
      
      // results in
      // <ul class="nav">
      //  <li><a href="#" data-i18n="nav.home">Home</a></li>
      //  <li><a href="#" data-i18n="nav.page1">Page One</a></li>
      //  <li><a href="#" data-i18n="nav.page2">Page Two</a></li>
      // </ul>
      

      初始化插件

      jqueryI18next.init(i18nextInstance, $, {
        tName: 't', // --> appends $.t = i18next.t
        i18nName: 'i18n', // --> appends $.i18n = i18next
        handleName: 'localize', // --> appends $(selector).localize(opts);
        selectorAttr: 'data-i18n', // selector for translating elements
        targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if different than itself)
        optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
        useOptionsAttr: false, // see optionsAttr
        parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
      });
      

      在翻译功能中使用选项

      <a id="btn1" href="#" data-i18n="myKey"></a>
      $("#btn1").localize(options);
      

      or

      <a id="btn1" href="#" data-i18n="myKey" data-i18n-options='{ "a": "b" }'></a>
      $("#btn1").localize();
      

      data-i18n-options attribute必须是有效的JSON对象。

      选择器功能的用法

      翻译元素

      <a id="btn1" href="#" data-i18n="myKey"></a>
      $("#btn1").localize(options);
      

      myKey:与i18next中使用的密钥相同(可选择使用名称空间)选项:与i18next.t中支持的选项相同

      翻译元素的子元素

      <ul class="nav">
        <li><a href="#" data-i18n="nav.home"></a></li>
        <li><a href="#" data-i18n="nav.page1"></a></li>
        <li><a href="#" data-i18n="nav.page2"></a></li>
      </ul>
      $(".nav").localize();
      

      翻译一些内在元素

      <div class="outer" data-i18n="ns:key" data-i18n-target=".inner">
        <input class="inner" type="text"></input>
      </div>
      $(".outer").localize();
      

      设置不同的属性

      <a id="btn1" href="#" data-i18n="[title]key.for.title"></a>
      $("#btn1").localize();
      

      设置多个属性

      <a id="btn1" href="#" data-i18n="[title]key.for.title;myNamespace:key.for.text"></a>
      $("#btn1").localize();
      

      设置innerHtml属性

      <a id="btn1" href="#" data-i18n="[html]key.for.title"></a>
      $("#btn1").localize();
      

      前置内容

      <a id="btn1" href="#" data-i18n="[prepend]key.for.title">insert before me, please!</a>
      $("#btn1").localize();
      

      追加内容

      <a id="btn1" href="#" data-i18n="[append]key.for.title">append after me, please!</a>
      $("#btn1").localize();
      

      设定数据

      <a id="btn1" href="#" data-i18n="[data-someDataAttribute]key.for.content"></a>
      $("#btn1").localize();
      
      目录
      目录