kawama.jp

jqueryでAmazon商品情報をツールチップ風に表示

カテゴリ: Ajax,JavaScript — タグ: , — 2011年7月1日 21:54 — Comments (0)hatebu count

↓カーソルを乗せるとツールチップ風の小窓が表示されます。

JavaScript 第5版 jqueryドーナツ本 iPad2 アビイ・ロード

まずはphp側で、こんな風にtip=1がある場合は画像とタイトルだけを出力するようにします。

http://kawama.jp/php/amazon_products/?asin=4048684116&tip=1

そしてjqueryのhoverを使い、mouseover時にajaxで上記のデータを取得し、DOMに追加。

mouseoutの時にはDOMから削除します。

マウスオーバーのたびに$.getでデータを取得するのは無駄なので、キャッシュするようにしてみました。

//Amazon商品情報のチップを表示

var amazonProductsTip = function() {

var apt_cache = [];

$('a[href^=http://kawama.jp/php/amazon_products/?asin=], #amazon_products_tip').hover(

function(e){

e.stopImmediatePropagation();

var $this = $(this), $index = $this.index();

$(this).append('<div id="amazon_products_tip"></div>');

$('#amazon_products_tip').css({'padding-bottom':'5px', 'left':$this.offset().left+10+'px', 'top':$this.offset().top+12+'px'});

if(!apt_cache[$index]){ 

$.get($this.attr('href')+'&tip=1', function(data){ 

$('#amazon_products_tip').append(data);

apt_cache[$index] = data;

});

} else { 

$('#amazon_products_tip').append(apt_cache[$index]);

}

},

function(e){ 

e.stopImmediatePropagation();

$('#amazon_products_tip').remove();

}

);

}();

意外とあっさり実装できました。

なんか落とし穴がありそうな気がしますが、ひとまずここまでにしておきます。

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress

css.php