「jQuery」タグアーカイブ

jQuery.validationEngine で、ポップアップの位置を変更する方法をまとめました。

続きを読む →

この記事を見た人は次の記事も見ています

コード

javascript でテーブルをソートする方法

2014年02月22日 Kenji

javascript を使ってテーブルをソートすることになった。ドットインストールを見ると複数項目でソートする方法まで載っている・・・が、これを一般化してどんなテーブルでもソートできるようにするにはどうするか考えてみた。公開されているライブラリもあるんですけどね。

続きを読む →

この記事を見た人は次の記事も見ています

コード

ツールチップを表示するコード

2014年02月22日 Kenji

Ruby On Rails のシステムの中でツールチップを表示しようと思ったときのメモです。

やることは単純で、クリックされたらヘルプを表示して、もう一度クリックされたらヘルプを隠すというものです。はてなマークがクリックされたらツールチップを表示・非表示するということです。

実装は javascript (jQuery) と CSS で行いました。そして Rails の helper に便利メソッドを作りました。以下がそのコード。

環境

Ruby 1.8.7p374
Rails 3.0.1
jQuery 1.4.3

基本

.help-tooltip {
max-width: 600px;
background-color: #fff;
display: none;
z-index: 10;
font-size: 12px;
position: static;
border: solid 1px black;
padding: 2px;
}

.help-tooltip {

max-width: 600px;

background-color: #fff;

display: none;

z-index: 10;

font-size: 12px;

position: static;

border: solid 1px black;

padding: 2px;

}

$('.help-tooltip-trigger').live(
'click',
function () {
$(this).next().slideToggle('fast');
}
);

$('.help-tooltip-trigger').live(

'click',

function () {

$(this).next().slideToggle('fast');

}

);

上のように javascript と css を記述して、次のように HTML を書きます。

<span class="help-tooltip-trigger">
<img src="image/quotation.png" style="width:16px;height:16px;" />
</span>
<div class="help-tooltip">
<p>ヘルプメッセージ</p>
</div>

</span>

<p>ヘルプメッセージ</p>

</div>

image/quotation.png はクリックするモノです。その画像をクリックすると表示・非表示が切り替えます。

正確にいうなら、画像を囲んでいる span をクリックすると、その直後のタグの表示・非表示を切り替えます。つまりクリックするものは画像でなくてもよく、もっというならツールチップ以外にも使えるということです。

helper の活用

Rails には helper というものがあるので活用してみます。

def help_tooltip(message, size = '16x16')
result = content_tag(:span, {:class => 'help-tooltip-trigger'}) do
image_tag 'icons/question.png', :size => size
end
result += content_tag(:div, {:class => 'help-tooltip'}) do
raw message
end
return result
end

def help_tooltip(message, size = '16x16')

result = content_tag(:span, {:class => 'help-tooltip-trigger'}) do

image_tag 'icons/question.png', :size => size

end

result += content_tag(:div, {:class => 'help-tooltip'}) do

raw message

end

return result

end

このメソッドを次のようにして使うと、上に書いた HTML のように出力されます。

<%=help_tooltip '<p>ヘルプメッセージ</p>', '16x16'%>

1	<%=help_tooltip '<p>ヘルプメッセージ</p>', '16x16'%>

2番目の引数はデフォルト値を設定しており、引数がなくてもいいようにしています。

私がこの tooltip 表示を書き始めたらほかの人が随所で真似し始めたので、もっと楽にできる helper のメソッドを作ったというお話でした。

The Life

「jQuery」タグアーカイブ

jQuery.validationEngine: ポップアップの位置を変更する方法

この記事を見た人は次の記事も見ています

javascript でテーブルをソートする方法

この記事を見た人は次の記事も見ています

ツールチップを表示するコード

環境

基本

helper の活用

この記事を見た人は次の記事も見ています

A Life Summary of an Gypsy