Ajax Tooltipでスマートにポップアップさせる - Rails

Posted by kyosuke at 07/18 2007
>>次の記事: mod_fcgidにおけるアクセス向上とSSLのエラー対処



スマートなポップアップのデモ
http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html

そのスクリプトのダウンロード先
http://www.dhtmlgoodies.com/index.html?whichScript=ajax-tooltip

そして、そのスクリプトを少しだけ改変してRuby on Railsに合うように使用しました。
http://give-n-take.net/gat/category/list

商品画像にマウスのカーソルが合わさると
その商品のサマリーをポップアップ、カーソルが離れると、ポップアップが自動的に閉じます。




スクリプトをダウンロードして、ファイルを設置、そして

ヘッダーに下記を追加
<%= javascript_include_tag 'tooltip/ajax' %>
<%= javascript_include_tag 'tooltip/ajax-dynamic-content' %>
<%= javascript_include_tag 'tooltip/ajax-tooltip' %>
<%= stylesheet_link_tag 'ajax-tooltip' %>


ビューにポップアップ用のファイルを用意する
show_popup.rhtml
ここに、ポップアップする情報を記述する

コントローラーはこんな感じ
def show_popup
@item = Item.find(params[:id])
render_without_layout
end



categoryコントローラのlistアクションのビューに
<%= popup_with_image(item) %>
みたいなのを追加


で、application_helperに、

def popup_with_image(item)
url = url_for(:action=>'show', :id=>item.id, :controller=>'item')
url_popup = url_for(:action=>'show_popup', :id=>item.id, :controller=>'item')
ret = '<a href="'
ret += url
ret += '" onMouseover="ajax_showTooltip(\''
ret += url_popup
ret += '\',this);return false" onMouseout="ajax_hideTooltip()" >'
ret += image_tag(item.amazon.image, :border=>0, :alt=>'', :title=>'')
ret += '</a>'
end

を追加。。ちょっと不細工だけど気にしない!



このままじゃ、
常にポップアップが右側にいってしまい、
右側にある画像のポップアップがフレームアウトしてしまうので、ajax-tooltip.jsを少し書き換える

function ajax_positionTooltip(inputObj)に、

if(leftPos >= 640){
ajax_tooltipObj.style.left = leftPos-400 + 'px';
} else{
ajax_tooltipObj.style.left = leftPos+20 + 'px';
}
ajax_tooltipObj.style.top = topPos-50 + 'px';

と書き換える。 数字は好みで変える。


ajax-tooltip.cssを少し書き換える

ポップアップの矢印が出てくるのは都合が悪いので、
#ajax_tooltipObj .ajax_tooltip_arrow{ /* Left div for the small arrow */
}
で空にしてしまう。

#ajax_tooltipObj .ajax_tooltip_contentでポップアップの大きさを変更する
width:280px; /* Width of tooltip content */
height:220px; /* Height of tooltip content */
自分の好きな大きさにする

body,html{
....
}
はいらないから削除。


以上でーす。


>>次の記事: mod_fcgidにおけるアクセス向上とSSLのエラー対処





Railsのモノ作り記事

No_image
mod_fcgidにおけるアクセス向上とSSLのエラー対処
mod_fcgidはかなりの曲者。 通常にインストールしている場合(mod_fcgidのバージョンが1.08以下)、 SSLでエントリー等を更新するとRailsでエラーが発生する場合がある。 ...
続きを読む>>mod_fcgidにおけるアクセス向上とSSLのエラー対処
Posted by kyosuke at 07/18 2007

No_image
Ajax Tooltipでスマートにポップアップさせる
現在のページです
Posted by kyosuke at 07/18 2007