当第一次打开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;
width:100px;
height:35px;
line-height:35px;
font-size:14px;
background-color: rgba(,,,);
box-shadow: inset 0px .5px 3px 1px rgba(,,,);
display: box;
}
.language-set li{
width: 46px;
height: %;
display:block;
float:left;
margin-top: 2px;
margin-left: 2px;
margin-right: 2px;
}
.language-set li a{
display: inline-block;
width: %;
height: %;
border-radius: 5px; }
.pressed a{
color:#ffffff;
background-color: rgb(,,) !important;;
box-shadow: inset 0px -2px 3px 1px rgba(,,,) !important;;
-webkit-transition:.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("-")[] + '\n');
setlang((language.value).split("-")[]);
setLS('firstOpen','ok');
},
function() {
console.log('Error getting language\n');
}
);
} else {
setlang(getLS('currenLanguage'));
}
}
function app_init(){
console.log("setLangFromDevice"); setappLanguege();
} function ShowHideLanguage(){
$("#name").attr('placeholder', lang.name);
$("#other")[].innerHTML = lang.others;
$("#id")[].innerHTML = lang.id;
}
document.addEventListener("deviceready", app_init, false);