今回はjQueryを使って簡単な動きを追加します。
2.4jQueryによる簡単なふるまいの追加
ヘッダー部分のナビゲーションメニューをユーザーが表示、非表示と切り替えられるようにする。
- ヘッダー内のulをdisplay: none;に指定する
- html内にボタンを設置する
<div class="leftButton" onClick="toggleMenu()">メニュー</div>
このclass=”leftButton” に対してスタイルをつけていきます。
そこで注目するのがrgba()という関数をつかってスタイルを指定することができます。
text-shadow: rgba(0,0,0,0.6) 0 -1px 0px;
最後の4つめの値にアルファ値(不透明度)を指定することができます。
値は0(完全な透明)から1(完全な不透明)。
最後にjavascriptを読み込んで完成
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="iphone.js"></script>
続けて書こうと思ったけど、ブログ書くのを挫折します。
説明が難しい。。。本の丸写しになっちゃうし。
ってことで勉強会は続けますが、ブログへの記録はここで終わり。
すべて読み終わったらあらためてまとめのブログを書きます。
iPhoneアプリケーション開発ガイド —HTML+CSS+JavaScript による開発手法
を使って勉強会を行っています。