DreamweaverでjQuery Mobile

作ってみた

Dreamweaverでの準備

  • 基本構造を入力する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[[DreamweaverでjQuery Mobile]]</title>
<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="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>

<body>

</body>
</html>

パネルを表示

  • 「挿入」メニュー→「jQueryMobile」
  • ページ」をクリック
  • 「ページ」を「body」内に、ドロップ&ドラッグ
  • 「ヘッダー」と「フッター」を含める
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DreamweaverでjQuery Mobile</title>
<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="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>

<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
  <div data-role="content">コンテンツ</div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

リスト挿入

  • 「リスト表示」を「content」内に挿入
  • リストのオプションを適用

http://iphone4simulator.com/island-web.jp/air/lesson/smartphone/07/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DreamweaverでjQuery Mobile</title>
<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="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>

<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li>
        <h3><a href="#">1ページ</a></h3>
        <p>Lorem ipsum</p>
        <span class="ui-li-count">1</span><a href="#">デフォルト</a>
        <p class="ui-li-aside">付加情報</p>
      </li>
      <li>
        <h3><a href="#">2ページ</a></h3>
        <p>Lorem ipsum</p>
        <span class="ui-li-count">1</span><a href="#">デフォルト</a>
        <p class="ui-li-aside">付加情報</p>
      </li>
      <li>
        <h3><a href="#">3ページ</a></h3>
        <p>Lorem ipsum</p>
        <span class="ui-li-count">1</span><a href="#">デフォルト</a>
        <p class="ui-li-aside">付加情報</p>
      </li>
    </ul>
  コンテンツ</div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

Safariでスマートフォンサイトが表示できない

現在Windows7にSafari5.1.7を入れています。
開発からユーザーエージェントをiPhoneにしても、その他からユーザーエージェントを入れてみても、スマートフォンサイトの表示が出来ません。
何故なんだろう・・・
他のパソコンでも試してみます。

＊解決
Windowsでは、スマートフォン表示にならないのですね。