banner image
Home / jquery plugin / Chuyển đổi ngôn ngữ trực tiếp trên trang web không cần tải lại với plugin Internationalization i18next

Chuyển đổi ngôn ngữ trực tiếp trên trang web không cần tải lại với plugin Internationalization i18next

i18next là một thư viện javascript đầy đủ tính năng để dịch trang web của bạn. Ví dụ này cho thấy chuyển đổi ngôn ngữ trực tiếp trên nút hoặc nhấp vào liên kết. Mỗi lần nhấp vào liên kết, i18next sẽ tải tệp json với ngôn ngữ đã chọn và khởi tạo lại bản dịch, vì vậy ngôn ngữ mới xuất hiện mà không cần tải lại trang.

Tạo ra cấu trúc thư mục như hình sau (chỉ hoạt động ở localhost vì phải load file json)



Code file index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example translate language with i18next</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/1.11.1/i18next.min.js"></script>
    <script>
        $(function() {
            // Configuration
            // Add options
            i18n.init({
                resGetPath: 'js/languages/__lng__.json',
                debug: true,
                fallbackLng: false,
                load: 'unspecific'
            },function () {
                $('body').i18n();
            });
            // English
            if(i18n.lng() === "en") {
                // Set active class
                $('.language-switch .dropdown-menu li').removeClass('active');
                $('.english').parent().addClass('active');
                // Change language in dropdown
                $('.language-switch-current').html("English ");
            }
            // Vietnam
            if(i18n.lng() === "vn") {
                // Set active class
                $('.language-switch .dropdown-menu li').removeClass('active');
                $('.vietnam').parent().addClass('active');
                // Change language in dropdown
                $('.language-switch-current').html("Việt Nam ");
            }
            
            // Change languages when click
            // English
            $('.english').on('click', function () {
                // Set language
                $.i18n.setLng('en', function() {
                    $('body').i18n();
                });
                // Set active class
                $('.language-switch .dropdown-menu li').removeClass('active');
                $('.english').parent().addClass('active');
                // Change name language in dropdown
                 $('.language-switch-current').html("English ");
            });
            // Vietnam
            $('.vietnam').on('click', function () {
                // Set language
                $.i18n.setLng('vi', function() {
                    $('body').i18n();
                });
                // Set active class
                $('.language-switch .dropdown-menu li').removeClass('active');
                $('.vietnam').parent().addClass('active');
                // Change name language in dropdown
                 $('.language-switch-current').html("Việt Nam ");
            });
        });
    </script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#" data-i18n="header.home">Trang chủ</a></li>
                    <li><a href="#" data-i18n="header.introduce">Giới thiệu</a></li>
                    <li><a href="#" data-i18n="header.product">Sản phẩm</a></li>
                    <li><a href="#" data-i18n="header.service">Dịch vụ</a></li>
                    <li><a href="#" data-i18n="header.contact">Liên hệ</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown language-switch">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                         <span class="language-switch-current">English </span><span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="active">
                             <a role="button" class="english">English</a>
                            </li>
                            <li>
                             <a role="button" class="vietnam">Việt Nam</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

Code file en.json

{
    "header": {
        "home"      : "Home",
        "introduce" : "Introduce",
        "product"   : "Products",
        "service"   : "Services",
        "contact"   : "Contact Us" 
    }
}

Code file vi.json

{
    "header": {
        "home"      : "Trang chủ",
        "introduce" : "Giới Thiệu",
        "product"   : "Sản Phẩm",
        "service"   : "Dịch Vụ",
        "contact"   : "Liên Hệ" 
    }
}

Với thuộc tính placeholder thì như sau: 

<input type="text" data-i18n="[placeholder]showcase.search-placeholder">
Chuyển đổi ngôn ngữ trực tiếp trên trang web không cần tải lại với plugin Internationalization i18next Chuyển đổi ngôn ngữ trực tiếp trên trang web không cần tải lại với plugin Internationalization i18next Reviewed by kentrung on January 17, 2019 Rating: 5

Liên hệ

Mỗi người một quan điểm, mỗi người một cách code khác nhau. Đây chỉ là ý kiến mang tính cá nhân trong quá trình học tập, nghiên cứu, làm việc... Nếu có gì thiếu sót hoặc code bị lỗi rất mong nhận được những lời đánh giá và sửa sai từ các bạn. Hy vọng chúng ta cùng nhau phát triển trên con đường sự nghiệp lập trình. Các bạn có thể liên hệ với mình qua một trong những hình thức dưới đây:

You May Also Like

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.