（转）让HelpBalloons飘在你的GSP上空

最新推荐文章于 2025-08-21 10:02:47 发布

原创最新推荐文章于 2025-08-21 10:02:47 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Grails #prototype #.net #工作

Grails 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种简单实用的Gails插件——HelpBalloon，用于网页开发中提示信息的显示。通过安装插件并在GSP中加入特定标签，可以轻松地在页面上添加帮助气球。此外，还提供了自定义图标、消息管理和动态内容显示等功能。

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

原贴地址：http://www.groovyq.net/node/124

在进行网页开发的时候，常常需要显示提示或者帮助信息，实现方法有很多种。这里介绍一种简单易用的Gails插件--HelpBalloon。可以把这个可爱的气球放在GSP的任何地方。

要使用HelpBalloon，请先做好如下两项准备工作：

安装HelpBalloon插件，执行：grails install-plugin help-balloons ；
在需要使用HelpBalloon的GSP的<head>中添加<g:helpBalloons />，它会将Prototype的JS库以及HelpBalloon相关的JS库引入到GSP中，如果你的Prototype的JS库不是在缺省位置，可以使用这个标签的base属性来指定JS库的位置，比如：<g:helpBalloons base="/myApp/myDir/" />；
下面就开始HelpBalloon之旅了！

在GSP中写入：


<g:each var="c" in="${grailsApplication.controllerClasses}">
      <li class="controller">
	  <g:link controller="${c.logicalPropertyName}">
	     ${c.fullName}
	  </g:link>
	  <g:helpBalloon title="my Help"
	    content="How to display a help balloon in GSP? "/>
      </li>
</g:each>

下图是上述代码的效果图：

上图中显示的图标都是HelpBalloon的缺省值，如果需要使用自定义的图标，可以设置<head>中的<g:helpBalloons />标签的icon、button、balloonPrefix属性，比如：


	<g:helpBalloons
		 icon="${resource(dir:'images',file:'balloon-icon1.gif')}"
 		 button="${resource(dir:'images',file:'myButton.png')}" 
 		 balloonPrefix="${resource(dir:'images')}/balloon-" />

如下是使用自定义图标的效果图:

HelpBalloon要显示的信息也可以由message文件进行统一管理，比如message.properties文件中：“codename.suffixname= help content!!”，就可以使用HelpBalloon的code、suffix属性来显示，如下：

<g:helpBalloon title="关于书籍的说明" code="codename" suffix=".suffixname"/>
读者需要注意，suffix为可选内容，缺省值为“.help”，如果代码中没有设置suffix，HelpBalloon将message文件中codename.help的内容显示出来

效果图如下：

对于HelpBalloon中的内容，可以类似上述示例中的用法，也可以从对象中获取到，请看如下代码：

	<g:helpBalloon 
		 title="Book Info"
		 content="${bookInstance.moreInfo()}"/>

上述代码的意思是，可以通过book的moreInfo()方法将更多的book信息显示在HelpBalloon中，如下是book的代码：


	class Book {
	  String name
	  String descript
	  String author="Magnolia"
	  Date dateCreated=new Date()
	  int pages=100
	  String isbn="ISBN 2010-03-06"
	  String shortname

	  String moreInfo(){
		"""$name <br/>
		<img src='/GrailsUI/images/${shortname}.jpg'/><br>
		  by $author /pg: $pages /ISBN: $isbn <br/>
		  published in $dateCreated<br/>
		"""
	  }
	}