jQuery Mobileのコトハジメ

Yuuです。

VPSであーだこーだしていて、PHPから書きだされたファイルがApache権限ではてさて、SuPHP？パフォーマンス？fastcgi？って感じの初心者っぷりでgoogle先生をを頼り中な今日この頃。

さて、本題。 スマートフォンサイト作るとき、jQuery Mobileにお世話になってます。

  • スマートフォンサイトのUIをカッコ良くさせたい。
  • さっくり実装させたい。

こんなときに便利でお手軽なjQuery Mobile。 とりあえず、コトハジメ的に備忘録です。

はじめに

  • 使用Ver：1.0.1

わからないことは、jQuery MobileのDEMOを見る。 英語がわからない時は、日本語リファレンス見る。

デモサイト見ればレイアウト実装のサンプルが豊富なので、たいていのことはカバーできます。

初期テンプレート

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30


<!DOCTYPE html>

<html lang="ja" dir="ltr">

<head>

  <meta charset="UTF-8" />

  <title>code life</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

  <script src="jquery.mobile.init.js"></script>

  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

<div data-role="page">

  <header data-role="header">

    <h1>タイトル</h1>

  </header>

  <div data-role="content">

    <h1>見出し1</h1>

    <p>コンテンツ内容</p>

    <h2>見出し2</h2>

    <p>コンテンツ内容</p>

    <h3>見出し3</h3>

    <p>コンテンツ内容</p>

  </div>

  <footer data-role="footer">

    <h4>CopyRight &copy; Code-life.net. All rights reserved.</h4>

  </footer>

</div>

</body>

</html>

公式を参考にすると上記のような感じになります。

jQuery Mobile 初期設定

エラーメッセージなどが英語だったりするので設定を変更するために下記のJSを読み込みます。

1


<script src="jquery.mobile.init.js"></script>


1

2

3

4

5

6

7

8


$(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 = '戻る';

  });

ポイントは、上記スクリプトをjQuery MobileのJS読み込み前に読み込むこと。

参考: グローバル設定

jQuery Mobile CSS初期設定

文字数が要素内で一定値をオーバーすると、文字が省略されてしまうので、それをCSSで解除してあげる。

1

2

3

4

5

6

7

8

9


.ui-header .ui-title,

.ui-footer .ui-title,

.ui-btn-inner,

.ui-li-heading,

.ui-li .ui-btn-text a.ui-link-inherit,

.ui-li-desc {

  overflow: visible;

  white-space: normal;

}

デザインを変更する

デフォルトのデザインをそのまま使う場合はあまりないので、それぞれのデザインをオリジナルなものに変更します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


<div data-role="page" data-theme="f">

  <header data-role="header" data-theme="f">

    <h1>タイトル</h1>

  </header>

  <div data-role="content" data-theme="f">

    <h1>見出し1</h1>

    <p>コンテンツ内容</p>

    <h2>見出し2</h2>

    <p>コンテンツ内容</p>

    <h3>見出し3</h3>

    <p>コンテンツ内容</p>

  </div>

  <footer data-role="footer" data-theme="f">

    <h4>CopyRight &copy; Code-life.net. All rights reserved.</h4>

  </footer>

</div>

data-theme=“f"をそれぞれの要素に追加しました。

data-themeによって、スタイルの切り替えが可能。 jQuery Mobileでは、aからeまでのスタイルがセットされているので、何もスタイルがセットされていないf～zなど任意のスタイルを指定してあげれば、当然スタイルがセットされてないのでデザインが解除されます。

あとはそれぞれいつも通りにCSSでデザイン作るだけです。

jQuery Mobileのデフォルトスタイルをカスタマイズ

テーマが折角あるようなのでテーマcssを作りたい。

JavaScriptで適用されているCSSスタイルが何なのかを見るときは、ブラウザの要素検証だったり、firebugだったりで適用CSSを確認しますよね。 それをすべて追って、上書きするのは大変です。

そんなときは、jQuery MobileのTheme Rollerを使います。 このウェブツールを使うと、jQuery Mobileのテーマをちょちょいと作ることができます。

カラーコード指定で迷った場合は、Adobe Kulerからも選択できます。 ちなみにKulerをどう反映すればいいか最初はわからなかったんですが、カラーアイコン（？）をドラック＆ドロップで反映できます。 そのデザイン反映したやつを左上のDownload Themeでダウンロードする。

あとはそれを組み込んで随時改修していきましょう。

Comments