開始行: *関連 [#e42a64db] -HTML -JavaScript/jQuery -CSS *概要 [#fe28ce22] JavaScriptとCSSで言語切り替えをする方法のメモです(後日き... Webアプリケーションのフレームワークが多言語対応しているケ... *方法 [#md0ebb7e] -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/lang.... <noscript> <link rel="stylesheet" href="css/noscript.css"> </noscript> <script type="text/javascript" src="js/jquery.js"></sc... <script type="text/javascript" src="js/multilingual.js... <script type="text/javascript"> <!-- jQuery(function() { jQuery('#multilingual').multilingual(); }); // --> </script> </head> <body class="ja"> <div id="multilingual"></div> <div id="header"> <span id="m001-001"></span> </div> <div id="content"> <span id="m001-002"></span> </div> <div id="footer"> <span id="m001-003"></span> </div> </body> </html> -css/lang.css @charset "UTF-8"; body { display: none; } .ja #m001-001:after { content: "日本語ヘッダ"; } .en #m001-001:after { content: "English Header"; } .ja #m001-002:after { content: "日本語コンテント"; } .en #m001-002:after { content: "English Content"; } .ja #m001-003:after { content: "日本語フッタ"; } .en #m001-003:after { content: "English Footer"; } -css/noscript.css @charset "UTF-8"; body { display: block; } -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); }; 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'); }); })(); *解説 [#db4b36c8] -例では日本語をデフォルトにして全体を非表示(css/lang.css) --JavaScript有効の場合言語を設定して全体を表示(js/multili... --JavaScript無効の場合そのまま全体を表示(css/noscript.css) ---linkをnoscriptでheadの中に書くためhtml5 -ラベルのIDをつけたspanを置く(index.html) --:afterで言語ごとのテキストを定義する(css/style.css) -JavaScriptでbodyに設定する言語のクラスを切り替える(js/mu... **IE7以前で:afterが使えない [#a5f1475f] 使えるようにするJavaScriptライブラリがあるようです。 -http://code.google.com/p/ie7-js/ -http://ash.jp/web/css/ie8_js.htm **meta(X-UA-COmpatible)でエラー [#jf950346] IEを最新のモードで表示させるためのmetaが次の文法エラーに... Bad value X-UA-Compatible for attribute http-equiv on el... -http://www.joshuawinn.com/fix-html5-validator-error-bad-... **本文がからっぽで検索の対象にできない [#h2a85829] あ。(→[[その2>JavaScriptとCSSで言語切り替えする(その2)]]... *参考 [#p9c54789] -http://terkel.jp/archives/2012/07/styles-for-noscript/ 終了行: *関連 [#e42a64db] -HTML -JavaScript/jQuery -CSS *概要 [#fe28ce22] JavaScriptとCSSで言語切り替えをする方法のメモです(後日き... Webアプリケーションのフレームワークが多言語対応しているケ... *方法 [#md0ebb7e] -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/lang.... <noscript> <link rel="stylesheet" href="css/noscript.css"> </noscript> <script type="text/javascript" src="js/jquery.js"></sc... <script type="text/javascript" src="js/multilingual.js... <script type="text/javascript"> <!-- jQuery(function() { jQuery('#multilingual').multilingual(); }); // --> </script> </head> <body class="ja"> <div id="multilingual"></div> <div id="header"> <span id="m001-001"></span> </div> <div id="content"> <span id="m001-002"></span> </div> <div id="footer"> <span id="m001-003"></span> </div> </body> </html> -css/lang.css @charset "UTF-8"; body { display: none; } .ja #m001-001:after { content: "日本語ヘッダ"; } .en #m001-001:after { content: "English Header"; } .ja #m001-002:after { content: "日本語コンテント"; } .en #m001-002:after { content: "English Content"; } .ja #m001-003:after { content: "日本語フッタ"; } .en #m001-003:after { content: "English Footer"; } -css/noscript.css @charset "UTF-8"; body { display: block; } -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); }; 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'); }); })(); *解説 [#db4b36c8] -例では日本語をデフォルトにして全体を非表示(css/lang.css) --JavaScript有効の場合言語を設定して全体を表示(js/multili... --JavaScript無効の場合そのまま全体を表示(css/noscript.css) ---linkをnoscriptでheadの中に書くためhtml5 -ラベルのIDをつけたspanを置く(index.html) --:afterで言語ごとのテキストを定義する(css/style.css) -JavaScriptでbodyに設定する言語のクラスを切り替える(js/mu... **IE7以前で:afterが使えない [#a5f1475f] 使えるようにするJavaScriptライブラリがあるようです。 -http://code.google.com/p/ie7-js/ -http://ash.jp/web/css/ie8_js.htm **meta(X-UA-COmpatible)でエラー [#jf950346] IEを最新のモードで表示させるためのmetaが次の文法エラーに... Bad value X-UA-Compatible for attribute http-equiv on el... -http://www.joshuawinn.com/fix-html5-validator-error-bad-... **本文がからっぽで検索の対象にできない [#h2a85829] あ。(→[[その2>JavaScriptとCSSで言語切り替えする(その2)]]... *参考 [#p9c54789] -http://terkel.jp/archives/2012/07/styles-for-noscript/ ページ名: