2009年10月28日
フォームで使う命令 val()
ASCII.jp：jQueryによるフォームのデザインの基礎（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
val()命令はフォームに記入された値を取得・変更する命令。
以下は「比較」ボタンを押すと文章1と文章2に記入された文字を比べてその結果を出します。
「消す」ボタンを押すと記入された文字を消去します。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
val()命令はフォームに記入された値を取得・変更する命令。
以下は「比較」ボタンを押すと文章1と文章2に記入された文字を比べてその結果を出します。
「消す」ボタンを押すと記入された文字を消去します。
文章1：
文章2：
結果：
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#val button#hikaku").click(function(){
if (($("#val input#bunsyo1").val() == "") || ($("#val input#bunsyo2").val() == "")) {
$("#val p span").text("文章1と文章2に文字を入力してください。");
} else {
if ($("#val input#bunsyo1").val() == $("#val input#bunsyo2").val()) {
$("#val p span").text("文章1と文章2同じです");
} else {
$("#val p span").text("文章1と文章2は違います");
}
}
});
$("#val button#kesu").click(function(){
$("#val input#bunsyo1,#val input#bunsyo2").val("");
});
})
</script>
<div id="val">
<p>文章1：<input id="bunsyo1" type="text" name="name" /></p>
<p>文章2：<input id="bunsyo2" type="text" name="name" /></p>
<button id="hikaku">比較</button>
<button id="kesu">消す</button>
<p>結果：<span></span></p>
</div>2009年10月27日
live()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（後編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
jQueryで属性やスタイルが設定されている要素を後からら<button>などで増やした場合、その新しい要素には属性やスタイルは設定されていない。
そういう時はlive()イベントを使う。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
jQueryで属性やスタイルが設定されている要素を後からら<button>などで増やした場合、その新しい要素には属性やスタイルは設定されていない。
そういう時はlive()イベントを使う。
live()イベントを使わない場合。
赤い部分へカーソルを乗せると、画像の透明度が変わります。「要素を追加」ボタンを押すと「透明度0%」が出てきますが、透明度は変わりません。
- 透明度25%
- 透明度50%
- 透明度75%
live()イベントを使った場合。
赤い部分へカーソルを乗せると、画像の透明度が変わります。「要素を追加」ボタンを押すと、「透明度0%」が増えます。
- 透明度25%
- 透明度50%
- 透明度75%
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#live_none button").one("click",function(){
$("#live_none ul").append("<li style='width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:1;'>透明度0%</li>");
});
$("#live_none li").mouseover(function(){
$("#live_none img").css("opacity",$(this).css("opacity"));
});
});
$(function(){
$("#live button").one("click",function(){
$("#live ul").append("<li style='width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:1;'>透明度0%</li>");
});
$("#live li").live("mouseover",function(){
$("#live img").css("opacity",$(this).css("opacity"));
});
});
</script>
<div id="live_none"><h3>live()イベントを使わない場合。</h3>
<p>赤い部分へカーソルを乗せると、画像の透明度が変わります。「要素を追加」ボタンを押すと「透明度0%」が出てきますが、透明度は変わりません。</p>
<button>要素を追加</button>
<ul>
<li style="width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:0.75;">透明度25%</li>
<li style="width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:0.50;">透明度50%</li>
<li style="width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:0.25;">透明度75%</li>
</ul>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>
<div id="live"><h3>live()イベントを使った場合。</h3>
<p>赤い部分へカーソルを乗せると、画像の透明度が変わります。「要素を追加」ボタンを押すと、「透明度0%」が増えます。</p><button>要素を追加</button>
<ul>
<li style="width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:0.75;">透明度25%</li>
<li style="width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:0.50;">透明度50%</li>
<li style="width:96px;height:26px;line-height:30px;text-align:center;background-color:#ff0000;border:solid 2px #aa0000;display:inline;opacity:0.25;">透明度75%</li>
</ul>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>2009年10月26日
unbind()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（後編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
unbind()イベントはあらかじめ設定されているイベントを解除するイベント。
画像変更ボタンを押すたびに画像を変更します。これは画像変更ボタンにtoggle()イベントが設定してあります。
変更解除ボタンを押すと、画像変更ボタンを押しても反応しなくなります。
疑問：unbindするイベントはtoggleのはずだが、それだと解除できなかった。しかしclickを指定することで解除できた。なんででしょ？
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
unbind()イベントはあらかじめ設定されているイベントを解除するイベント。
画像変更ボタンを押すたびに画像を変更します。これは画像変更ボタンにtoggle()イベントが設定してあります。
変更解除ボタンを押すと、画像変更ボタンを押しても反応しなくなります。
疑問：unbindするイベントはtoggleのはずだが、それだと解除できなかった。しかしclickを指定することで解除できた。なんででしょ？
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button#toggle").toggle(function(){
$("#unbind img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_02.png").attr("alt","画像2");
},function(){
$("#unbind img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_03.png").attr("alt","画像3");
},function(){
$("#unbind img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_04.png").attr("alt","画像4");
},function(){
$("#unbind img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_01.png").attr("alt","画像1");
});
$("button#kaijo").click(function(){
$("#unbind button#toggle").unbind("click");
});
})
</script>
<div id="unbind">
<button id="toggle">画像変更</button>
<button id="kaijo">変更解除</button>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>2009年10月24日
one()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（後編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
one()イベントは1回だけ命令するイベント。
mouseover()とmouseout()を使って、画像にカーソルを乗り降りさせると1回づつ画像が替わるようにしました。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
one()イベントは1回だけ命令するイベント。
mouseover()とmouseout()を使って、画像にカーソルを乗り降りさせると1回づつ画像が替わるようにしました。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#one img").one("mouseover",function(){
$("#one img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_02.png").attr("alt","画像2");
});
$("#one img").one("mouseout",function(){
$("#one img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_03.png").attr("alt","画像3");
});
})
</script>
<div id="one"><p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p></div>
2009年10月23日
mousemove()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた
mousemove()イベントは特定要素の上でマウスが動いたときに命令を実行するそうです。
昔、マウスストーカーって、オブジェクトがマウスの後を付いてくるギミックがあったけど、多分これを使っていたんでしょうね。
応用して画像のサイズをカーソルの位置で変更するスクリプトを書いて見ました。
取り合えず画像のサイズを変えることには成功したけど、疑問が・・・。
１、画像のプロパティの変更はwidthにしか設定していないのに、heightも変更されてしまう。
２、よく考えると、widthには単位(px)が設定されていない。これが１の原因と関係あるのか？
分かり次第、報告します。
コードは以下の通り。
上記リンクを参考に実際に書いてみた
mousemove()イベントは特定要素の上でマウスが動いたときに命令を実行するそうです。
昔、マウスストーカーって、オブジェクトがマウスの後を付いてくるギミックがあったけど、多分これを使っていたんでしょうね。
応用して画像のサイズをカーソルの位置で変更するスクリプトを書いて見ました。
取り合えず画像のサイズを変えることには成功したけど、疑問が・・・。
１、画像のプロパティの変更はwidthにしか設定していないのに、heightも変更されてしまう。
２、よく考えると、widthには単位(px)が設定されていない。これが１の原因と関係あるのか？
分かり次第、報告します。
この上でカーソルを横に動かしてください
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#mousemove p").mousemove(function(e){
$("#mousemove img").css("width",e.clientX/4);
});
})
</script>
<div id="mousemove"><p style="margin:0px;width:360px;height:50px;line-height:50px;background-color:#ccc;text-align:center;">この上でカーソルを横に動かしてください<br /></p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></div>
2009年10月21日
mouseover()、mouseout()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた
mouseover()、mouseout()イベントは名前の通り、カーソルが対象物の上に乗ったときにイベントを発生させる関数。
いわゆるロールオーバーで頻繁に使われます。
下のサンプルは画像を換えるのではなく、cssのmarginを使って位置をずらしています。
コードは以下の通り。
上記リンクを参考に実際に書いてみた
mouseover()、mouseout()イベントは名前の通り、カーソルが対象物の上に乗ったときにイベントを発生させる関数。
いわゆるロールオーバーで頻繁に使われます。
下のサンプルは画像を換えるのではなく、cssのmarginを使って位置をずらしています。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#mouse img").mouseover(function(){
$("#mouse img").css("margin","2px -2px -2px 2px");
});
$("#mouse img").mouseout(function(){
$("#mouse img").css("margin","0px");
});
})
</script>
<div id="mouse"><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p></div>2009年10月20日
toggle()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
toggle()イベントはクリックするたびに異なる命令を実行するイベント。
2番目からの命令はfunction(){...}をカンマでつなぐ。
命令は最後まで行ったら最初に戻る。ギャラリーの基本に使えるのかな。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
toggle()イベントはクリックするたびに異なる命令を実行するイベント。
2番目からの命令はfunction(){...}をカンマでつなぐ。
命令は最後まで行ったら最初に戻る。ギャラリーの基本に使えるのかな。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#toggle button").toggle(function(){
$("#toggle img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_02.png").attr("alt","画像1");
},function(){
$("#toggle img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_03.png").attr("alt","画像1");
},function(){
$("#toggle img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_04.png").attr("alt","画像1");
},function(){
$("#toggle img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_01.png").attr("alt","画像1");
})
})
</script>
<div id="toggle">
<button>button</button>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>2009年10月18日
dblclick()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
dblclick()イベントはその名の通り、ダブルクリック時にイベントを起こす関数。
基本はclick()と同じだが、注意点がひとつ。
a要素にdblclick()を仕掛けようとすると、false return;を書いてもちゃんと動かない。
これを直すには、メソッドチェーンでclick(function(){return false})を付け加えること。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
dblclick()イベントはその名の通り、ダブルクリック時にイベントを起こす関数。
基本はclick()と同じだが、注意点がひとつ。
a要素にdblclick()を仕掛けようとすると、false return;を書いてもちゃんと動かない。
これを直すには、メソッドチェーンでclick(function(){return false})を付け加えること。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#dblclick1 button").dblclick(function(){
$("#dblclick1 img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_02.png").attr("alt","画像1");
});
});
$(function(){
$("#dblclick2 a").dblclick(function(){
$("#dblclick2 img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
}).click(function(){
return false;
});
});
</script>
<div id="dblclick1">
<button>button</button>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>
<div id="dblclick2">
<ul>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_01.png">画像1</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_02.png">画像2</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_03.png">画像3</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_04.png">画像4</a></li>
</ul>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>2009年10月16日
click()イベントその3 $(this)セレクター
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
前回の「click()イベントその2 eqフィルター」の続きです。
前回のコードは冗長で汎用性にかけるとのことで、$(this)セレクターを使うとのこと。
このセレクターはイベントが発生した要素を取得する・・・
つまり前回のコードでいうと、どのa要素をクリックしても、クリックしたa要素の属性などを取得することが出来る。
よってa要素がいくつ増えてもプログラムを書き換える必要もなくなるどころか、命令は1回ですむ。
コードは以下のように短くなる。
上記リンクを参考に実際に書いてみた。
前回の「click()イベントその2 eqフィルター」の続きです。
前回のコードは冗長で汎用性にかけるとのことで、$(this)セレクターを使うとのこと。
このセレクターはイベントが発生した要素を取得する・・・
つまり前回のコードでいうと、どのa要素をクリックしても、クリックしたa要素の属性などを取得することが出来る。
よってa要素がいくつ増えてもプログラムを書き換える必要もなくなるどころか、命令は1回ですむ。
コードは以下のように短くなる。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#click_eq a").click(function(){
$("#click_eq img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
})
})
</script>
<div id="click_eq">
<ul style="line-height:1;">
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="">画像1</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_02.png" alt="">画像2</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_03.png" alt="">画像3</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_04.png" alt="">画像4</a></li>
</ul>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>2009年10月14日
click()イベント その2 eqフィルター
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
前回の「clickイベント」の続きです。
前回のままだと実用性にかけるので、jQueryの独自フィルター「eqフィルター」を使って、リンクをクリックすると指定した場所の画像が入れ替わる、と言うのを実現。
ポイントはreturn false;を使って、リンクから別ページにジャンプしてしまう挙動を抑えてるところ。
以外に簡単なんですね。
コードは以下の通り
上記リンクを参考に実際に書いてみた。
前回の「clickイベント」の続きです。
前回のままだと実用性にかけるので、jQueryの独自フィルター「eqフィルター」を使って、リンクをクリックすると指定した場所の画像が入れ替わる、と言うのを実現。
ポイントはreturn false;を使って、リンクから別ページにジャンプしてしまう挙動を抑えてるところ。
以外に簡単なんですね。
コードは以下の通り
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#click_eq a:eq(0)").click(function(){
$("#click_eq img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_01.png").attr("alt","画像1");
return false;
})
$("#click_eq a:eq(1)").click(function(){
$("#click_eq img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_02.png").attr("alt","画像2");
return false;
})
$("#click_eq a:eq(2)").click(function(){
$("#click_eq img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_03.png").attr("alt","画像3");
return false;
})
$("#click_eq a:eq(3)").click(function(){
$("#click_eq img").attr("src","//img01.naganoblog.jp/usr/webdesign/k_04.png").attr("alt","画像4");
return false;
})
})
</script>
<div id="click_eq">
<ul style="line-height:1;">
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1">画像1</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_02.png" alt="画像2">画像2</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_03.png" alt="画像3">画像3</a></li>
<li><a href="//img01.naganoblog.jp/usr/webdesign/k_04.png" alt="画像4">画像4</a></li>
</ul>
<p><img src="//img01.naganoblog.jp/usr/webdesign/k_01.png" alt="画像1" /></p>
</div>2009年10月12日
click()イベント
ASCII.jp：jQueryのイベントをチュートリアルで学ぶ（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみました。
最初の画像はYahoo!へリンクされています。
「button」をクリックすると画像が変わります。リンク先も変わります。
上記リンクを参考に実際に書いてみました。
最初の画像はYahoo!へリンクされています。
「button」をクリックすると画像が変わります。リンク先も変わります。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p#img_link_change img").attr("src","//img01.naganoblog.jp/usr/webdesign/google.png").attr("alt","google");
$("p#img_link_change a").attr("href","http://www.google.co.jp/")
})
})</script>
<button>button</button>
<p id="img_link_change"><a href="http://www.yahoo.co.jp/"><img src="//img01.naganoblog.jp/usr/webdesign/yahoo.png" alt="Yahoo!" /></a><p>
