Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a 五行完成網頁多國語系
Similar a 五行完成網頁多國語系 (20)
五行完成網頁多國語系
- 1. 五行完成 網頁多國語系 Amos Tsai August 19, 2012@COSCUP
- 2. ● 萬華社區大學、救國團 電腦老師 ● 曾經出沒地： H4, CloudTW, GTUG ● 目前擔任 H4 值日生
- 3. 目前使用的技能 : Nginx, uWSGI, bottle, Python, MySQL, MySQLdb, Javascript, jQuery, HTML5, CSS3
- 4. amos.tsai@gmail.com amos.tsai amos-tsai.blogspot.com
- 6. 係真ㄟ
- 8. 不會，反而更簡單！
- 10. ● 相依性低 – jquery-1.3.0.min.js 以上 – jquery.i18n.js ● 體積小，載入速度快 - 3.2KB 無壓縮 ● 適合各種 framework ● 開發速度快 ● 學習曲線低
- 11. JQuery i18n ● 2009 年由 Bryan W Berry 開發 ● MIT license ● https://github.com/bryanwb/jquery-i18n/
- 12. 原本的作法
- 13. <script type='text/javascript' src='./jquery-1.3.2.min.js'></script> <script type='text/javascript' src='./jquery.i18n.js'></script> <script type='text/javascript' src='./jquery.ne.json'></script> <script type='text/javascript' src='example.ne.json'></script> <script type='text/javascript'> $(document).ready(function(){ $._.setLocale('ne'); $('#example1').append("<div>" + $._('Welcome')+"</div>"); $('#example1').append("<div>" + $._n(90) + "</div>"); }); </script> <div id='example1'>Example using strings application-wide <br />
- 14. 現有作法不足之處
- 15. ● 手動預先加入語系檔 – 就算使用者用不到也要花費流量讀取檔案 ● 手動輸入使用者語系 – 可以直接讀取瀏覽器語系設定 ● 轉換文字必須放在 <script> 中 – 破壞 HTML 文字可閱讀性
- 16. OpenSource 的精神
- 17. 覺得少了些什麼？
- 18. 自己改
- 19. 緊張刺激的 Demo
- 21. 撰寫一個 HTML 檔 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <span>Hello</span><span>World</span> </body> </html>
- 22. 載入 2 個 javascript 檔案 ● jquery-1.8.0.min.js ● jquery.i18n.js
- 24. 執行 genLocaleJson.py 產生語系檔
- 25. 根據每個語系檔進行翻譯
- 27. // 幫 class="gettext" 的元素增加 gettext 屬性 $._.setAnchorByClass( 'gettext' ); // 根據語系設定替換網頁文字 $._.replaceByLocale( "language/hellow orld." + $._.getLocale() + ".json" );
- 28. Just this!
- 29. 線上即時轉換語系
- 30. $('.change').click( function() { // 根據按鈕更改語系設定 $._.setLocale( $(this).text() ) // 根據語系設定替換網頁文字 $._.replaceByLocale( "language/helloworld." + $._.getLocale() + ".json" ); });
- 32. It's All
- 35. 歡迎加入 Hacking Thursday Welcome to Hacking Thursday ハッキング木曜日へようこそ
- 36. 1. 討論 web, network, programming, system, blablah…. 2. 交流系統工具 & 使用技巧 3. 八卦
- 37. 聚會地點 店家 : MarketPlace ( 市集 台北 站前 ) 地址 : 台北市重慶南路一段 1 號 2 樓 電話 : (02) 7725-2525 時間 : 每週四晚上 19:30-22:00
- 38. 最後 ...
- 39. 未來打算建立數位學習平台
- 41. Amos Tsai 0982-460-210 amos.tsai@gmail.com
- 42. Q&A
- 43. thank you