Webmemo

Web制作の備忘録

0406−jQueryMobile練習2

こんばんは。

今日はdreamweaverの機能ではなくjquerymobileのライブラリを読み込んで制作しました。

授業の資料をそのまま使い動作を確認しながら学習しました。デザインやUIに凝るとどういうフローで制作するのか気になります。

http://kumacomemo.html.xdomain.jp/jquerymobilesample-2.html

以下覚え書き。

 

【おおまかな手順】

読み込み→dataroleで書くパーツを構成→マルチページ化(1つのファイルで複数ページを作ること?)→各種装飾

【使った属性とメモ】

■data-roleの値

  • page ページを作成
  • main (class=”ui-content”併⽤用) コンテンツ領域
  • header ヘッダー領域
  • footer フッター領域

■マルチページ作成

  • <div data-role=”page” id=”top”></div>
  • 各ページはID属性で定義、遷移は遷移はhref属性の値でid名を指定して行う

■リンクボタンの作成

■リストビュー作成

■ナビゲーションバー

■戻るボタン

■ヘッダとフッタの固定

■画像や文書のポップアップ

■ページ切り替え効果

■テーマの指定

■アコーディオン


【その他】

■画像を中央揃えにしたい → 画像を囲っている要素にスタイル指定。

<p style=”text-align:center;>でいけました。

参考 : Dreamweaver CS5.5 マスターシリーズ 第2回 jQuery Mobile …

jQuery Mobileページの基本構造を理解しよう - @IT

jQuery Mobile1.4でスマホサイト作成1〜文書構造作成 | IT工房 …

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)