niwadesign

ホームページ制作のネタ発信

iAKG会

第4回iAKG会 jQueryによる簡単なふるまいの追加

投稿日:2010/10/6 水曜日 更新日:

今回はjQueryを使って簡単な動きを追加します。

第4回iAKG会 iPhone向けのCSS

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>

続けて書こうと思ったけど、ブログ書くのを挫折します。
説明が難しい。。。本の丸写しになっちゃうし。
ってことで勉強会は続けますが、ブログへの記録はここで終わり。
すべて読み終わったらあらためてまとめのブログを書きます。

iAKG会(iPhoneアプリケーション開発ガイドを読みながらの勉強会)では
iPhoneアプリケーション開発ガイド —HTML+CSS+JavaScript による開発手法
を使って勉強会を行っています。

-iAKG会
-, ,

執筆者:


comment

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

関連記事

第2回iAKG会 iPhone上での表示に適した体制に変換するための基本的なテクニック

2章 2.1はじめの一歩 PCサイトをiPhoneで表示させて「改善の余地が多いね」って実感するための項。 このページは流し読みでオッケー! 2.1.1iPhone用のスタイルシート 共通HTMLを使 …

no image

第1回iAKG会(iPhoneアプリケーション開発ガイドを読みながらの勉強会)

iPhoneが日本で発売されて2年以上が経ちました。 そこでそろそろ本格的にiPhone用のサイトを作ってみようと手に取ったのがこの1冊! とにかく “Making App Store A …

第3回iAKG会 iPhone向けのCSS

今回はCSSを使ってiPhoneアプリケーションらしい表示の実現。 特徴的なタイトルバー 角丸箇条書きリスト 上記2点を実装して行くみたい。 2.2 iPhone向けのCSS body要素に対してのス …