Hiện nay, đa ngôn ngữ là một tính năng khá phổ biến. Bạn có thể bắt gặp việc chuyển đổi ngôn ngữ trong điện thoại hoặc các website (như www.intel.com). Ta có nhiều cách để implement tính năng này.
Đang xem: Thiết kế giao diện bằng javascript
Đa ngôn ngữ (Multi Language)thường được áp dụng trên website nhằm mục đích thể hiện thông tin qua nhiều loại ngôn ngữ để tăng tính tiếp cận đối với thông tin đó. Đa ngôn ngữ cũng có nhiều phương thức thực hiện. Trong chuỗi bài viết này mình sẽ giới thiệu hai phương thức để implement tính năng đa ngôn ngữ cho website đó làĐa ngôn ngữ sử dụng JavaScriptvàĐa ngôn ngữ sử dụng .NET Resource.
Trong bài viết này sẽ giới thiệu phương thức implementĐa ngôn ngữ sử dụng JavaScript. Thực ra là Đa ngôn ngữ sử dụng JavaScript và file JSON, mà thôi dài dòng quá nên rút bớt lại cho nó ngắn gọn:)
Thiết kế giao diện
Đầu tiên ta thiết kế giao diện cơ bản của một trang đăng nhập, vì có tính năng đa ngôn ngữ nên ta sẽ gắn thêm 2 lá cờ English và Vietnam. Đoạn code html như sau:
Và đây là giao diện ta có được.
Chém thôi, đánh giống hệt như trên không ra giống vậy được đâu. Các bạn phải thêm css, bootstrap các kiểu nữa, nhưng mà muốn giới thiệu về nó thì phải viết một bài khác, trong phạm vi bài viết này chỉ chú trọng tới nội dung hiển thị là được.
Tạo bộ từ điển cho các ngôn ngữ tương ứng
Tiếp theo ta cần một bộ từ điển để website biết được nội dung cần hiển thị ứng với từng loại ngôn ngữ. Ví dụ như chữ trong nút Login đối với tiếng Anh làLogin, đối với tiếng Việt làĐăng nhậpchẳng hạn.
Bộ từ điển sẽ được chứa trong file JSON và được đặt trong thư mụclang. Cách tổ chức thư mục như sau:
Nội dung file là các key và nội dung của key đó tương ứng với ngôn ngữ.
Xem thêm: Review Kem Dưỡng Ẩm Cetaphil Moisturizing Cream? Review Kem Dưỡng Ẩm Cetaphil Có Tốt Không
Bây giờ ta thêm các keyvào từng thẻ hiển thị nội dung tương ứng bằng cách thêm thuộc tínhlangKey.
Ta cũng tạo thêm input cóid=”langCode”dùng để chứa mã ngôn ngữ cần chuyển đổi (ở đây ta có 2 mã làenvàvi)
Ta cần tạo file JavaScript làm nhiệm vụ chuyển đổi ngôn ngữ cho những thẻ chứalangKeytrên, đặt tên làlang.js
Mã ngôn ngữ mặc định là en để tránh lỗi trong trường hợp$(“#langCode”)không có giá trị.
var langCode = $(“#langCode”).val() || “en”;var jsonUrl = “../Content/lang/” + langCode + “.json”;var translate = function (jsdata) { $(“
Xử lý sự kiện
Đầu tiên ta thêm vào RouterConfig nội dung sau
Sau đó ta thêm actionChangeCulturevàoHomeController
Cũng trong Controller này ta gán giá trị mặc định cho mã ngôn ngữ khi lần đầu truy cập website. Trong ví dụ dưới ta gán mã ngôn ngữ mặc định là en
Cuối cùng làtạo thêm hyperlink trỏ tới actionChangeCulturecho 2 lá cờ phía trên
À nhớ thêm các thư viện jquery nữa nhé.
Kết quả ta thu được khi nhấn vào lá cờ Vietnam.
Xem thêm: App Sửa Lỗi Writing – 6 Phần Mềm Sửa Lỗi Ngữ Pháp Tiếng Anh Free
Tạm kết
Như vậy, bài viết đã cung cấp một phương thức implement tính năng Đa ngôn ngữ cho Website bằng cách sử dụng JavaScript. Đây là cách khá đơn giản và nhìn cũng khá là củ chuối, thích hợp cho những trang nhỏ, cần làm nhanh, không đòi hỏi quá chặt chẽ.
Bài viết sau mình sẽ giới thiệu phương thức thứ hai đó làĐa ngôn ngữ sử dụng .NET Resource
