jQuery Mobileのlistviewを使ったサンプルです。
JQueryMobile listview サンプル に言語切り替えを加えたものです。
デモサイト
言語切り替えなしバージョンと基本的に同じですが、表示文字列を"jp"、"en"のペアで設定し、言語選択に応じて表示を切り替えます。
言語選択はメインメニュー画面のラジオボタンでJapanese、Englishを選択することができます。
HTML一式
ダウンロードできます。
index.html のタグ構造
<body onload="init();">
<div data-role="page" id="topPage">
<div data-role="header">
<h1 class="headerText" id="topPageHeaderText">ホームページ</h1>
</div>
<!-- メインメニューを埋め込むdiv -->
<div id="topMenu"></div>
<!-- 言語切り替えラジオボタン -->
<div id="langDiv">
<input type="radio" name="lang" id="radio_jp" onclick="setLang('jp');">
<label for="radio_jp" id="label_jp">Japanese</label>
<input type="radio" name="lang" id="radio_en" onclick="setLang('en');">
<label for="radio_en" id="label_en">English</label>
</div>
<div data-role="footer" class="footer">
<h6 class="footerText">Footer Text</h6>
</div>
</div>
<!-- メインメニューのページ１をタップしときに遷移するpage。サブメニューを表示する。 -->
<div data-role="page" id="subMenuPage">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る" onclick="return backClicked(this);">
<h1 class="headerText">subMenuPage</h1>
</div>
<!-- サブメニューを埋め込むdiv -->
<div id="subMenu"></div>
<div data-role="footer" class="footer">
<h6 class="footerText">Footer Text</h6>
</div>
</div>
<!-- コンテンツ表示。メインメニューのページ３、およびサブメニューをタップしときに遷移しコンテンツを表示するpage。 -->
<div data-role="page" id="contentPage" >
<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る" onclick="return backClicked(this);">
<h1 class="headerText">contentPage</h1>
</div>
<div data-role="main" class="ui-content" id="iframeDiv">
<!-- コンテンツをロードするiframe -->
<iframe id="iframe"></iframe>
</div>
<div data-role="footer" class="footer">
<h6 class="footerText">Footer Text</h6>
</div>
</div>
</body>
言語設定javascipt
//言語設定。ブラウザの言語設定が"ja"なら日本語、さもなければ英語。
//index.htmlにハッシュ値がある場合は"ja"なら日本語、さもなければ英語。
//index.htmlアクセス時にハッシュ値で言語設定可能。ハッシュ値をLangにセットする。
//index.html#jpまたはindex.html#enでアクセス。
var Lang = (navigator.language.indexOf("ja") < 0 ? "en" : "jp");
if (location.hash.length > 0) {
Lang = (location.hash.substr(1) == "jp" ? "jp" : "en");
}
var Lang = location.hash.length == 0 ? "jp" : location.hash.substr(1);
//文字列のjp、enペアデータ。メインメニューのヘッダ、Backボタンの表示名。
var label = {
"topPageHeader": {"jp":"ホームページへようこそ", "en":"Welcome to My Homepage"},
"backBtnText": {"jp":"戻る", "en":"Back"}
};
//言語切り替えラジオボタンタップ/クリックで呼ばれ、メインメニューを再設定する。
function setLang(lang) {
Lang = lang;
setMenu('topMenu', 'topMenuList');
}
index.htmlのonloadイベントハンドラ
//body.onloadで呼ばれる。iframeのheight設定。
//ブラウザのreloadボタンクリック時はindex.htmlをリロードする。
function init() {
if (document.getElementById("topMenuList") == null || $('#topMenuList').length == 0) {
location = "index.html";
} else {
var h = $(window).height() - 20;
$('#iframe').css("height", h + "px");
}
$('#radio_' + Lang).prop('checked', true);
$('input[name=lang]').checkboxradio('refresh');
}
//メインメニューのデータ。
//text: リスト表示名
//page: 遷移先ページ ID
//src: iframeにロードするhtml、またはサブメニューのjson変数名。
var topMenuList = [
{"jp":"ページ１ - サブメニュー", "en":"Page1 - SubMenu", "page":"#subMenuPage", "src":"subMenuList1"},
{"jp":"ページ２ - サブメニュー", "en":"Page2 - SubMenu", "page":"#subMenuPage", "src":"subMenuList2"},
{"jp":"ページ３ - コンテンツ", "en":"Page1 - Contents", "page":"#contentPage", "src":"Contents/page3"}
];
//index.htmlロード時に呼ばれ、メインメニューを生成。
$(document).on('pagebeforeshow', '#topPage', function(){
if ($('#topMenuList').length == 0) {
setMenu('topMenu', 'topMenuList');
}
});
メインメニュータップ/クリックで呼ばれサブメニューを生成するjavascript
//サブメニューのデータ。項目はメインメニューと同じ。
var subMenuList1 = [
{"jp":"1. 項目１１", "en":"1. Item11", "page":"#contentPage", "src":"Contents/item11"},
{"jp":"2. 項目１２", "en":"2. Item12", "page":"#contentPage", "src":"Contents/item12"},
{"jp":"3. 項目１３", "en":"3. Item13", "page":"#contentPage", "src":"Contents/item13"}
];
//サブメニューのデータ。項目はメインメニューと同じ。
var subMenuList2 = [
{"jp":"1. 項目２１", "en":"1. Item21", "page":"#contentPage", "src":"Contents/item21"},
{"jp":"2. 項目２２", "en":"2. Item22", "page":"#contentPage", "src":"Contents/item22"},
{"jp":"3. 項目２３", "en":"3. Item23", "page":"#contentPage", "src":"Contents/item23"}
];
//サブメニュー生成。異なるサブメニューで同じDIV構成を強要するため、表示のたびにlistviewを作り直す。
function setMenu(menuDivId, menuDataName) {
if (menuDivId == "topMenu") {
$('#topPageHeaderText').text(label.topPageHeader[Lang]);
}
var menuListId = '#' + menuDivId + 'List';
var ul = $(menuListId);
if (ul.length > 0) {
ul.empty();
} else {
ul = $('<ul>').attr({'id':menuDivId + 'List','data-role':'listview'}).appendTo('#' + menuDivId);
}
var menuItemList = eval(menuDataName);
for(var i=0; i < menuItemList.length; i++) {
var li = $('<li>').appendTo(menuListId);
var item = menuItemList[i];
$('<a data-transition="slide" href="' + item.page + '">')
.attr('onclick', 'linkClicked("' + item.page + '","' + item[Lang] + '","' + item.src + '")')
.text(item[Lang]).appendTo(li);
}
$(menuListId).listview().listview('refresh');
}
メニュー項目タップ/クリックで呼ばれ画面遷移を行うjavascript
//画面遷移の履歴。
//iframeを使用するとBackボタンを二度クリック/タップしないと画面遷移しなくなるため、独自に履歴を管理する。
var pageArray = new Array("");
//listviewの項目がクリック/タップされたときに呼ばれる。
//遷移先のヘッダのタイトル設定。現在のページをpageArrayにpushする。
function linkClicked(page, title, src) {
if (page == "#subMenuPage") {
setMenu("subMenu", src);
} else if (src.length > 0) {
$('#iframe').attr('src', src + '_' + Lang + '.html');
}
$(page).find('.headerText').text(title);
//'data-back-btn-text'を変更しても要素が再作成されるわけではないので表示が変わらない。
//refreshする方法が見つからなかったのでボタンのaタグのtextを直接変更する。
//$(page).find('div[data-role="header"]').attr('data-back-btn-text', label.backBtnText[Lang]);
$(page).find('a[role="button"]').text(label.backBtnText[Lang]);
pageArray.push(findParentPage($(event.srcElement)));
}
//paretnElementを辿り、data-role="page"の要素を返す。見つからない場合はnullを返す。
function findParentPage(elm) {
if (elm == null || elm.attr('data-role') == 'page') return elm;
return findParentPage(elm.parent());
}
戻るボタンで画面遷移を行うjavascript
//Backボタンタップ/クリック。
//戻り先pageIdがあればchangePageをよびfalseを返す。さもなけばtrueを返し、frameworkに任せる。
function backClicked(elm) {
var page = pageArray.pop();
if (page == null) return true;
var pageId = page.attr('id');
if (pageId.length == 0) return true;
$.mobile.changePage('#'+pageId, { transition: "slide", reverse: true } );
return false;
}
参照
JQueryMobile listview サンプル
HTML5+JavaScriptで画面をスライドさせて切り替える方法
