フリーランス WEBデザイナー 【キングサイト】
最近のウェブ制作技術
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
ソーシャルネットサービス【SNS】情報・活用方法
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
Webデザイナーになる為の第一歩(初級)
WEB屋になる為の知識と技術
Webデザイナーになる為の第一歩(初級)
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ウェブ制作カテゴリ
Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

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

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でコメントする

    コメントする

    おすすめの記事

    PAGE TOP