jQuery Mobileのよく使うスニペット3種

先日行われたSwapSkillsFreeEvent(3)「Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作」で講演した際に要望の多かったスニペットを＋αして公開します。

1. 日本語化

英語メッセージの箇所をすべて日本語に変更しています。

日本語は各自お好みで編集してください。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
// 初期設定
$(document).bind('mobileinit', function(){

// 日本語化
$.mobile.loadingMessage = '読み込み中';
$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
$.mobile.selectmenu.prototype.options.closeText= '閉じる';
$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
$.mobile.page.prototype.options.backBtnText = '戻る';
});
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

2. テキストの省略無効

すべての要素のテキストの省略をしないようにします。

除外するものがあればコメントから判断して削除してください。

.ui-header .ui-title, /* header */
.ui-footer .ui-title, /* footer */
.ui-btn-inner, /* button */
.ui-li-heading, /* listview heading */
.ui-li .ui-btn-text a.ui-link-inherit, /* listview link */
.ui-li-desc /* listview description */
{
overflow: visible;
white-space: normal;
}

3. ホームボタンの自動追加

最初のページ以外の全ページにホームボタンを追加します。

ホームへのPage IDは各自の環境に合わせて編集してください。

$(document).ready( function(){

//最初のページ以外の全ページにホームボタンを追加
$(':jqmData(role=page)').live("pagebeforecreate", function(evt){
$(this).find(':jqmData(role=header)').append(
$('<a href="#main" data-transition="slideup" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>')
);
});
});

[PR]

jQuery Mobileについては、SwapSkills doubbble vol.01「モバイルサイト制作に見る、次世代ウェブのカタチ「One Web」」でもお話します。興味のある方は是非お越しください。

また、allWebクリエイター塾では 「jQuery Mobile徹底習得講座」を開催しています。こちらも合わせてご検討ください。