WEB开发网
开发学院软件开发Java 使用 Grails 与 jQuery 创建 Web Calendar 阅读

使用 Grails 与 jQuery 创建 Web Calendar

 2010-06-23 00:00:00 来源:WEB开发网   
核心提示: 安装 FullCalendar 和 qTip 插件,下载 FullCalendar 的 zip 文件(见参考资源),使用 Grails 与 jQuery 创建 Web Calendar(7),并解压,下载 qTip 插件 ( 见参考资料 ),$(document).ready() 方法所定义的

安装 FullCalendar 和 qTip 插件。

下载 FullCalendar 的 zip 文件(见参考资源),并解压。

下载 qTip 插件 ( 见参考资料 ),并解压。

把解压所得 js 文件拷贝到 web-app\js\jquery 目录。

将 css 文件拷贝到 web-app\css 目录。

因为 Grails 采用 siteMesh( 见参考资源 ) 作为页面底层布局框架,所以可以通过修改项目的 MyCalendar\grails-app\views\layouts\main.gsp 文件将 jQuery 引用到各个页面中。因为本示例程序只在 listAsCalendar.gsp 页面使用 jQuery 及其插件,所以只需在该页面引用 jQuery 及相关资源。编辑 listAsCalendar.gsp,添加对该页面使用的 js 和 css 资源的引用。如清单 4 所示:

清单 4. 添加对 js、css 资源引用

 <head> 
  . . . 
  <g:javascript src="jquery/jquery-1.3.2.min.js" /> 
  <g:javascript src="jquery/fullcalendar.min.js" /> 
 <g:javascript src="jquery/jquery.ui.core.js" /> 
  <g:javascript src="jquery/jquery.ui.draggable.js" /> 
  <g:javascript src="jquery/qtip-1.0.0-rc3.min.js" /> 
  <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'fullcalendar.css')}" /> 
  . . . 
 </head> 

使用 FullCalendar 生成日历界面

在 jQuery 框架中,$(document).ready() 方法所定义的 function 将会在整个页面被浏览器读取完毕时调用。初始化 FullCalendar 对象的工作可以在该方法中定义。初始化 FullCalendar 将调用 $('#calendar').fullCalendar({…})函数。

上一页  2 3 4 5 6 7 8 9 10  下一页

Tags:使用 Grails jQuery

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接