首页 > 代码库 > jqmobi 转换语言

jqmobi 转换语言

当第一次打开APP时,检测手机默认的语言,设置APP的语言跟手机默认一样;
当点击了APP里面的设置语言的按钮,存储当前设置的语言 ;
关闭APP;
再一次打开APP时,检测存储在APP里面的语言,转换语言;

1.html 中的设置

         

1                   <div class="language-set" id="language_set">2                            <li class="pressed" id="zh-TW"><a onclick="setlang(‘zh‘)" >中</a></li>3                           <li id="en-US"><a onclick="setlang(‘en‘)" >Eng</a></li>4                    </div> 

2. CSS中的样式

/*语言设置 CSS*/.language-set{    text-align:center;    width:100px;    height:35px;    line-height:35px;    font-size:14px;    background-color: rgba(247,247,247,1);    box-shadow: inset 0px 1.5px 3px 1px rgba(207,205,196,1);    display: box;}.language-set li{    width: 46px;    height: 100%;     display:block;    float:left;    margin-top: 2px;    margin-left: 2px;    margin-right: 2px;    }.language-set li a{   display: inline-block;    width: 100%;    height: 90%;    border-radius: 5px;} .pressed a{    color:#ffffff;    background-color: rgb(193,35,135) !important;;    box-shadow: inset 0px -2px 3px 1px rgba(145,125,255,1) !important;;    -webkit-transition:2.5s ease all;}

4.js
4.1 第一次打开APP,检测手机默认的语言 ,用到cordova plugin
cordova plugin add org.apache.cordova.globalization
通过一个 firstOpen 来存储是否是第一次打开 APP,如果firstOpen 为 Null 则检测手机默认的语言 并且通过一个currentLanguage 来存储为当前的语言, 同时设置 转换语言按钮的 显示;

4.2 否则,当不是第一次打开APP ,检测currentLanguage 看看 当前存储的 被设置的语言,同时设置 转换语言按钮的 显示;

 1 var zh= { 2     name: "姓名", 3     id: "序号", 4     others:"中文" 5 }; 6 var en= { 7     name: "name", 8     id: "id", 9     others:"English"10 };11 var lang;12 function setlang(e) {13 14     setLS(currenLanguage,e);15     if(e==en){16      $(#zh-TW).removeClass(pressed);17      $(#en-US).addClass(pressed);18      lang=en;19     }else if (e==zh) {20     $(#en-US).removeClass(pressed);21      $(#zh-TW).addClass(pressed);22      lang=zh;23     };24    ShowHideLanguage();25 }26 27 function setappLanguege() {28     if (!getLS(firstOpen)) {29         navigator.globalization.getPreferredLanguage(30             function(language) {31                 console.log(language:  + (language.value).split("-")[0] + \n);32                 setlang((language.value).split("-")[0]);33                 setLS(firstOpen,ok);34             },35             function() {36                 console.log(Error getting language\n);37             }38         );39     } else {40       setlang(getLS(currenLanguage));41     }42 }43 function app_init(){44 console.log("setLangFromDevice");   45 46 setappLanguege();47 }48 49 function ShowHideLanguage(){50     $("#name").attr(placeholder, lang.name);51     $("#other")[0].innerHTML = lang.others;52     $("#id")[0].innerHTML = lang.id;53 }54 document.addEventListener("deviceready", app_init, false);

 

jqmobi 转换语言