Linux & Android Dialy

jQueryMobile のソースメモ

jQueryMobileでは、divタグへ設定するdata-roleでモバイル向けのパーツを構成している

<div data-role="page" id="p-top">

</div>

この
data-role=”page”部分がページ1ページ、HTMLファイル1画面分になる
id=”” は、ページのidで
これを使いページを切り替えたりする

<div data-role="header">
<h1>タイトル</h1>
</div>

data-role=”header”
この部分がヘッダー定義
ipod touchとかでモバイル向け画面開いたとき
一番上の黒くなっている題名とかブログ名部分になるは h1タグで設定する

<div data-role="content">
<h2>本文</h2>
<p>テキスト</p>
</div>

data-role=”content”
これは、コンテンツの中身部分
HTMLのbody部分にあたる
表示したい内容はここに書くことになる

<div data-role="footer">
<p>copyright</p>
</div>

data-role=”footer”
ここは、フッター部分になり
copyrightとか、Twitterのアプリで
メニューを並べたりしている

個人的には、フッター部分へ
メニューやボタンがあったほうが操作しやすい

bodyの中の全体的なソースは

<div data-role="page">

<div data-role="header">
<h1>タイトル</h1>
</div>

<div data-role="content">
<h2>テキスト</h2>
<p>本文</p>
</div>

<div data-role="footer">
<p>copyright</p>
</div>

</div>

jQuery Mobile の準備

サーバー用途なら、CDNでいいけど
ハイブリッドアプリにするため、ファイルをダウンロードしておく

http://jquerymobile.com
からダウンロード

使うのは、
jquery.mobile-1.1.0.min.css
jquery.mobile-1.1.0.min.js
そして、関連画像が入っている
imageフォルダ

また、jQuery本体も使うので
http://code.jquery.com/jquery-1.7.1.min.js
もダウンロードしておく

まずは、サーバーで動作させ
その後ハイブリッドアプリへ変換する

mkdir jqn
mkdir jqn/css
mkdir jqn/js

これで、各ファイル格納ディレクトリ作成

cssフォルダには
jquery.mobile-1.1.0.min.css
と
画像関連の入っている imageフォルダ
を配置

jsフォルダには
jquery.mobile-1.1.0.min.js
jquery-1.7.1.min.js
を配置する

つまり、jsフォルダには
Javascript関連

cssにはレイアウトや画像関連になる

HTMLファイルは
jqnディレクトリ直下へ作成する

ハイブリッドアプリ作成に使うソフトウェア

jQuery
JavaScriptのフレームワーク

jQuery Mobile
モバイル向けの拡張フレームワーク

jqPlot
チャートライブラリー

jQuery Validation
入力チェックライブラリー

jQuery TouchPlugin
jQueryのタッチイベント処理

Android Theme for jQuery Mobile
jQuery mobile をAndroidみたいにする

jQuery Mobile DateBox
日付入力ボックス

Photo Swipe
スライドショーライブラリー

Mobile bookmark bubble
ブックマーク支援ライブラリー

phonegap
ネイティブ変換ライブラリー

phpthum
phpでサムネイルを作成する

android:layout_above
ここで指定したビューの上に配置される

android:layout_below
ここで指定したビューの下に配置される

この２つを設定するときは
大抵は２つのビューの間に設定したいときに行う

例えば

EditView

ListView

TextView

としたいのなら
EditText の下で
TextView の上になるので

ListView の設定で

android:layout_below=”@+id/edittext1″
ここで指定したビューの下に配置される
これで EditText の下になる

android:layout_above=”@+id/textview1″
ここで指定したビューの上に配置される
これで TextView の下になる

つまり 真ん中に配置されることになる