阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.lang js 中文API文档

      插件 jQuery.lang js 中文API文档 https://github.com/Irrelon/jquery-lang-js

      即时切换客户端的内容语言

      在不重新加载页面或向服务器发出请求的情况下更改语言

      例子参考:https://github.com/Irrelon/jquery-lang-js/blob/master/index.html

      这个jQuery插件允许您通过提供从默认语言(如英语)到其他语言的短语翻译来创建内容的多种语言版本。

      特征

      • 即时语言切换 - 无需重新加载页面
      • 自动翻译页面的动态部分(例如通过AJAX加载或通过jQuery添加)
      • 跨页面的语言持久性和通过cookie重新加载(需要js-cookie.js插件)
      • 支持正常表达式搜索/替换非基于令牌的翻译
      • 支持在语言更改时更改图像URL
      • 用于自定义处理的事件挂钩
      • 没有间隔或超时,只是高性能代码

      How to use

      如果您希望语言选择自动保留在页面中,请确保您在页面上包含js-cookie插件: https://github.com/js-cookie/js-cookie .

      在头标记中包含插件脚本。

      <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
      

      将以下内容添加到头部或正文中的HTML页面中:

      <script type="text/javascript">
      	// Create language switcher instance
      	var lang = new Lang();
      	
      	lang.init({
      		defaultLang: 'en'
      	});
      </script>
      

      init() 方法采用具有以下结构的options对象:

      lang.init({
      	/**
      	 * The default language of the page / app.
      	 * @type String
      	 * @required 
      	 */
      	defaultLang: 'en',
      	
      	/**
      	 * The current language to set the page to.
      	 * @type String
      	 * @optional 
      	 */
      	currentLang: 'en',
      	
      	/**
      	 * This object is only required if you want to override the default
      	 * settings for cookies.
      	 */
      	cookie: {
      		/**
      		 * Overrides the default cookie name to something else. The default
      		 * is "langCookie".
      		 * @type String
      		 * @optional
      		 */
      		name: 'langCookie',
      		
      		expiry: 365,
      		path: '/'
      	},
      	 
      	/**
      	 * If true, cookies will override the "currentLang" option if the
      	 * cookie is set. You usually shouldn't need to specify this option
      	 * at all unless your JavaScript lang.init() method is being
      	 * dynamically generated by PHP or other server-side processor.
      	 * @type Boolean
      	 * @optional 
      	 */
      	allowCookieOverride: true
      });
      

      动态加载语言包(推荐)

      请注意您必须在调用init()方法之前声明您的动态语言包。通过dynamic()方法声明你的包不会从服务器加载你的包,它只是告诉库哪个包是这样的,当语言切换到包处理的语言时,然后从服务器请求包.

      您可以预先加载网站提供的所有语言包,而不是在用户请求更改语言时加载包。该插件允许您简单地定义包及其路径,然后它将处理按需加载它们。要定义要加载的语言包,请在插件加载并实例化后动态调用lang.dynamic()方法:

      // Define the thai language pack as a dynamic pack to be loaded on demand
      // if the user asks to change to that language. We pass the two-letter language
      // code and the path to the language pack js file
      lang.dynamic('th', 'js/langpack/th.json');
      

      Example:

      var lang = new Lang();
      
      lang.dynamic('th', 'js/langpack/th.json');
      
      lang.init({
          defaultLang: 'en'
      });
      

      包括语言包预装(可选)

      使用语言包的推荐方法是动态定义它们(请参阅上面动态加载语言包)

      您可以包含您预先创建的任何语言包,以便他们可以直接在您的页面上使用。如果以这种方式执行此操作,则必须使语言包成为JS文件并包含一行代码以将包插入Lang原型中。有关示例,请参阅./langPack/nonDynamic.js文件。注意正则表达式部分以及这需要直接定义正则表达式模式而不是字符串。

      <script src="js/langpack/nonDynamic.js" charset="utf-8" type="text/javascript"></script>
      

      定义要翻译的元素

      在HTML内容本身中,您可以通过添加带有内容语言的“lang”属性来表示可用于翻译的元素:

      <span lang="en">Translate me</span>
      

      或者包含某些内容的任何元素,例如:

      <select name="testSelect">
          <option lang="en" value="1">An option phrase to translate</option>
          <option lang="en" value="2">Another phrase to translate</option>
      </select>
      

      按钮元素

      当定义如下时,插件将自动翻译按钮元素文本:

      <button lang="en">Some button text</button>
      

      占位符文字

      您还可以像这样翻译占位符文本:

      <input type="text" placeholder="my placeholder text" lang="en" />
      

      更改语言时,插件将更新存在转换的占位符文本。

      翻译JavaScript中的其他文本,例如alert()调用

      如果您需要知道JavaScript代码中某些文本的当前翻译值,例如调用alert()时可以使用translate()方法:

      alert(window.lang.translate('Some text to translate'));
      

      使用自定义标记翻译长文本

      如果您不想创建具有长令牌的翻译文件,则可以为包含长文本的元素指定自定义标记。

      要定义自定义标记,请向该元素添加data-lang-token属性.

      <div lang="en" data-lang-token="lorem">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in ...</div>
      

      翻译长文本

      "lorem" : "ตรงกันข้ามกับความเชื่อที่นิยมกัน Lorem Ipsum ไม่ได้เป็นเพียงแค่ชุดตัวอักษรที่สุ่มขึ้นมามั่วๆ แต่หากมีที่มาจากวรรณกรรมละตินคลาสสิกชิ้นหนึ่งในยุค  ..."
      

      Limitation: Elements with data-lang-token attribute, have to contain only one text node, otherwise the plugin uses text content as a token.

      动态内容

      如果您动态加载内容并使用jQuery将其添加到DOM,则插件将自动转换为当前语言。确保在将任何要添加的HTML添加到DOM之前已将“lang”属性添加到DOM中.

      切换语言

      要切换语言,只需调用.change()方法,传递两个字母的语言代码即可切换到。例如,这里有一个切换器,它将在示例页面中使用的英语和泰语之间切换:

      <a href="#lang-en" onclick="window.lang.change('en'); return false;">Switch to English</a> | <a href="#lang-en" onclick="window.lang.change('th'); return false;">Switch to Thai</a>
      

      onclick事件是唯一重要的部分,您可以将onclick应用于您喜欢的任何元素。

      定义语言包

      语言包在JSON文件中定义,并添加到插件中,如下所示:

      {
          // Define token (exact phrase) replacements here
          "token": {
              "Property Search":"ค้นหา",
              "Location":"สถานที่ตั้ง",
              "Budget":"งบประมาณ",
              "An option phrase to translate":"งบประมาณงบประมาณสถานที่ตั้ง",
          },
          // Define regular expression replacements here
          "regex": [
              ["My regex", "i", "someReplacement"]
          ]
      }
      

      该示例仅定义了一个语言包,用于将默认页面语言英语翻译成泰语(th)。令牌对象内的每个属性都有一个键,即英语短语,然后该值是泰语等价物。

      正则表达式部分允许您指定用于匹配和替换的正则表达式。仅在未找到一段文本的基于标记的替换时才评估正则表达式。

      就这么简单

      使用动态包

      当你调用lang.change(‘th’)时,插件将检查语言包是否已经加载,如果没有,将在更改语言之前加载包。加载包文件后,插件将更改为该语言。

      只有在调用change()方法时才会动态加载语言。这意味着如果您通过translate()方法请求转换字符串,则在加载该语言的语言包之前,转换将失败。

      如果您需要加载语言包并且不想更改页面语言,可以通过调用loadPack()方法请求手动加载包,如下所示

      lang.loadPack('th');
      

      如果您需要知道何时加载包,请通过回调方法:

      lang.loadPack('th', function (err) {
          if (!err) {
              // The language pack loaded
          } else {
              // There was an error loading the pack
          }
      });
      

      翻译自定义元素属性

      该插件维护一个将自动转换的属性列表,您也可以指定自己的自定义属性。默认情况下转换的属性是:

      • title
      • alt
      • placeholder
      • href

      您可以通过将自定义属性添加到lang-js实例的attrList属性来指定它们。例如,要自动翻译名为“data-name”的属性,您可以在页面中包含lang-js后添加此属性:

      Lang.prototype.attrList.push('data-name');
      

      从版本2升级到版本3

      版本3引入了一种实例化和初始化库的新方法,该方法提供了更好的界面,允许对库进一步增强,而不必为每个增强功能引入重大更改。

      在版本3之前,您将通过以下方式实例化库:

      var lang = new Lang('defaultLanguageCode');
      

      现在有一个新的init()方法,应该在定义动态加载语言后调用:

      // Instantiate the library
      var lang = new Lang();
      
      // Declare a dynamic language pack
      lang.dynamic('th', 'js/langpack/th.json');
      
      // Initialise the library
      lang.init({
          defaultLang: 'en'
      });
      
      目录
      目录