为你的calendar_helper增加ajax功能

本文介绍如何在Rails应用中利用Ajax技术实现局部日历加载的功能。通过修改calendar_helper并结合Ajax.Updater组件,可以轻松地使日历响应上一月和下一月的链接,而无需刷新整个页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:前提
[url]http://nubyonrails.com[/url] 提供的calendar_helper 并不支持ajax,而在我们平常应用,经常需要这样的功能:仅仅加载局部的日历。

二:动手
其实很简单,就是通过Ajax.Updater来更新日历即可。
第一步:修改calendar_helper 第100行起的代码,为:
[code]
cal = %(<table class="#{options[:table_class]}" border="0" cellspacing="0" cellpadding="0">)
cal << %(<thead><tr>)
cal << %(<th colspan="2"><a href='javascript:previous_month(#{options[:year]},#{options[:month]})'>#{options[:previous_month_text]}<a></th>)
colspan=3


cal << %(<th colspan="#{colspan}" class="#{options[:month_name_class]}">#{Date::MONTHNAMES[options[:month]]}</th>)
cal << %(<th colspan="2"><a href='javascript:next_month(#{options[:year]},#{options[:month]})'>#{options[:next_month_text]}</a></th>)
[/code]


修改default_options 中这两个label
[code]
:previous_month_text =>'Previous',
:next_month_text => 'Next'
[/code]

第二步:
新增route
[code]
map.calendar '/calendar/:year/:month', :controller=>'calendar'
[/code]


第三步:
具体实现,仅仅为演示,你可以自己实现你的代码

在页面上增加日历
[code]
new Ajax.Updater('calendar', '/calendar/2008/03')
[/code]

新增Action
[code]
def calendar
now =Time.now
@year = params[:year]||now.year
@month = params[:month]||now.month
…..
@dates = @someresults.collect(&:some_date_field)
render :partial=>'calendar'
End
[/code]
新增页面_partial.html.erb

[code]
<%=
calendar(:year => @year, :month => @month) do |d|
if @dates.include?(d)
[d.mday, {:class => "specialDay", :onclick=>"go('/programs/#{d.to_s(:db)}')", :target=>'_blank'}]
else
[d.mday, {:class => "normalDay"}]
end
end
%>
[/code]

效果
[img]http://mmm.iteye.com/upload/picture/pic/9040/9c1b45b1-5d3e-36e7-8ec6-9bbb77f5a6b5.png[/img]

点击上一月,下一月,查看firebug的console,会看到发送不同的请求,日历部分的页面片段会同时改变。

Done。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值