hint for plain old browser usage, fixes #83

i18next · Jan 3, 2022 · 4689d8f · 4689d8f
1 parent ace4566
commit 4689d8f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@ If you don't want to manage your translation files manually or are simply lookin
 
 Source can be loaded via [npm](https://www.npmjs.com/package/i18next-http-backend) or [downloaded](https://github.com/i18next/i18next-http-backend/blob/master/i18nextHttpBackend.min.js) from this repo.
 
+There's also the possibility to directly import it via a CDN like [jsdelivr](https://cdn.jsdelivr.net/npm/[email protected]/i18nextHttpBackend.min.js) or [unpkg](https://unpkg.com/[email protected]/i18nextHttpBackend.min.js) or similar.
+
 ```bash
 # npm package
 $ npm install i18next-http-backend
@@ -42,6 +44,13 @@ import Backend from 'https://deno.land/x/i18next_http_backend/index.js'
 i18next.use(Backend).init(i18nextOptions);
 ```
 
+for plain browser:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/i18nextHttpBackend.min.js"></script>
+<!-- an example can be found in example/jquery/index.html -->
+```
+
 - As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.
 - If you don't use a module loader it will be added to `window.i18nextHttpBackend`
 

diff --git a/example/jquery/index.html b/example/jquery/index.html
@@ -0,0 +1,39 @@
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/i18next.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-i18next.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/i18nextHttpBackend.min.js"></script>
+  </head>
+
+  <body>
+
+    <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>
+
+    <div class="content">
+      <input data-i18n="[placeholder]input.placeholder; [title]input.placeholder" />
+    </div>
+
+    <script>
+      i18next.use(i18nextHttpBackend).init({
+        debug: true,
+        fallbackLng: 'en' // evtl. use language-detector https://github.com/i18next/i18next-browser-languageDetector
+      }, function(err, t) {
+        // for options see
+        // https://github.com/i18next/jquery-i18next#initialize-the-plugin
+        jqueryI18next.init(i18next, $);
+
+        // start localizing, details:
+        // https://github.com/i18next/jquery-i18next#usage-of-selector-function
+        $('.nav').localize();
+        $('.content').localize();
+      });
+    </script>
+
+  </body>
+
+</html>
diff --git a/example/jquery/locales/en/translation.json b/example/jquery/locales/en/translation.json
@@ -0,0 +1,10 @@
+{
+  "input": {
+    "placeholder": "a placeholder"
+  },
+  "nav": {
+    "home": "Home",
+    "page1": "Page One",
+    "page2": "Page Two"
+  }
+}