関連†
- HTML
- JavaScript/jQuery
- CSS
概要†
JavaScriptとCSSで言語切り替えをする方法のメモです(後日きれいにまとめるかも)。
Webアプリケーションのフレームワークが多言語対応しているケースが多いと思いますが、ここではあえてJavaScriptとCSSだけで実現する方法を考えてみます。多言語対応した静的なページをWebサーバで、なんてときに。
その1もどうぞ。
方法†
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>多言語対応テスト</title> <link rel="stylesheet" type="text/css" href="css/initialize.css"> <noscript> <link rel="stylesheet" href="css/noscript.css"> </noscript> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/multilingual.js"></script> <script type="text/javascript"> <!-- jQuery(function() { jQuery('#multilingual').multilingual(); }); // --> </script> </head> <body class="ja"> <div id="multilingual"></div> <div id="header"> <span class="multilingual en">English Header</span> <span class="multilingual ja sub">日本語ヘッダ</span> </div> <div id="content"> <span class="multilingual en">English Content</span> <span class="multilingual ja sub">日本語コンテント</span> </div> <div id="footer"> <span class="multilingual en">English Footer</span> <span class="multilingual ja sub">日本語フッタ</span> </div> </body> </html>
- css/initialize.css
@charset "UTF-8" body { display: none; }
- css/noscript.css
@charset "UTF-8"; body { display: block; } .multilingual.sub { display: none; }
- js/multilingual.js
(function() { var langs = [ {lang: 'ja', name: '日本語'}, {lang: 'en', name: 'English'} ]; var setLang = function(lang) { if (! lang) { lang = langs[0].lang; } jQuery.each(langs, function() { jQuery('body').removeClass(this.lang); }); jQuery('body').addClass(lang); var toHide = '.multilingual'; jQuery(toHide).hide(); var toShow = '.multilingual.' + lang; jQuery(toShow).show(); }; jQuery.fn.extend({ multilingual: function(callback) { var target = jQuery('<ul />').appendTo(this); jQuery.each(langs, function() { jQuery(target).append( jQuery('<li />').append( jQuery('<a />') .attr('rel', this.lang) .text(this.name) .click(function() { var lang = jQuery(this).attr('rel'); setLang(lang); if (callback) { callback(lang); } }) ) ); }); } }); jQuery(function() { setLang(langs[1].lang); jQuery('body').css('display', 'block'); }); })();
解説†
- 日本語と英語を全部書いて全体を非表示(css/initialize.css)
- JavaScript有効の場合言語を設定して全体を表示(js/multilingual.js)
- JavaScript無効の場合全体を表示してサブ言語を非表示(css/noscript.css)
- linkをnoscriptでheadの中に書くためhtml5
非表示言語分のパラメータが送れてしまう†
はい。disabled などしてあげないといけないと思います。