「jQuery」の編集履歴(バックアップ)一覧に戻る

jQuery - (2012/12/27 (木) 16:13:36) の編集履歴(バックアップ)


◆jQuery




重なっているエリアマップは手前に表示されているものが優先

エリアタグで当たり判定を設定して、
当たり判定が重なってなくても、
画像が重なっている部分は手前に表示された画像のマップが優先される。

<img src="sample1.gif" map="#sampleMap1" border="0">
<img src="sample2.gif" map="#sampleMap2" border="0">

<map name="sampleMap1">
    <area id="sampleArea1" shape="poly"
    coords="0,0,100,0,100,50,0,50">
</map>
<map name="sampleMap2">
    <area id="sampleArea2" shape="poly"
    coords="0,50,100,50,100,100,0,100">
</map>

↑のようにして、画像はabsoluteで重ねたとしよう。
sample1.gifもsample2.gifもサイズは100x100。
sample1のエリアマップで0, 0から100x50のマップが割り当てられてて、
sample2のエリアマップで0,50から100x50のマップが割り当てられている。
二つは重なっていません。
すると、sample1.gifのエリアは全く反応しなくなる。
これは画像が重なっている為。
手前に表示されているsample2.gifのエリアしか反応しないのだ。
sample1.gifも反応させようとしたら、
sampleMap2にsample1のマップを記述し、
onclickやmouseoverなどの関数内で処理を分岐しなければならない。


jQueryで多角形のオブジェクトのクリックの仕方

タウンワークのトップページの地図でやってました。
areaタグを使っているそうです。

eachについて

$("div").each(function...
はできるけど、
$("#name").each(function..
<div id="name"></div>
はできない。
やるとしたら、
$("div").each(function() {
    if ($(this).is("#name")) {
        // ここに処理
多分こうやる。
でも試してないので、責任持ちません。

Strutsのstruts-htmlなどを使用する場合の指定の仕方

<html:text styleId="aaa"></html:text>
$("#aaa")
で指定できる

bind と trigger

obj.bind("code", function() { /* 処理 */} );
obj.trigger("code"); ←これで↑ここでbindした処理を呼び出せる。
obj.unbind("code"); ←これでbind解除

オブジェクトを呼び出し

$('#name') id名を指定
$('.name') class名を指定
$(this).children("#name") 子オブジェクト呼び出し
$(this).children() もOK
$(this).parent("#name") 親オブジェクト呼び出し
$(this).parent() もOK
$("#parent #brother .sister div") とかスペースで繋いで呼び出しもできる
この時、("#parent").children().children("#brother").children().children(".sister")
という状態でも↑のスペース繋ぎで呼び出せる

関数

オブジェクト.remove()は
関連付けられたプラグインを解除

オブジェクト.empty()は
中身を削除
(divなどを指定すれば、<div>で囲まれたオブジェクトを削除)

function($)

$をカッコ内に入れることで、
$(this)などしなくても、$だけで自身を取得できる

中身を取得

var hoge = $("a", b)
bの中のaを取得

ジャンププラグイン


callback関数の中でthisを使ってはいけない

callback関数ではcallback関数を渡された相手(?)がthisに
なってしまう為、
var Class = function() {
    this.name = "あああ";
    $.timer(view, 10, true);
    function view() {
        console.log(name);
    }
}
timerで0.01秒後に呼ばれるviewではあああは表示されない