注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Grails 与 YUI的集成  

2010-09-21 17:43:38|  分类: Groovy |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Grails 有很好的插件机制
所以我们就有了YUI Plugin

http://www.grails.org/YUI+Plugin

很简单 在自己的工程目录下 运行 grails install-plugin yui
目前的版本是 yui2.7.0
grails会自动帮你下载yui_2.7.0.zip包,并帮你安装

引入YUI库
<g:javascript library="yui" />
引入CSS文件或JS文件
<yui:javascript dir="calendar" file="calendar-min.js" /> <yui:javascript dir="calendar" file="calendar-min.js" version="2.6.0" />  // version to be used in case multiple version installed <yui:stylesheet dir="calendar/assets" file="calendar.css" />


容易遇到的问题
下载不成功的话
可以手动在http://sourceforge.net/projects/yui/files/下载
我因为下的是2.6版本 所以把名字改为2.7 放在download目录下

再次运行 grails install-plugin yui 如图
  Grails 与 YUI的集成 - zhenghaoju700 - zhenghaoju700 的博客


在你的工程下你会发现web-app/js/yui 这个目录

写了一例子
Code如下
<%@ page import="trip.Trip" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<title>YUI Test</title>
<yui:javascript dir="yahoo-dom-event" file="yahoo-dom-event.js" />
<yui:stylesheet dir="fonts" file="fonts-min.css" />
</head>
<body <style type="text/css">
#foo {width:10px; height:10px;background-color:#00f;}
</style>

<div id="foo"></div>

<script type="text/javascript">
(function() {
var move = function(e) {
YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
};

YAHOO.util.Event.on(document, "click", move);

})();

</script>

</body>
</html>

可以运行

再追加一个calendar的例子
Code 如下
<%@ page import="trip.Trip" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<title>YUI Datatable Test</title>
<yui:javascript dir="yahoo-dom-event" file="yahoo-dom-event.js" />
<yui:javascript dir="calendar" file="calendar-min.js" />
<yui:stylesheet dir="fonts" file="fonts-min.css" />
<yui:stylesheet dir="calendar/assets" file="calendar.css" />
</head>
<body <div id="cal1Container"></div>

<script type="text/javascript">
(function(){
cal1=new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT: true } );
cal1.render();
})();
</script>
</body>
</html>


如图
  Grails 与 YUI的集成 - zhenghaoju700 - zhenghaoju700 的博客

发现CSS样式没有起作用 如果去掉Sitemesh 就好了
  评论这张
 
阅读(229)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017