`
xxj
  • 浏览: 431992 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

为你的calendar_helper增加ajax功能

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

二:动手
其实很简单,就是通过Ajax.Updater来更新日历即可。
第一步:修改calendar_helper 第100行起的代码,为:
        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>) 



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


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



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

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


新增Action
    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

新增页面_partial.html.erb

<%=
    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
%>


效果


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

Done。
分享到:
评论

相关推荐

    ASP.net Ajax开发

    ASP.NET AJAX(Asynchronous JavaScript and XML)是一种微软提供的技术,用于构建高度交互性和响应迅速的Web应用...通过不断实践和探索,你将能够充分利用ASP.NET AJAX所提供的强大功能,为你的项目带来更多的可能性。

    很不错日期控件 asp.net

    1. **Calendar控件**:Calendar控件是最基础的日期选择方式,它以月为单位显示日期,并允许用户通过点击选择日期。你可以自定义其样式和行为,例如更改字体、颜色或者添加事件处理程序。 2. **TextBox与客户端脚本*...

    asp.net日期控件,简单好用

    总的来说,ASP.NET 的日期控件为开发者提供了便利,使得处理日期输入变得简单而直观。通过灵活的配置和自定义,可以满足各种项目的界面和功能需求。提供的实例代码和压缩包中的资源,可以帮助初学者快速理解和应用...

    ZendFramework中文文档

    另外的功能 7.8.4.3.6. AjaxContext 函数 7.8.4.4. FlashMessenger 7.8.4.4.1. 简介 7.8.4.4.2. Basic Usage Example 7.8.4.5. JSON 7.8.4.6. 转向器(Redirector) 7.8.4.6.1. 介绍 7.8.4.6.2. 基础用例 ...

    asp.net c#时间控件

    在ASP.NET中,常见的时间控件有ASP.NET AJAX Control Toolkit中的Calendar控件,ASP.NET MVC中的HtmlHelper Extensions中的日期选择器,以及第三方库如DevExpress、Telerik等提供的高级时间控件。这些控件通常支持...

    ASP.NET3.5从入门到精通

    17.4.6 ASP.NET MVC 控件辅助工具(Helper) 17.4.7 ASP.NET MVC 表单传值 17.5 小结 第 18 章 WCF 开发基础 20 第一篇 窗口与界面编程 18.1 了解WCF 18.1.1 什么是WCF 18.1.2 为什么需要WCF 18.2 WCF 基础 18.2.1 ...

    ASP.NET 3.5 开发大全11-15

    目录 第一篇 .NET基础 第1章 认识ASP.NET 3.5 1.1 什么是ASP.NET 1.1.1 .NET历史与展望 1.1.2 ASP.NET与ASP ...17.4.6 ASP.NET MVC控件辅助工具(Helper) 17.4.7 ASP.NET MVC表单传值 17.5 小结 第18章 ...

    ASP.NET 3.5 开发大全

    目录 第一篇 .NET基础 第1章 认识ASP.NET 3.5 1.1 什么是ASP.NET 1.1.1 .NET历史与展望 1.1.2 ASP.NET与ASP ...17.4.6 ASP.NET MVC控件辅助工具(Helper) 17.4.7 ASP.NET MVC表单传值 17.5 小结 第18章 ...

    ASP.NET 3.5 开发大全1-5

    目录 第一篇 .NET基础 第1章 认识ASP.NET 3.5 1.1 什么是ASP.NET 1.1.1 .NET历史与展望 1.1.2 ASP.NET与ASP ...17.4.6 ASP.NET MVC控件辅助工具(Helper) 17.4.7 ASP.NET MVC表单传值 17.5 小结 第18章 ...

    ASPNET35开发大全第一章

    5.10 日历控件(Calendar) 5.10.1 日历控件的样式 5.10.2 日历控件的事件 5.11 广告控件(AdRotator) 5.12 文件上传控件(FileUpload) 5.13 视图控件(MultiView和View) 5.14 表控件(Table) 5.15 向导控件...

    ASP.NET 3.5 开发大全word课件

    5.10 日历控件(Calendar) 5.10.1 日历控件的样式 5.10.2 日历控件的事件 5.11 广告控件(AdRotator) 5.12 文件上传控件(FileUpload) 5.13 视图控件(MultiView和View) 5.14 表控件(Table) 5.15 向导控件...

    实用建站时间控件js

    在ASP.NET中,服务器端的时间控件如ASP.NET AJAX Calendar或ASP.NET MVC的HtmlHelper扩展方法可以与客户端的JavaScript时间控件结合使用,实现数据的双向绑定,使得用户在前端的选择能即时反馈到后端。 至于压缩包...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。  ...

    ASP.NET4高级程序设计(第4版) 3/3

    此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。  ...

Global site tag (gtag.js) - Google Analytics