徒然なるままに、日ぐらしP/Cに向ひて――
メインメニュー
ブログカレンダー
2013年 3月
« 2月   4月 »
 12
3456789
10111213141516
17181920212223
24252627282930
31  
WordPress カテゴリ一覧
WordPress 検索


富士カメラ5

Kestrel とは、チョウゲンボウのことです。ハトくらいの小さな猛禽類、つまりワシの仲間で、ハヤブサに似ています。
チョウゲンボウにはホバリングという特技があります。よく農地の上空で空中に停止している姿が見られます。小さいけれどカッコイイ、そして最近は都会でも繁殖している頼もしいタカです。
このサイトのURLは、そんなチョウゲンボウから名前を借りました。

2013年3月5日(火曜日)

Rails3 でajax、マウスの動きを検知する

カテゴリー: - flyman @ 22時08分12秒
お茶の水駅
東京駅

前回は ”:remote => true” を付けるだけでajaxなアプリになったよ、って話だった。
でも、やりたいことはソレじゃない。
ということで、前回のtest01プロジェクトを書き換える。

app/views/welcome/index.html.erb の内容を消去し、以下に入れ替える。

<%= text_field_tag :field1, :id => “field1″ %><BR/>
<%= text_field_tag :field2, :id => “field2″ %><BR/>
<div id="hint”></div>

入力項目2個と、ajaxで書き換えるエリア “hint” を指定している。

app/assets/javascripts/application.js に以下を追記する。

$(document).ready(function(){
 $("#field1″).mouseover(function(){
  $(’#hint’).html("Field1のバルーンヘルプ")
 });
 $("#field1″).mouseout(function(){
  $(’#hint’).html("")
 });
 $("#field2″).mouseover(function(){
  $(’#hint’).html("Field2のバルーンヘルプ")
 });
 $("#field2″).mouseout(function(){
  $(’#hint’).html("")
 });
});

“field1″ の mouseover 時に、"hint” エリアに文言を表示
“field1″ の mouseout 時に、"hint” エリアを消す
“field2″ の mouseover 時に、"hint” エリアに文言を表示
“field2″ の mouseout 時に、"hint” エリアを消す
という処理をしている。これで、view側の text_field_tag にマウスが乗ったかどうかを監視してくれる。

app/views/welcome/index.js.erb は不要だ。welcome/index アクションの中身も不要。

$(document).ready は、view画面表示が完了してからjavascriptを有効にするおまじないらしい。Javascriptをhtml内に書いているときには意味があるが、今回はファイルを分離しているので不要かも知れない。

入力欄にマウスを乗せると、ヒントが表示される。Windowsアプリでよくやる、バルーンヘルプ的な。

でも、本当にやりたいのはコレでもないんだよなぁ。
やっぱり、ajaxもjavascriptもさ?っぱり分からない。Rails3.2 + jQuery とかの解説書、ないかなぁ。


TrackBacks

このコメントのRSS

TrackBack URL : http://www.kestrel.jp/modules/wordpress/wp-trackback.php/887

この投稿には、まだコメントが付いていません

コメント

_CM_NOTICE

20 queries. 0.017 sec.
Powered by WordPress Module based on WordPress ME & WordPress

ヘッドライン
nikkansports
IT Pro
レスポンス
テーマ選択

(4 テーマ)