jQuery のイベントを利用するコードを紹介します。イベントを利用するとセレクタで選択したオブジェクトにクリックなどのイベント動作を割り当てることができます。
クリックイベントに関してはこちらの記事を参照してください。
または
と記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.button").dblclick(function () {
alert("ダブルクリックされました。");
})
})
</script>
<style>
.button {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width:200px;
height:32px;
}
</style>
</head>
<body>
<div class="button">アイコンのつもりです。</div>
</body>
</html>
上記のコードをWebブラウザで表示します。下図の画面が表示されます。
"アイコンのつもりです。"の枠をダブルクリックすると、下図のダイアログボックスが表示されます。
または
または
と記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.button").mousedown(function () {
$("div#message").text("マウスのボタンが押されました。");
})
$("div.button").mouseup(function () {
$("div#message").text("マウスのボタンがはなされました。");
})
})
</script>
<style>
.button {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width: 200px;
height: 32px;
}
</style>
</head>
<body>
<div class="button">枠</div>
<div id="message"></div>
</body>
</html>
上記のHTMLファイルを表示します。下図の画面が表示されます。
[枠]にマウスのポインタを載せマウスボタンを押します。マウスボタンが押された旨のメッセージが表示されます。(下図)=
マウスのボタンを離すと、マウスボタンがはなされた旨のメッセージが表示されます。
または
または
と記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.button").mouseover(function () {
$("div#message").html("枠内にポインタがあります。")
})
$("div.button").mouseout(function () {
$("div#message").html("")
})
})
</script>
<style>
.button {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width:200px;
height:32px;
}
</style>
</head>
<body>
<div class="button">枠です</div>
<div id="message"></div>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[枠]の内側にマウスポインタを移動します。枠にポインタが入ると"枠内にポインタがあります。"のメッセージが表示されます。
マウスポインタが枠の外側に出るとメッセージは非表示になります。
