myei-translatejs

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <link rel="stylesheet" href="css/dracula.min.css"> <link rel="stylesheet" href="css/docs.min.css"> <title>Translate.js :: Demo</title> </head> <body> <div class="container"> <div class="row"> <h1 class="display-3">Translate.js</h1> <hr> </div> <div class="row"> <div class="col-md-8 offset-md-2 col-sm-12"> <pre> <span class="badge bg-primary">HTML</span> <code class="html"> <script src="lang/es.js"></script> <script src="lang/en.js"></script> <script src="translate.min.js"></script> </code> </pre> </div> </div> <div class="row"> <div class="col-md-8 col-sm-12 offset-md-2"> <ul class="nav nav-tabs"> <li class="nav-item change-language" data-action="load-es" data-switch="true"> <a class="nav-link translate active" aria-current="page" href="javascript:;" data-translate="appLang.spanish"></a> </li> <li class="nav-item change-language" data-action="load-en" data-switch="true"> <a class="nav-link translate" href="javascript:;" data-translate="appLang.english"></a> </li> <li class="nav-item change-language" data-action="load-l-es"> <a class="nav-link" href="javascript:;">es</a> </li> <li class="nav-item change-language" data-action="load-l-en"> <a class="nav-link" href="javascript:;">en</a> </li> </ul> <pre class="load load-es"> <span class="badge bg-danger">JS</span> <code class="js"> var t = Translate({lang: 'es', className: 'translate'}); // Inicializado // Puedes verificarlo en la consola t.getLang(); // es t.get('greetings.good.morning'); // Buenos días </code> </pre> <pre class="load load-en hide"> <span class="badge bg-danger">JS</span> <code class="js"> var t = Translate({lang: 'en', className: 'translate'}); // Initializing // You could check in console t.getLang(); // en t.get('greetings.good.morning'); // Good morning </code> </pre> <pre class="hide load load-l-es"> <span class="badge bg-warning">lang</span> <code class="js"> var lang_es = { lorem: 'Deserunt sint excepteur culpa pariatur quis do eu nulla nisi dolore', congratulations: 'Felicitaciones!!', person: { firstName: 'Primer nombre', countryBirth: 'País de nacimiento' }, greetings: { good: { morning: 'Buenos días', night: 'Buenas noches' } }, country: { choose: 'Seleccione una opción' }, actions: { confirm: 'Confirmar', delete: 'Eliminar' }, appLang: { spanish: 'Español', english: 'Inglés' } }; </code> </pre> <pre class="hide load load-l-en"> <span class="badge bg-warning">lang</span> <code class="js"> var lang_en = { lorem: 'Exercitation velit quis excepteur ea aliquip non. Cupidatat tempor', congratulations: 'Congratulations!!', person: { firstName: 'First name', countryBirth: 'Country of birth' }, greetings: { good: { morning: 'Good morning', night: 'Goog night' } }, country: { choose: 'Choose an option' }, actions: { confirm: 'Confirm', delete: 'Delete', }, appLang: { spanish: 'Spanish', english: 'English' } }; </code> </pre> </div> </div> <div class="row example first-example"> <div class="col-md-8 col-sm-12"> <pre> <code class="html"> <p class="translate" data-translate="lorem"></p> </code> </pre> </div> <div class="col-md-4 col-sm-12"> <p class="translate" data-translate="lorem"></p> </div> </div> <div class="row example"> <div class="col-md-8 col-sm-12"> <pre> <code class="html"> <span class="translate" data-translate="congratulations" data-translate-title="person.countryBirth"></span> </code> </pre> </div> <div class="col-md-4 col-sm-12"> <span class="translate" data-translate="congratulations" data-translate-title="person.countryBirth"></span> </div> </div> <div class="row example"> <div class="col-md-8 col-sm-12"> <pre> <code class="html"> <div class="translate" data-translate="greetings.good.morning"></div> <div class="translate" data-translate="greetings.good.night"></div> </code> </pre> </div> <div class="col-md-4 col-sm-12"> <div class="translate" data-translate="greetings.good.morning"></div> <div class="translate" data-translate="greetings.good.night"></div> </div> </div> <div class="row example"> <div class="col-md-8 col-sm-12"> <pre> <code class="html"> <span class="translate" data-translate="person.firstName"></span> <input type="text" class="translate" data-translate="person.firstName"> </code> </pre> </div> <div class="col-md-4 col-sm-12"> <div class="input-group"> <span class="input-group-text translate" data-translate="person.firstName"></span> <input type="text" class="form-control translate" data-translate="person.firstName"> </div> </div> </div> <div class="row example"> <div class="col-md-8 col-sm-12"> <pre> <code class="html"> <select> <option value="" class="translate" data-translate="country.choose"></option> <option value="1">Venezuela</option> <option value="2">Argentina</option> <option value="3">Ecuador</option> <option value="4">Chile</option> </select> </code> </pre> </div> <div class="col-md-4 col-sm-12"> <select class="form-control"> <option value="" class="translate" data-translate="country.choose"></option> <option value="1">Venezuela</option> <option value="2">Argentina</option> <option value="3">Ecuador</option> <option value="4">Chile</option> </select> </div> </div> <div class="row example"> <div class="col-md-8 col-sm-12"> <pre> <code class="html"> <button class="translate" data-translate="actions.confirm"></button> <button class="translate" data-translate="actions.delete"></button> </code> </pre> </div> <div class="col-md-4 col-sm-12"> <button class="translate btn btn-primary" data-translate="actions.confirm"></button> <button class="translate btn btn-danger" data-translate="actions.delete"></button> </div> </div> </div> <script src="js/lang/es.min.js"></script> <script src="js/lang/en.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/myei/translate.js@master/translate.min.js"></script> <script src="js/docs.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <script src="js/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>