jqmobi 转换语言

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

1.html 中的设置

         

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

2. CSS中的样式

/*语言设置 CSS*/
.language-set{
    text-align:center;
    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{
     46px;
    height: 100%;
     display:block;
    float:left;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;    
}
.language-set li a{
   display: inline-block;
     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 看看 当前存储的 被设置的语言，同时设置 转换语言按钮的 显示；

var zh= {
    name: "姓名",
    id: "序号",
    others:"中文"
};
var en= {
    name: "name",
    id: "id",
    others:"English"
};
var lang;
function setlang(e) {

    setLS('currenLanguage',e);
    if(e=='en'){
     $('#zh-TW').removeClass('pressed');
     $('#en-US').addClass('pressed');
     lang=en;
    }else if (e=='zh') {
    $('#en-US').removeClass('pressed');
     $('#zh-TW').addClass('pressed');
     lang=zh;
    };
   ShowHideLanguage();
}

function setappLanguege() {
    if (!getLS('firstOpen')) {
        navigator.globalization.getPreferredLanguage(
            function(language) {
                console.log('language: ' + (language.value).split("-")[0] + '
');
                setlang((language.value).split("-")[0]);
                setLS('firstOpen','ok');
            },
            function() {
                console.log('Error getting language
');
            }
        );
    } else {
      setlang(getLS('currenLanguage'));
    }
}
function app_init(){
console.log("setLangFromDevice");   

setappLanguege();
}

function ShowHideLanguage(){
    $("#name").attr('placeholder', lang.name);
    $("#other")[0].innerHTML = lang.others;
    $("#id")[0].innerHTML = lang.id;
}
document.addEventListener("deviceready", app_init, false);