标签：style blog http io color ar sp div on
当第一次打开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);
标签：style blog http io color ar sp div on
原文地址：http://www.cnblogs.com/xieyier/p/4087796.html
