たぶん私以外の人がみたらなんのこっちゃ？となるとおもう。ですが忘れないように備忘録。
下のソースでなになってるかというと、基本はjQueryです。
１、最初のスクリプトは、クリックしたらaタグのhrefで指定した先をフェードインしてね。
２、次は、クリックしたボックスの親ボックス（relative）からの相対位置を取得して、さらにクリックしたボックス左上角を基点にマウスの位置を取得し、合計した数値をフェードインしてくるボックスのcss styleのtopとleftに代入。
※なんでこんなめんどくさいかというと、クリックしたボックスと、フェードインするボックスは親子関係に置けないため親ボックスを基点にpositionを設定しなきゃでした。
でも、もっと簡単な方法はあると思うけど今回は急ぎだったのでこれで。
jQuery本体は読み込んで。
jsの記述はこんな感じ
<script type="text/javascript">// <![CDATA[
//地域リストをクリックしたら地域内の都道府県を表示
$(document).ready(function () {
$('div.area_map').hide();
// $('.maps li:first').addClass('active');
$('.area_list li').click(function() {
$('.area_list li').removeClass('active');
$(this).addClass('active');
$('div.area_map').hide();
$($(this).find('a').attr('href')).fadeIn();
});
//クリックしたときの挙動
$("ul.area_list > li").click(function(event){
//クリックされたliのpositionのtop、leftを取得
var ptop = $(this).css('top').replace('px', '');
var pleft = $(this).css('left').replace('px', '');
//クリックされたli内ののクリックした座標を取得//firefoxに対応した記述
var offset = $(event.target).offset();
var offsetX = event.pageX - offset.left;
var offsetY = event.pageY - offset.top;
var X = (pleft - 0) + (offsetX - 0) + "px";//-0で数値として扱う
var Y = (ptop - 0) + (offsetY - 0) + "px";//-0で数値として扱う
//表示されたdiv.area_mapのcssのtop、leftに代入
$("div.area_map").css({"top": Y , "left": X});
});
});
// ]]></script>
jQueryで外部xmlを読み込んでHTMLに展開する記述。
$(document).ready(function () {
$.ajax({
url: '/pref.xml',
dataType: 'xml',
success: xmlParser
});
});
function xmlParser(xml) {
$("field",xml).each(function () {
$('#footer #pref-link').append($("pref",this).text());
});
$('#footer #pref-link').prepend('<a href="/dir/map.php">タイトル</a>
');
}
XMLはこんなん。
<?xml version="1.0" encoding="UTF-8" ?> <!-- これはちょっといい加減なｘｍｌです --> <field> <pref><dd><a href="/dir/find.php?pref=1">北海道</a></dd></pref> <dd><a href="/dir/find.php?pref=3">岩手県</a></dd> <dd><a href="/dir/find.php?pref=6">山形県</a></dd> <dd><a href="/dir/find.php?pref=11">埼玉県</a></dd> <dd><a href="/dir/find.php?pref=12">千葉県</a></dd> <dd><a href="/dir/find.php?pref=13">東京都</a></dd> <dd><a href="/dir/find.php?pref=14">神奈川県</a></dd> <dd><a href="/dir/find.php?pref=20">長野県</a></dd> <dd><a href="/dir/find.php?pref=21">岐阜県</a></dd> <dd><a href="/dir/find.php?pref=23">愛知県</a></dd> <dd><a href="/dir/find.php?pref=24">三重県</a></dd> <dd><a href="/dir/find.php?pref=26">京都府</a></dd> <dd><a href="/dir/find.php?pref=27">大阪府</a></dd> <dd><a href="/dir/find.php?pref=28">兵庫県</a></dd> <dd><a href="/dir/find.php?pref=34">広島県</a></dd> <dd><a href="/dir/find.php?pref=37">香川県</a></dd> <dd><a href="/dir/find.php?pref=45">宮崎県</a></dd> </field>
参考URL
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1044549170
http://studiomikan.net/blog/?p=708
http://gelsol.sub.jp/javascript/jquery/004.html
http://www.ezgate-mt.sakura.ne.jp/jquery/109.html
