`
bosschen
  • 浏览: 197215 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

display标签扩展:鼠标经过行变色功能[超级简单、通用]

 
阅读更多

/***********本人原创,欢迎转载,转载请保留本人信息*************/ 作者:wallimn 电邮:wallimn@sohu.com 时间:2009-09-24 博客:http://wallimn.iteye.com 网络硬盘:http://wallimn.ys168.com /***********文章发表请与本人联系,作者保留所有权利*************/   现在网页上的表格,当鼠标经过的行高亮显示是个很不错的功能。display标签是个很不错的标签,但是,不支持鼠标经过行变色功能,看了看displaytag的源码,它甚至没有给人留下直接可用的扩展接口。   当然,修改源码可以实现,但我一直认为如不是实在迫不得以,不要修改第三方插件源码,会给今后的升级带来问题。   今天看了看decorator(包装器?、修饰器?)的相关知识,只有有限几个可用的回调接口,反复看了几遍apidoc及源码。受SQL注入思想的启发,找到了一个很极为巧妙有创意的方法,通过自定义decorator来实现display标签生成的表格鼠标经过变色功能。   代码很简单,共两部分,全部贴在下面: 一、java代码 Java代码

package com.wallimn.gyz.util;

import org.displaytag.decorator.TableDecorator;

/**
 * 超级简单的实现displaytag标签表格行鼠标经过变色功能<br/>
 * 博客:http://wallimn.iteye.com,转载请保留此信息!!<br/>
 * 编码:wallimn 时间:2009-9-24 下午05:05:30<br/>
 * 版本:V1.0<br/>
 */
public class OverOutWrapper extends TableDecorator {
	public OverOutWrapper(){
		super();
	}
	@Override
	public String addRowId() {
		return "i_d\" onmouseover=\"if (typeof(window.m_over)=='function') window.m_over(this);\" onmouseout=\"if (typeof(window.m_out)=='function') window.m_out(this);\" title=\"博客:http://wallimn.iteye.com";
	}
}

 二、jsp测试代码 

Jsp代码
<script type="text/javascript">
	function m_over(tr){
		tr.className=tr.className + " " + "trmo";
	}
	function m_out(tr){
		var cn = tr.className.replace(/\s+trmo/,'');
		tr.className = cn;
	}
</script>
<style type="text/css">
	.trmo{
		background-color:#FFCCFF !important;
	}
</style>
<h3>隔壁老王(http://wallimn.iteye.com)</h3>
<display:table name="${items}" id="row" class="gyz dtt" decorator="com.wallimn.gyz.util.OverOutWrapper">
    <display:column property="dm" title="代码" style="width:60px" />
    <display:column property="mc" title="名称"/>
</display:table>
 
分享到:
评论

相关推荐

    displaytag分页和鼠标经过变色功能

    在上述例子中,我们看到了如何通过自定义装饰器 `OverOutWrapper` 实现鼠标经过表格行变色的功能。这个装饰器继承自Displaytag 提供的 `TableDecorator` 类,并重写了 `addRowId()` 方法。`addRowId()` 方法通常用于...

    鼠标滑过变色

    标题“鼠标滑过变色”通常指的是网页设计中的一种交互效果,当用户将鼠标光标悬停在某个元素上时,该元素的颜色或样式会发生变化。这种效果在导航菜单、按钮或其他可点击元素中非常常见,能提升用户体验,提供视觉...

    display标签使用

    下面是display标签的基本用法和常见功能实现。 一、改变空记录提示语言 在display:table标签中,可以使用_display:setProperty_标签来改变空记录提示语言。例如,要将默认的“没有满足查询条件的记录”修改为...

    SSHConformity【display标签和taglib标签】,display标签,pager-taglib标签

    在JSP中,taglib允许开发者定义自己的标签来扩展JSP的功能。SSHConformity可能包含了一些自定义的taglib,这些标签通常是为了满足项目特定需求而创建的。比如,项目可能会有一个`pager-taglib`,这个标签库专门用于...

    SSHConformity【display标签和taglib标签缺架包】,ssh整合,分页,display标签,pager-taglib标签

    在本主题中,我们将重点讨论SSH整合、分页功能以及Display Tag和Pager Taglib这两个常用的标签库。 首先,SSH(Spring、Struts和Hibernate)是Java Web开发中的三大核心技术。Spring提供了依赖注入和面向切面编程,...

    标签设置display:none后设置diplay=“”不显示1

    此外,还有一些其他值可以用于 `display` 属性,比如 `inline-block`,它结合了块级元素和内联元素的特点,允许元素在一行内排列,同时保持块级元素的宽高可调整性。还有 `flex` 和 `grid`,它们分别用于创建灵活的...

    页面产品鼠标经过局部放大功能

    在网页设计中,用户体验往往起到决定性的作用,而“页面产品鼠标经过局部放大功能”正是提升用户体验的一种常见技术。这个功能允许用户在浏览网页时,当鼠标悬停在某个产品图片上时,该图片的部分区域会自动放大,让...

    Web 的display标签分页使用说明

    本教程将详细讲解如何在项目中使用Display Tag实现分页功能。 首先,你需要在项目中引入Display Tag库。通常,这可以通过在`pom.xml`(如果你的项目基于Maven)或`build.gradle`(如果是Gradle项目)文件中添加依赖...

    OpenGL扩展包实现接收鼠标滚轮输入功能

    本文将深入探讨如何使用OpenGL扩展包来实现接收鼠标滚轮输入的功能。 首先,OpenGL本身并不直接支持鼠标事件处理,它主要关注图形渲染。为了处理用户输入,通常会结合使用辅助库,如GLUT(OpenGL Utility Toolkit)...

    Splashtop Wired XDisplay

    《Splashtop Wired XDisplay:利用移动设备扩展桌面显示》 在当今的多任务处理时代,一个显示器往往无法满足我们的工作需求。为此,Splashtop Wired XDisplay提供了一个创新的解决方案,允许用户将手机或平板电脑...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function ...}但是如果这个元素是隐藏(display:none)的,尺寸又是未知自适应的,哪有上面的方法就不行了!因为display:none的元素是没有物理

    js鼠标滑过标签选项卡切换代码.zip

    【标题】"js鼠标滑过标签选项卡切换...总的来说,这个"js鼠标滑过标签选项卡切换代码"是JavaScript与网页设计结合的一个实用示例,它体现了动态网页的交互性和可扩展性,是现代网页开发中常见的一种用户体验增强手段。

    jquery鼠标悬停 图片预览功能的效果下载

    在本文中,我们将深入探讨如何使用jQuery库来实现一个鼠标悬停时的图片预览功能。这个功能在网站设计中非常常见,它为用户提供了一种便捷的方式来预览图像,而无需点击进入新页面或者加载全尺寸图片。我们将讨论实现...

    鼠标点击变色,弹出div,禁用页面

    在网页开发中,我们经常需要实现一些交互效果来提升用户体验,比如鼠标点击元素时变色、弹出div层以及禁用页面的其他交互。这里我们将深入探讨这些功能的实现方式。 1. 鼠标点击变色: 当用户点击某个元素时,我们...

    JSP标签display tag实例

    这些标签不仅能够处理简单的数据展示,还能处理复杂的排序、分页和导出功能。 ### 2. `&lt;display:table&gt;`标签 `&lt;display:table&gt;`是Display Tag的核心标签,用于将Java集合或数据库查询结果渲染成HTML表格。它可以...

    js菜单 鼠标经过折叠/滑动菜单

    在JavaScript的世界里,创建动态和交互式的用户界面是常见的需求,而“js菜单 鼠标经过折叠/滑动菜单”就是这样的一个功能。这种菜单设计可以极大地提升网站的用户体验,因为它允许用户通过简单地将鼠标悬停在菜单项...

    Jquery+div/css 鼠标经过内容切换实例

    本实例重点讲解如何利用 jQuery 和 CSS 技术实现在鼠标经过(hover)某个div元素时,动态切换显示的内容。下面我们将深入探讨这个主题。 首先,我们来理解 `div` 和 `CSS` 的基本概念。`div` 是HTML中的一个通用...

    117个图片css3鼠标经过效果

    在本主题“117个图片css3鼠标经过效果”中,我们将探讨CSS3如何实现图片在鼠标悬停时的动态变换,以及这些效果可能带来的用户体验提升。 1. 鼠标悬停伪类选择器:`:hover` CSS3中的`:hover`伪类选择器允许我们在...

    纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

    在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...

    JS鼠标经过图片文字变化特效.zip

    在JavaScript的世界里,实现鼠标经过图片时文字变化的特效是一种常见的交互设计,它可以提升网站的用户体验,增加用户与页面的互动性。这个"JS鼠标经过图片文字变化特效.zip"文件很可能是包含了一组代码示例或者一个...

Global site tag (gtag.js) - Google Analytics