Skip to main content
Fim da Recompensa com 50 pontos de reputação concedidos por Onaiggac
removeu 23 caracteres do conteúdo
Fonte Link
Romulo
  • 825
  • 5
  • 9

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'i18n].

$.i18n().load({
  br: {
    'welcome': 'ola mundo'
  },
  en: {
    'welcome': 'hello world'
  },
  es: {
    'welcome': 'hola mundo'
  }
});

function changeLocale(locale) {

  $.i18n({
    locale: locale
  });

  $('[data-i18n]').i18n();

}

$(function() {

  $('button').on('click', function() {

    var locale = $(this).data('locale');

    changeLocale(locale);

  });

});

changeLocale('en'); // locale default da página
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>

</head>

<body>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

  <h1 data-i18n="welcome">ola mundo (fallback)</h1>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'welcome': 'ola mundo'
      },
      en: {
        'welcome': 'hello world'
      },
      es: {
        'welcome': 'hola mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

</body>

</html>

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'.

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>

</head>

<body>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

  <h1 data-i18n="welcome">ola mundo (fallback)</h1>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'welcome': 'ola mundo'
      },
      en: {
        'welcome': 'hello world'
      },
      es: {
        'welcome': 'hola mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

</body>

</html>

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n].

$.i18n().load({
  br: {
    'welcome': 'ola mundo'
  },
  en: {
    'welcome': 'hello world'
  },
  es: {
    'welcome': 'hola mundo'
  }
});

function changeLocale(locale) {

  $.i18n({
    locale: locale
  });

  $('[data-i18n]').i18n();

}

$(function() {

  $('button').on('click', function() {

    var locale = $(this).data('locale');

    changeLocale(locale);

  });

});

changeLocale('en'); // locale default da página
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
<script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>


<button type="button" data-locale="br">br</button>
<button type="button" data-locale="en">en</button>
<button type="button" data-locale="es">es</button>

<h1 data-i18n="welcome">ola mundo (fallback)</h1>
melhorando o exemplo
Fonte Link
Romulo
  • 825
  • 5
  • 9

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'.

O código pode ser executado da seguinte forma: $('[data-i18n]').i18n().

Exemplo

Segue abaixo um exemplo demonstrando o uso do plugin

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>

</head>

<body>

  <div<button type="button" data-i18n="ola">ola<locale="br">br</div>button>
  <div<button type="button" data-i18n="mundo">mundo<locale="en">en</div>button>
  <button type="button" data-locale="es">es</button>

  <h1 data-i18n="welcome">ola mundo (fallback)</h1>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'ola''welcome': 'ola',
        'mundo':'ola 'mundo'mundo'
      },
      en: {
        'ola''welcome': 'hello',
        'mundo':'hello 'world'world'
      },
      es: {
        'ola''welcome': 'hola',
        'mundo':'hola 'mundo'mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

</body>

</html>

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'.

O código pode ser executado da seguinte forma: $('[data-i18n]').i18n().

Exemplo

Segue abaixo um exemplo demonstrando o uso do plugin

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>

</head>

<body>

  <div data-i18n="ola">ola</div>
  <div data-i18n="mundo">mundo</div>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'ola': 'ola',
        'mundo': 'mundo'
      },
      en: {
        'ola': 'hello',
        'mundo': 'world'
      },
      es: {
        'ola': 'hola',
        'mundo': 'mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

</body>

</html>

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'.

O código pode ser executado da seguinte forma: $('[data-i18n]').i18n().

Exemplo

Segue abaixo um exemplo demonstrando o uso do plugin

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>

</head>

<body>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

  <h1 data-i18n="welcome">ola mundo (fallback)</h1>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'welcome': 'ola mundo'
      },
      en: {
        'welcome': 'hello world'
      },
      es: {
        'welcome': 'hola mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

</body>

</html>

possibilitando a execução do snippet
Fonte Link
Romulo
  • 825
  • 5
  • 9

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'.

O código pode ser executado da seguinte forma: $('[data-i18n]').i18n().

Exemplo

Segue abaixo um exemplo demonstrando o uso do plugin. É importante lembrar que o snippet não vai funcionar dentro do stackoverflow porque o código está apontando para a dependência local. Não consegui localizar o resource necessário em um CDN.

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="jquerysrc="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
  <script src="jquerysrc="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>

</head>

<body>

  <div data-i18n="ola">ola</div>
  <div data-i18n="mundo">mundo</div>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'ola': 'ola',
        'mundo': 'mundo'
      },
      en: {
        'ola': 'hello',
        'mundo': 'world'
      },
      es: {
        'ola': 'hola',
        'mundo': 'mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

</body>

</html>

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'.

O código pode ser executado da seguinte forma: $('[data-i18n]').i18n().

Exemplo

Segue abaixo um exemplo demonstrando o uso do plugin. É importante lembrar que o snippet não vai funcionar dentro do stackoverflow porque o código está apontando para a dependência local. Não consegui localizar o resource necessário em um CDN.

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="jquery.i18n.js"></script>
  <script src="jquery.i18n.messagestore.js"></script>

</head>

<body>

  <div data-i18n="ola">ola</div>
  <div data-i18n="mundo">mundo</div>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'ola': 'ola',
        'mundo': 'mundo'
      },
      en: {
        'ola': 'hello',
        'mundo': 'world'
      },
      es: {
        'ola': 'hola',
        'mundo': 'mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

</body>

</html>

Explicação

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'.

O código pode ser executado da seguinte forma: $('[data-i18n]').i18n().

Exemplo

Segue abaixo um exemplo demonstrando o uso do plugin

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
  <script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>

</head>

<body>

  <div data-i18n="ola">ola</div>
  <div data-i18n="mundo">mundo</div>

  <script type="text/javascript">
    $.i18n().load({
      br: {
        'ola': 'ola',
        'mundo': 'mundo'
      },
      en: {
        'ola': 'hello',
        'mundo': 'world'
      },
      es: {
        'ola': 'hola',
        'mundo': 'mundo'
      }
    });

    function changeLocale(locale) {

      $.i18n({
        locale: locale
      });

      $('[data-i18n]').i18n();

    }

    $(function() {

      $('button').on('click', function() {

        var locale = $(this).data('locale');

        changeLocale(locale);

      });

    });

    changeLocale('en'); // locale default da página
  </script>

  <button type="button" data-locale="br">br</button>
  <button type="button" data-locale="en">en</button>
  <button type="button" data-locale="es">es</button>

</body>

</html>

correção do texto
Fonte Link
Romulo
  • 825
  • 5
  • 9
Carregando
adicionou 49 caracteres ao conteúdo
Fonte Link
Romulo
  • 825
  • 5
  • 9
Carregando
Fonte Link
Romulo
  • 825
  • 5
  • 9
Carregando