◆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で多角形のオブジェクトのクリックの仕方
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
(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でローカルファイルを読み込もうとしたけど失敗した
ブラウザでローカルファイルを開こうとするとセキュリティにひっかかって開けないらしい。
おそらく悪意のあるサイトを開いて、ローカルファイルをいじられる危険性を回避する為だと思う。
最終更新：2017年05月10日 13:08
jquery.center.js