◆ 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ではあああは表示されない

datepicker


datepicker
カレンダーを表示するプラグインです。
注意すべき点が2点あります。

(1) ダウンロードすると祝日表示できない
まず、カレンダーに祝日を表示するのに
gcalendar-holidays.jsをダウンロードして
表示しようとしてもできません。
恐らくこのjsとcssの他にも参照しているファイルがいくつかあり、
それが入っていない為だと思います。


↑このようにgoogleサーバにあるjsとcssを参照するようにすれば、
そのファイルの周辺にあるファイルを参照してくれるので
祝日が表示できるようになります。
また毎年変わる祝日などもgoogleさんが対応してくれるので
保守の必要がありません。

(2) UTF-8じゃないページで日本語表示すると文字化け

datepickerはUTF-8で出来ています。
Shift_JISで日本語表示でカレンダー使おうとすると
文字化けします。
(1)の問題から祝日表示する為にはgoogleサーバのファイルを
参照しなければいけません。
でもShift_JISありません。
そんな時はjquery.ui.datepicker-ja.min.jsだけ
ローカルに落としてしまえば正常に動きます。
日本語表示しているのはjquery.ui.datepicker-ja.min.jsで
尚且つ外部ファイルは参照してないっぽいので、
問題なくいけました。

Ajaxなどでソースが煩雑になる場合のお勧めプラグイン



Ajaxでローカルファイルを読み込もうとしたけど失敗した


ブラウザでローカルファイルを開こうとするとセキュリティにひっかかって開けないらしい。
おそらく悪意のあるサイトを開いて、ローカルファイルをいじられる危険性を回避する為だと思う。


|