ヘルプ内にhtmlコンテンツを内包するツールチップ（ポップアップヘルプ的なもの）

javascript lib

世の中にツールチップ的なヘルプをポップアップするjsはたくさん転がっていて、たいがいの場合はそれらのライブラリを使えばことが済む。こんなのとか
http://www.ideaxidea.com/archives/2008/10/tooltips.html

ただ今回場合、中のヘルプにaタグの記述などがあり、ユーザ操作を必要とするので、マウスがヘルプ上にある場合はツルーチップは表示させ続ける必要がある。
この要件に合うものがなかなか見つからなかったので、自分で書くことにした。
以下はそのスクリプトです。つたない点があるかもしれませんが仕事用のメモなのでお許しを。
ちなみにjQueryの使用を前提としています。

htmlの記述
<a href="" class="popup">?</a>
<p class="tooltip">ここに<a href="">ヘルプ</a>の文言とかが入ります</p>
cssの記述
.tooltip{
  width:300px;
  background:#fff;
  border:1px solid #ccc;
  padding:5px;
  position:absolute;
  display:none;
}
javascriptの記述
var t;
$(function(){
   show_pupup(); // ポップアップ用スクリプト起動
   // ツールチップ側の監視
   $('tooltip').hover(
      function(){
          cleartimeout(t); // hide_popup() を停止
      },
      function(){
          $(this).hide();    // ツールチップを隠す
      }
   );
});

// ポップアップ表示のスクリプト
var show_popup = function(){
  $('.popup').hover(
      function(e){
          cleartimeout(t);
          var tooltip = $(this).next();
          var x = e.pageX;
          var y = e.pageY + 10;
          $('tooltip').hide();
          $(bubble).show().css({'top':y, 'left':x});
      },
      function(){
          cleartimeout(t);
          var bubble = $(this).next();
          if( $(bubble).css('display') == 'none' ) { return }
          t = setTimeout(function(){
                    hide_popup(bubble);
                }, 1000);
      }
   );
};
// ポップアップを隠す
var hide_popup = function(obj){
    $(obj).hide();
};

「？」にマウスが乗ったら、ツールチップを表示させ、そのまま外れたらsetTimeoutで1秒後にツールチップを消す。
「？」からマウスが外れても、1秒以内にtooltipにマウスを合わせると、hide_popup() がcleartimeoutされて、停止。tooltipから外れると消えるという仕組みです。
あれこれ悩んだ割には、動作原理は上記のような単純なもので良かったのかと。

safariに拡張とか入れたよ。

開発環境 safari
  • 環境設定→詳細 から「開発メニューをオンにする」をチェック
  • SIMBL-0.9.7
  • greaseKit
  • リンククリックの時、もしくはtarget="_blank"の時に、新規ウインドウではなくタブで開く設定
defaults write com.apple.Safari TargetedClicksCreateTabs -bool true

まとめる手前の散文

doc mobile

mobileヘッダはどうすべきかという点。

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=Shift_JIS" />
   <meta http-equiv="Content-Style-Type"  content="text/css" />
   <meta name="description" content="携帯端末で読める数コマまんが集！息抜きにどうぞ！" />
   <title>もばこまっ！</title>
</head>
<body>

http://allabout.co.jp/internet/hpcreate/closeup/CU20090602A/index9.htm

macbookの移行時にやったこと。

osx 開発環境

各種ブラウザ,コミュニケーションツールのインストール

Firefox
Chrome
Opera
Skype
Adium

移行アシスタントを使ったアプリケーションの移動（主にadobe系）

移行アシスタント→アプリのみを選択し、Adobe系のアプリを新環境へ移行。
この時点で、先に入れたブラウザ系は軒並み上書きされた。orz
所要時間は無線LAN経由でのシンク。アプリだけで約２時間。firewireでやっときゃよかった。
っていうかUSB対応してないの？

フォントの移行

~/Library/Fonts/ 以下に旧macからの既存フォントをコピー

developer toolsのインストール

WebからDownloadも出来るが、どうせ新しい機種だし付属のDVDも最新だろうと思いDVDからインストール。
これを入れる理由は、xcodeと、subversionが入るから。subversionは英語版がインストールされたので、これはmacport経由で入れたほうが良かったかも。

秘密鍵の移行

~/user/.ssh/ 以下をコピーして新環境の同パスへ移行。

VMWare Fusion3のインストール

この機会にfusionを2→3へアップグレード。ついでにwindows7proも購入。
意味は特に無い。

VMWareに各種OSをインストール

windows7pro, windowsXPHome, ubuntu9.10 をインスコ。今回はBootCamp使いません。
サスペンドも出来て超便利。
あ、新macbookはUSキーなのだけど、これが正しく認識されない。
なのでwindowsは入れたあとに、設定を変えて上げる必要があります。以下を参考に設定を変更。
VMware FusionでUSキーボード http://web-conte.com/blue/200801/22_1313.php

MacPortsのインストール

.dmgパッケージをDownloadしてインストール。
/opt/loacl/bin/port にインストールされているので、.bash_profile に以下を記述しパスを通す

export PATH=/opt/local/bin:/opt/local/sbin/:$PATH
export MANPATH=/opt/local/man:$MANPATH

以下を参考
http://veadardiary.blog29.fc2.com/blog-entry-1151.html

三項演算子

javascript programing

【例1】

var a = x ? b : c;

は以下と等価

if(x) {
  var a = b;
} else {
  var a = c;
}

【例2】

var a = (x || y) ? b : c;
if(x || y) {var a = b;} else {var a = c;}

【例3】

var a = x ? b : ( i || j ) ? c : d;
if(x){
  var a = b;
} else {
  if( i || j ) {
     var a = c;
  } else {
     var a = d;
  }
}