jqMobiのサンプルを調べ尽くす その3

ようやくサンプル文のbodyに入れます!
今回は初期に表示される画面の構成を書きます。

前回はこちら
#そんなに詳しくない人が頑張って解読してますので、間違ってる内容とかあったらぜひともコメントくださいませ。

102
<div id="header">

</div>

headerは何にも入ってない。

106
<div id="content">
	<div title='Welcome' id="main" class="panel" selected="true">
</div>

contentです。
アプリ面の構成は、
content : ヘッドの部分(タイトルとか戻るボタンがあるバー)+タッチできるメイン画面
navbar : 下に不動で出続けるメニュー
という作りみたいですね。
(footerは無いみたい。headerは何のために??)

titleは最初にアプリ起動したときにヘッドバーに表示される名前なので、
アプリ名でも入れておけば良いと思います。

でも、ヘッドバーの文字はなんだか中央より左にずれていて気持ち悪いです。

109
	<h2 class='expanded' onclick='showHide(this,"main_info");'>Welcome</h2>
		<p id='main_info'>Welcome to the kitchen sink demo for jqMobi.  Here you will find samples of how to use the jqMobi libraries.  Please select an option from below.</p>
		<ul>
		 <li><a href="#jqm" >jqMobi</a></li>
		 <li><a href="#jqmui" >jqUi</a></li>
		 <li><a href="#jqmweb" >jqPlugins</a></li>
		</ul>

	</div>

はい。初期表示画面の中身ですね。

onclick='showHide(this,"main_info");

これを設定しておけば、ポチット押すと表示されたり非表示したりします。
「main_info」 はidの指定ですね。

<p id='main_info'>

この内容を表示・非表示できます。

<ul>
		 <li><a href="#jqm" >jqMobi</a></li>
		 <li><a href="#jqmui" >jqUi</a></li>
		 <li><a href="#jqmweb" >jqPlugins</a></li>
</ul>

これは分かりやすい。スマホっぽいUIに勝手になります。
これは多用しそう。

ちょっとだいぶ下の方になりますが、

1159
<!-- ------------------------------------------ -->
<!-- navbar -->
<div id="navbar">
	<div class="horzRule"></div>
    <a href="#main" class='navbar_home' ontouchstart="">home</a>
    <a href="#jqm" class="navbar_js" ontouchstart="">selectors</a>
    <a href="#jqmui"  class="navbar_ui" ontouchstart="">ui</a>
	<a href="#jqmweb"  class="navbar_plugins" ontouchstart="">plugins</a>
</div>
	
<!-- ------------------------------------------ -->

ここが下に表示されるメニューの部分ですね。
初期表示は#mainです。117行目で、id=”main”ってdivに指定してましたが、
ボタンを押すと、その内容が表示されます。
同様に、#jqmならば、id=”jqm”で指定された箇所だけを表示します。

その4に続く

このエントリーをはてなブックマークに追加
はてなブックマーク - jqMobiのサンプルを調べ尽くす その3
Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]
[`grow` not found]

コメントを残す

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