javascriptを使って、GoogleMapのようなふきだしを使いたいと思っています。


ポイントとして

1:クリックすることで表示される
(マウスを離しても閉じない)
2:ふきだしには「×」など閉じるボタンがある
3:中にhtmlが自由にかける

です。

Prototype Window Classは試してみたのですが
やや動きが大胆すぎるので、
ただ出て閉じることのできるレベルのものを探しています。

無料かつ自由に使えるライブラリやサンプルがありましたら、是非ともお願いいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/11/08 19:32:24
  • 終了:2006/11/15 19:35:03

回答(1件)

id:susie-t No.1

susie-t回答回数99ベストアンサー獲得回数182006/11/11 23:45:33

ポイント10pt

簡単なものですが。自作です。prototype.jsを使用してます。

(もっといいライブラリとかありそうな気はしますが)

  • 関数:menubox
    • 第一引数:内容のhtml。
    • 第二引数:表示基準要素。デフォルトでその左下に表示。
    • 第三引数:デフォルトの位置からの差分。{left:'**px',top:'**px'}形式で指定。

×ボタンで消せます。メニューボックスのスタイルはid:menubox、ボタンはid:menubox_closeで指定できます。同時に複数表示はできません。

<html>
<head>
<title></title>
<style>
<!--
#menubox{
  border:solid blue 2px;
  width:100px;
  height:100px;
  background-color:yellow;
}
#menubox_close{
  float:right;
  width:20px;
  padding:0px;
  letter-spacing:0px;
}
-->
</style>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script>
<!--
var menubox = function(html, obj, diff){
  if($('menubox') == null){
    new Insertion.Bottom(document.body,
      "<div id='menubox' style='position:absolute;'>"
    + "<button id='menubox_close' onclick='menubox.hide();'>×</button>"
    + "<div id='menubox_menu'></div>"
    + "</div>");
  }
  Element.show('menubox');
  Element.update('menubox_menu', html);
  var value = Position.cumulativeOffset(obj);
  var left = value[0];
  var top  = value[1] + obj.offsetHeight;
  if(diff){
    left += (parseInt(diff.left) || 0);
    top  += (parseInt(diff.top)  || 0);
  }
  Element.setStyle('menubox', {'left':left, 'top':top});
}
menubox.hide = function(){
  Element.update('menubox_menu', '');
  Element.hide('menubox');
}
//-->
</script>
</head>
<body>
<span onclick="menubox('犬', this);">dog</span>
<span onclick="menubox('<b>猫<\/b>', this, {left:'20px', top:'-20px'});">cat</span>
</body>
</html>

簡単すぎますかね・・・^^;

ダミーURL http://q.hatena.ne.jp/1162981941

  • id:kensuu
    多忙のため、開く前に質問が終了してしまっていました!
    ご回答ありがとうございます!
  • id:susie-t
    質問者の方へ
    ポイント送信ありがとうございます。
    お役に立てて幸いです^^

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません