jQuery Mobile Web

jQuery Mobileとは

jQuery Mobileはモバイル・タブレット・デスクトップのすべてのプラットフォームで動作するタッチフレンドリーなUIフレームワークです。

目次

※ jQuery Mobile version 1.4.5

機能別カテゴリーアトリビュート(a-z)

基本的な使い方

HTMLのHEADに以下のCSSとスクリプトを追加することで利用が可能です。

<head>
  <meta name="viewport" content="width=device-width">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

BODYに以下のような構成でコンテンツを作成します。

<body>
  <div id="page1" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>ヘッダー</h1>
    </div>
    <div role="main" class="ui-content">
      <p>コンテンツ</p>
    </div>
    <div data-role="footer" data-position="fixed">
      <h3>フッター</h3>
    </div>
  </div>
</body>

スマホ／タブレットに最適化されたアプリの提供が可能です。

Close