ÔÚÉè¼ÆÍøվʱ£¬Ò»¸öÖØÒªµÄ¿¼ÂÇÊǹú¼Ê»¯¡£ÊÀ½çÉÏÿ¸öµØÇøºÍ¹ú¼Ò¶ÔÓÚÎı¾¡¢ÏûÏ¢¡¢Êý×ÖºÍÈÕÆÚÓ¦¸ÃÈçºÎ³öÏÖÓв»Í¬µÄÆÚÍû¡£Ìض¨Ó¦ÓóÌÐòµÄÿ¸öÓû§ÆÚÍûËùÓÐÎı¾ºÍÏûÏ¢ÒÔÊìϤµÄ¸ñʽÏÔʾ¡£JavaScriptÓÐÒ»¸öºÜºÃµÄ¹ú¼Ê»¯½â¾ö·½°¸³ÆΪjQuery.i18n¡£jQuery
i18nÓÃÓÚMediaWikiºÍÐí¶àÆäËû¹ú¼ÊÍøÕ¾µÄ±¾µØ»¯¡£
JQuery I18nµÄÌØÐÔ
±£³Ö´úÂëÓëi18nÄÚÈÝ·ÖÀë¡£´Ë¹¦Äܱ£³Ö´úÂëµÄÄ£¿é»¯£¬²¢ÔÊÐí¿ª·¢ÈËÔ±¼ÓÔØËûÃÇÐèÒªµÄi18n¹¦ÄÜ¡£
ʹÓÃJSON¸ñʽ¡£
ÔÊÐí²»Ë¢ÐÂÍøÒ³¶ø¸ü¸ÄÓïÑÔ¡£
´¦Àí¸´ÊýÐÎʽ²»Ê¹Óø½¼ÓÏûÏ¢¡£¹æÔò´¦ÀíʹÓÃUnicode ConsortiumµÄͨÓÃÇøÓòÉèÖÃÊý¾Ý´æ´¢¿â£¨Common
Locale Data Repository£¬CLDR£©Íê³É
ͨ¹ý´«µÝÐÔ±ðÖµÀ´¸ù¾ÝÐÔ±ð¸üÕý¾ä×Ó¡£
Ö§³ÖÓï·¨ÐÎʽ¡£
JQuery I18nĿ¼
ʹÓÃjQuery i18n¸ñʽ»¯Ä¿Â¼µÄ³£¹æ·½·¨ÊǶԴ洢ÔÚ´ËĿ¼ÖеÄÿÖÖÓïÑÔ´úÂ붼ÓÐÒ»¸öJSONÎļþµÄi18nÎļþ¼Ð¡£Figure
1ÖÐÏÔʾÁËÒ»¸öʾÀýĿ¼¡£
Figure 1.ÿÖÖÓïÑÔ´úÂëµÄJSONÎļþµÄĿ¼¡£
JQuery I18nÏûÏ¢Îļþ¸ñʽ
jQuery i18nʹÓÃJSONÎļþ£¬ÕâÔÊÐíÓû§ÒÔÇáÁ¿¼¶¸ñʽ´æ´¢ÐÅÏ¢ÒÔ½øÐÐÊý¾Ý½»»»¡£
JSONÎļþ·Ç³£ÓÐÒ棬ÒòΪ£º
ËüÃÇÔÊÐí·ÒëÈËÔ±ÇáËɵطÃÎÊÒª·ÒëµÄÎı¾¡£Èç¹ûÐèÒª·¢ËÍJSONÎļþÓÃÓÚ·Òë·þÎñ£¬Õ⽫·Ç³£ÓÐÓá£
ËüÃÇ×èÖ¹¶ÔÊý¾Ý¿âµÄÖ±½Ó·ÃÎÊ¡£
JSONÎļþÓÉһϵÁÐÃû³Æ-Öµ¶Ô»òÖµµÄÓÐÐòÁбí×é³É¡£ÔÚÓÃÓÚ¹ú¼Ê»¯µÄJSONÎļþÖУ¬ÏûÏ¢¼ü-ÏûÏ¢¶Ô°üº¬ËùÓÐÓïÑÔ¶ÔµÄÃû³ÆºÍÖµ¡£Ã¿¸ö¼ü¶¼ÊÇСд×Öĸ£¬Ê¹Óá°
¨C ¡±·Ö¸ôµ¥´Ê£¬²¢ÓëËùÑ¡ÓïÑÔÖеÄÖµÏà¹ØÁª¡£JSONÎļþ¿ÉÒÔ°üº¬@metadata£¬´æ´¢¹ØÓÚÎļþµÄ·ÇÏûÏ¢ÐÅÏ¢£¬ÀýÈç°æȨºÍ×÷ÕßÐÅÏ¢¡£Í¨³£ÎªÃ¿ÖÖÓïÑÔÀàÐÍ´´½¨µ¥¶ÀµÄJSONÎļþ£»È»¶ø£¬ËùÓеķÒëÒ²¿ÉÒÔ·ÅÔÚÒ»¸öµ¥Ò»µÄÎļþÖС£µ¥¶ÀJSONÎļþµÄÓŵãÊÇÎļþ²»ÄÇô¸´ÔÓ¡£µ«ÊÇ£¬µ¥¸öJSONÎļþÓÐÖúÓÚÈ·±£ÔÚǶÈë¶àÓïÑÔÊý¾Ýʱ×ֶβ»»áÖظ´¡£ÏÂÃæÌṩÁËÒ»¸ö°üº¬µ¥Ò»ÓïÑÔºÍ@metadataµÄJSONÎļþʾÀý£º
{ "@metadata": { "author": "Colleen", "description": "An example JSON file", "last-updated": "2016-09-21", "message-documentation": "qqq" }, "greeting": "Hello", "bye": "Goodbye" } |
ÏÂÃæÌṩÁËÒ»¸ö°üº¬¶àÖÖÓïÑÔºÍ@metadataµÄJSONÎļþʾÀý£º
{ "@metadata": { "author": "Fred", "description": "An example JSON file", "last-updated": "2016-09-21", "message-documentation": "qqq", "arrayGroups": { "label": { "en": "label_en", "fr": "label_fr" } } }, "en": { "greeting": ¡°Hello¡±, "bye": "Goodbye" } "fr": { "greeting": ¡°Bonjour¡±, "bye": "Au revoir" } } |
Ó÷¨
jquery.i18nµÄһЩʹÓ÷½·¨ÈçϱíËùʾ¡£
·Òë
Óм¸ÖÖ·½·¨À´·ÒëÒ»¸öjquery.i18nÓ¦ÓóÌÐò£º
1. ±à¼JSONÎļþ¡£ÕâÊÊÓÃÓÚÓïÑÔÊýÁ¿ÓÐÏÞµÄСÐÍÓ¦ÓóÌÐò¡£
2. ÓÐÒ»¸öÓ¦ÓóÌÐòµÄ·Òë½çÃæ¡£´ËÑ¡ÏîÊÊÓÃÓÚ¾ßÓÐÐí¶à·ÒëÆ÷µÄרÓлòרÓÃÓ¦ÓóÌÐò¡£
JQuery.I18n.Properties
jQuery.i18n.propertiesÊÇÒ»¸öÓÃÓÚ¹ú¼Ê»¯µÄjQuery²å¼þ¡£ÓëJavaÀàËÆ£¬jquery
i18nʹÓÃ×ÊÔ´Èí¼þ¼¯£¨¡¯.properties¡¯Îļþ£©¡£×ÊÔ´Èí¼þ¼¯ÓÃÓÚ´æ´¢Ìض¨ÓÚÇøÓòµÄÐÅÏ¢£¬ÀýÈçÎı¾ÏûÏ¢¡£ËüÃÇÔÊÐíÇáËÉ·ÃÎÊÌض¨ÓÚÇøÓòµÄÐÅÏ¢²¢Í¨¹ýÌí¼Ó¶îÍâµÄ×ÊÔ´Èí¼þ¼¯À´ÇáËÉÌí¼ÓÇøÓò¡£
¡®.properties¡¯Îļþ°üº¬Ìض¨ÓÚÇøÓòµÄ¼ü-Öµ¶Ô£¬²¢¸ù¾ÝÓïÑԺ͹ú¼Ò/µØÇø´úÂë½âÎöÕâЩÎļþ¡£
ʹÓÃJquery.I18n.Properties
jquery.i18n.properties.js²å¼þ¿ÉÒÔ´Óhttps://github.com/jquery-i18n-properties/jquery-i18n-propertiesÏÂÔØ¡£²å¼þÓ¦°üº¬ÔÚHTMLÒ³ÃæµÄ<head>²¿·ÖÖС£ÄãʹÓõÄjqueryµÄ°æ±¾Ó¦ÈçÏÂËùʾÔÚÔ´ÎļþÖÐÖ¸¶¨¡£
<HEAD> <script type="text/JavaScript" src="js/jquery-1.10.2.js"></script>
<script type="text/JavaScript" src="js/jquery.i18n.properties.js"></script> </ </HEAD> |
JQuery.I18n.PropertiesµÄÌØÐÔ
1.ÏñJava i18nÒ»Ñù¹¤×÷¡£Ê¹ÓÃ×ÊÔ´Èí¼þ¼¯£¨¡¯.properties¡¯Îļþ£©½øÐзÒ롣ʹÓÃISO-639×÷ΪÓïÑÔ´úÂ룬ʹÓÃISO-3166×÷Ϊ¹ú¼Ò´úÂë¡£
2.Èç¹ûδָ¶¨ÓïÑÔ£¬ÔòʹÓÃĬÈÏä¯ÀÀÆ÷ÓïÑÔ¡£Ê¼ÖÕÊ×ÏÈʹÓÃ×ÊÔ´Èí¼þ¼¯ÖеÄĬÈÏÓïÑÔ¡£½ÓÏÂÀ´¼ÓÔØÓû§Ö¸¶¨µÄÓïÑÔ¡£
3.×ÊÔ´Èí¼þ¼¯×Ö·û´®ÔÊÐíռλ·ûÌæ»»£¬²¢ÇÒÖ§³Ö¼üÖеÄÃüÃû¿Õ¼ä¡£
ÓïÑÔ¿ØÖÆ
ΪÁËʹ´úÂë¸üÓÐЧÂÊ£¬¼õÉÙ404´íÎó£¬Ó¦Ê¹ÓÃlanguages.jsonÎļþ¡£languages.jsonÎļþ¶¨ÒåÁË¿ÉÒÔʹÓõÄÓïÑÔºÍÊôÐÔÎļþ¡£languages.jsonÓ¦¸Ã·ÅÖÃÔÚÓëÓïÑÔÊôÐÔÎļþÏàͬµÄĿ¼ÖС£languages.jsonÎļþµÄʾÀýÈçÏ£º
{ "languages": [ "en_GB", "es_ES", "pt_BR", "sv_SE" ] } |
ʹÓÃJQuery.I18n.PropertiesµÄʾÀý
ҪʹÓÃjquery.i18n.properties.js´´½¨HTMLÒ³Ã棬µÚÒ»²½ÊÇ´´½¨Ò»¸öĿ¼£¬ÆäÖаüº¬JavaScriptÎļþºÍÊôÐÔÎļþËùÐèµÄÎļþ¼Ð¡£¶ÔÓÚÕâ¸öÀý×Ó£¬ÎÒÃǽ«Ê¹ÓÃFigure
2ÖеÄĿ¼¡£
Figure 2.ʹÓÃÊôÐÔÎļþµÄĿ¼¡£
½ÓÏÂÀ´£¬´´½¨HTML´úÂë¡£HTML°üº¬ÔÊÐíÓû§Ñ¡ÔñÓïÑÔµÄÏÂÀ²Ëµ¥¡£ÏÂÀÁбíÏÂÃæµÄÏûÏ¢¸ù¾ÝËùÑ¡ÓïÑÔ½øÐб¾µØ»¯¡£
<HTML> <HEAD> <script src="js/jquery-3.1.0.js" ></script> <script type="text/JavaScript" src="js/jquery.i18n.properties.js"></script> </HEAD> <BODY> <h2>Internationalization Example Using jQuery.i18n.properties</h2> <div id="langBox"> Language: <select id="lang"> <option value="en" selected>English</option> <option value="tr">Turkish</option> <option value="fr">French</option> </select> </div><br> <div id="lWelcome">Thank you for reading this example</div><br> <div id="lSelLang">Your Selected Language is: en </div> </BODY> </HTML> |
¶¨Òå.PropertiesÎļþ
jquery.i18n.properties.js²å¼þʹÓÃ.propertiesÎļþ×÷Ϊ·ÒëÎı¾¡£ÔÚ´ËʾÀýÖÐʹÓÃÈý¸öÊôÐÔÎļþ£º
£¨1£©Messages.properties£¬
£¨2£©Messages_fr.propertiesÒÔ¼°
£¨3£©Messages_tr.properties¡£
ÿ¸öÊôÐÔÎļþÖеÄÎı¾ÈçÏÂËùʾ£º
Messages.properties lWelcome = Thank you for reading this example lSelLang = Your Selected Language is: {0} Messages_fr.properties lWelcome = Merci d'avoir lu cet exemple lSelLang = Votre langue s¨¦lectionn¨¦e est : {0} Messages_tr.properties lWelcome = Bu ?rnek okumak i?in te?ekk¨¹r ederiz lSelLang = Sizin Se?ili Dil ge?erli: {0} |
´Ó.Properties¼ÓÔر¾µØ»¯×Ö·û´®
Òª´ÓÊôÐÔÎļþ¼ÓÔØÏûÏ¢£¬Ç뽫jquery.i18n.properties.jsÎļþ±£´æÔÚjsÎļþ¼ÐÖС£ÏÂÃæµÄjquery.i18n.properties.js´úÂëÊÇÏÔʾÈçºÎ¼ÓÔØÊôÐÔÎļþµÄ¼òµ¥Ê¾Àý¡£
|