jQuery
今回はjQueryで「モーダルウィンドウ」を作成する方法を解説します。モーダルウィンドウとは、表示中に他のウィンドウの操作を受け付けないウィンドウのことで、Webサイトにおいては一般的に、半透明のレイヤーを重ねてWebページを暗くした上に表示するウィ…
これは使いそうだよなぁ〜！では早速コードを！ ちなみにここに記載されているCSSコードをそのまま使用してもダメだったので注意。かなり悩んでしまった。。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </meta></meta></meta></head></html>
これはなんかヤダなぁ。。以前書いたエントリでも、「スターハック」とかゆーIE用のCSSの記述について少し触れたエントリ書いたけど、今回のなんて完全に「ブラウザ」を判別して分岐することでクロスブラウザ対応してるんだもの。if文使って。 もし、実際の…
ロールオーバーて意味がわからんかった。「画像にマウスカーソルを重ねたときに自動的に別の画像に表示を切り替える効果」だって。 今回はメニューバーに見立てたタグ群にこのロールオーバーを実装してみるらしい。 <html> <head> <style> li{ display:inline; /* 横に一列に並</style></head></html>…
今度はツールチップ（何かにマウスオーバーしたときにその説明をマウス付近にポップアップ表示するヤツ）を作成する。ツールチップ自体は、title属性やimg要素のalt属性にテキストを記述すれば表示されるが、表示のデザインや挙動がブラウザーによって違う上…
お次はタブパネルを作るチュートリアル。さぁ、サクサクいこう。 <html> <head> <style> #container{ width:500px; margin:50px auto; } ul.tab{ padding:0; } ul.tab li{ list-style-type:none; width:100px; height:40px; float:left; } ul.tab li a{ outline:none; /* 下部に</head></html>…
続いてアコーディオンパネルUIを自作してみる。まずは基本的な動作の部分から。 <html> <head> <style> dl{ width:800px; } dt{ line-height:35px; font-size:large; text-indent:3em; font-weight:bold; color:white; height:35px; background:url("http://editors.ascii.jp/m-</head></html>…
今度は実際に使える（？）アプリケーションを作ってみる。今までまとめてきたjQueryのトピックを使って画面遷移しない画像ギャラリーアプリケーションを製作していく。概要としては、左側にサムネイルのリストを表示し、そこで選択した画像を、右側のメイン…
隔行、隔列で異なる背景色を持たせるテーブル（ストライプテーブル）を作ってみる回。 ストライプテーブルを作る場合、CSS2の機能だけでは苦労していたらしいが、CSS3の機能を使うとすんごい簡単にできるそうな。 過去のエントリで試行錯誤してそれっぽいの…
SICPの方、かなり切りが悪いけどここで久々にjQueryに復帰。（理由は秘密。） さて、第１１はアニメーションについて。いろいろ出てきますね〜。 メソッド 概要 アニメーションの仕方 show([スピード[, コールバック関数]]) ○スピード："slow"|"norma"|"fast…
次に実際にJSONPを使った通信をしているサンプルを作ってみようと思う。 今回はあくまでもクライアント側の実装についての勉強なので、サービス側は既に存在するものを使用する。 以下は、ようつべに対してキーワードを送信し、ヒットした10件のサムネイル画…
単なる推測なのでウソかもしれんが、もう少し具体的な流れを書いておこ。 多分、「$.ajax({...})」メソッドの背後ではこの手の原理が実行されていると思う。 イベント発生 送信イベントを発生させる操作（例えばボタンクリック等）を行う。 コールバック関数…
とうとう出てきたよ、Ajaxの「肝」である通信部分！ 今回のこの通信部分のセクションについては、load、html、ajaxというメソッドが登場するが、最も細かい操作が可能なタイプはajaxメソッドだけっぽい？ 正直ajaxメソッド以外は知ってても知らなくてもよさ…
フォームデザインのフィルタはこれが最後かな？selectタグで選択されている「フォーム部品」を取得する。 この「フォーム部品」てのは、selectタグについてはoptionになるのかなぁ。 そこらへんの定義がよくわからん。 ま、jQueryに関しては「使えるようにな…
今日も早く帰ってこれたぞと。 昨日の続きで、「:checked」フィルタ。 当然思いつくべきことを忘れていた。。さんざん、入力タグ系のフィルタって使うケースあんのか？と言っていましたが、 子セレクターとして使えればそれなりの需要はありそうだ。 という…
疲れが溜まっております。。 んが、今日は少し早く帰ってきたのでエントリ追加。 radioとかcheckboxってinputタグ中にinnerHTMLとかinnerTextとかで文字列を入力しても意味無いのね。 中に文字を設定したらその文字をクリックしても切り替えが発生すればいい…
とりあえず全部の入力タグを扱うサンプル。 サンプル中ではコメントアウトしているけども、:input、:text、:password、:submit、:image、:reset、:button、:file を試せるようにしております。 尚、以下のサンプルを試す場合、input[type='image']については…
フォーム部品を選択するフィルタ（セレクタの一種）がたくさんあるとのこと。 これらを使うとフォーム部品の選択が楽になるらしい。 表を作ってみた。（と思ったら参考にしているサイトの最後にほとんど同じ表が。。） フィルタ 対象タグ :input inputselect…
お次はsubmitイベント。 ただし、これはformタグに絡むのであって、submitしたボタンで発生するわけではないので注意。サンプルではzipcodeというIDのformタグと、その中で「type="submit"」指定されたinputタグ（ボタン）を定義し、 そいつがクリックされた…
これもなんでイベントのセクションででてこなかったんだろう。。 コントロールの入力内容が変化した場合に発生するイベント。↓のサンプルではブタの選択を変更すると本文の入力フォームの内容が変わる感じ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(functio…</head></html>
以前やった「イベントの操作」のとこでなんで出てこなかったのか理解できないが、 入力タグがフォーカスを受け取ったとき、フォーカスを失った時に発生するイベント。前のエントリーに、Emailの入力タグがフォーカスを受け取ったら説明を右側に出し、フォー…
さて、久々のjQueryです。ちょっと体調悪かったり背中痛かったりで今日はすぐ諦めてしまいそうな気がしますが、一歩一歩参りましょう。まずはinput系のタグの操作。 セレクターに対して「val()」で値を取得、「val(○○○)」で値をセットすると。 呼び出し方に…
イベント関連最後？早いな。最後は動的にプログラミングする場合、かなり使う頻度が多そうな live()。Javascriptによって動的に生成されたタグに、既に定義してあるイベントが反映されるようにする。 サンプルでは上側枠線内に表示される文字列は１行目はク…
設定されているイベントを削除する。これもどういう時に使うべきなのかイメージがイマイチ。。 例によってサンプルを。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("#div1").click(function(){ var di…</head></html>
イベント発生時に一度だけ命令を実行する one()どういう時に使うべきなのかイメージが沸かない。 とりあえずサンプルだけでも。。初期表示状態ではyahooへのリンクとなっているが、 一回クリックするとGoogleへのリンクに変わる。 で、その後はクリックして…
mousemoveイベントについて。マウスカーソルが動いている時に発生するイベント。 大抵の場合、マウスカーソルの座標（但し、ブラウザの左上を[0, 0]とする）を取得するような場合に使われるらしい。 他のイベントと違って、引数とし手渡すfunctionに、引数を…
mouseover、mouseoutイベントについて。マウスカーソルががお目当ての要素の上にきた時、あるいは要素の外に出た時に発生するイベント。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("div").mouseover(…</head></html>
toggleイベントについて。 今までのイベントは、引数に一つのfunctionを受け取っていたが、toggleは複数のfunctionを受け取れる感じ。 で、クリックする度に登録した順序のfunctionが実行されるらしい。 結構便利そうだな。（具体的な使い道はすぐ思いつかな…
mousedown、mouseupイベントについて。 mousedownはお目当ての要素の上でマウスの左ボタンを押した時のイベント。 mouseupはお目当ての要素の上でマウスの左ボタンを離した時のイベント。 クリックとは違うので注意。 以下のサンプルは、文字列の上でマウス…
ダブルクリックイベント お次はダブルクリックイベント。 記述の仕方はクリックと変わらん。イベントの扱い方その１（注意点）でも記載したが、 イベントを登録した対象となる要素に、既にclickイベントが登録されていた場合、 dblclickイベントを登録しても…
