html + cssで組み立てたコーディングと異なるjQuery Mobile要素を使ったページ作り

14.11.15 01:55 | コメント(0)

jQuery Mobile要素を使ったページ作り

jQuery mobileは、スマートフォンサイトやタブレットサイト向けのUI(ユーザインタフェース)を簡単に制作できます。 JavaScriptのライブラリだけでなくUI(ユーザインタフェース)を拡張するライブラリも提供されています。 jQuery mobileは、ページ要素の配下にdata-role属性がheaderやfooterである要素を配置することで、定型的(ウィジェット要素)なヘッダー、フッターを作成できます。 また、ボタン、リスト、フォーム、ポップアップなど、すべて定型的(ウィジェット要素)に作成できます。 通常のHTML要素にjQuery mobile用の要素を指定し組み立てていきます。
 1. jQuery Mobileを使う6つの理由
 2. jQuery Mobile対応プラットフォーム紹介
 3. jQuery Mobile data-role属性一覧

html + cssで組み立てたコーディングと異なるjQuery Mobile要素

まずは、html + cssで制作したコーディングとjQuery mobile要素で制作した大まかなコーディングの違いをご説明します。

【html + cssで制作したページ】
<div id="container">
ページ
</div>
【jQuery Mobile要素で制作したページ】
<div data-role="page">
ページ
</div>

【html + cssで制作したヘッダー】
<div class="header">
ヘッダー
</div>
【jQuery Mobile要素で制作したヘッダー】
<div data-role="header">
ヘッダー
</div>

【html + cssで制作したコンテンツ】
<div class="content">
コンテンツ
</div>
【jQuery Mobile要素で制作したコンテンツ】
<div role="main" class="ui-content">
コンテンツ
</div>

【html + cssで制作したフッター】
<div class="footer">
コンテンツ
</div>
【jQuery Mobile要素で制作したフッター】
<div data-role="footer">
コンテンツ
</div>

以上の用にjQuery mobile要素を組み込んだコーディングになると「id属性」や「class属性」が変わっています。

jQuery Mobile要素を使ったページ作り

上記でご説明したjQuery mobile要素を使ってヘッダー、コンテンツ、フッターを組み立てます。

【jQuery mobile要素を使ったページ】
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery mobile要素を使ったページ</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!--ページ領域-->
<div data-role="page">

<!--ヘッダー領域-->
<div data-role="header">
ヘッダー
</div>

<!--コンテンツ領域-->
<div role="main" class="ui-content">
コンテンツ
</div>

<!--フッター領域-->
<div data-role="footer">
フッター
</div>

</div>

</body>
</html>

jQuery Mobile data-role属性一覧

jQuery mobileでコーディングする際のdata-role属性一覧をご紹介します。
ウィジェット 指定方法
ページ data-role=”page”
ヘッダー data-role=”header”
フッター data-role=”footer”
ナビゲーションバー data-role=”navbar”
タブ data-role=”tabs”
リスト data-role=”listview”
ポップアップ data-role=”popup”
パネル data-role=”panel”
開閉式コンテンツ data-role=”collapsible”
開閉式コンテンツのセット data-role=”collapsible-set”
テーブル data-role=”table”
コントロールグループ data-role=”controlgroup”
フリップスイッチ data-role=”flipswitch”
レンジスライダー data-role=”rangeslider”

以上がhtml + cssで組み立てたコーディングと異なるjQuery Mobile要素を使ったページ作りなります。
カテゴリ:WEB屋になる為の知識と技術, jQuery Mobileの基礎, スマートフォン制作と作成方法, 使えるjQueryとJavaScript

Facebookでコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

PAGE TOP