`

Rich:message 用tooltip显示

阅读更多

因为用到了extjs查找dom节点的方法,所以包含一下连个脚步文件:

 

 <script src="#{seamRequest}/resources/ext/ext/ext-base.js"
   type="text/javascript"></script>
  <script src="#{seamRequest}/resources/ext/ext/ext-all-debug.js"
   type="text/javascript"></script>

 

 

message标签页面:

 

<style>
.messageLabel { 
 display:none;
}
</style>
</head>
 <script>
  
  function showValidationMessage(id1,id2){
//debugger;
 var node1=Ext.DomQuery.selectNode('[id*="'+id1+'"]');
 
 var node2=Ext.DomQuery.selectNode('[id*="'+id2+'"]',node1);
 var node3=Ext.DomQuery.selectNode('[class*="rich-message-label"]',node1);
 node2.innerHTML=node3.innerHTML;
};
  </script>

 

 

<c:if test="${displayType=='topright'}">
  <rich:message for="#{for}" tooltip="true"  errorLabelClass="messageLabel" showDetail="true" showSummary="false" style="width:100px;" id="#{for}_richmessage" >
  <f:facet name="errorMarker">
   <a4j:outputPanel id="#{for}_errorMessage">
    <h:graphicImage id="#{for}_richmessage3" value="/images/error.gif" />
    <rich:toolTip id="#{for}_richmessage2" direction="top-right" showDelay="300" style="width:200px" onshow="showValidationMessage('#{for}_richmessage','#{for}_richmessage1')"
     styleClass="tooltip" layout="block">
     <h:outputText id="#{for}_richmessage1" value="" />
    </rich:toolTip>
   </a4j:outputPanel>
  </f:facet>
 </rich:message>
 </c:if>


 <c:if test="${displayType=='right'}">
  <rich:message for="#{for}">
   <f:facet name="errorMarker">
    <h:graphicImage value="/images/error.gif" />
   </f:facet>
  </rich:message>
 </c:if>

 <c:if test="${displayType=='above'}">
  <rich:messages passedLabel="Data is allowed to be stored."
   layout="list">
   <f:facet name="header">
    <h:outputText value="Entered Data Status:"></h:outputText>
   </f:facet>
   <f:facet name="passedMarker">
    <h:graphicImage value="/images/passed.gif" />
   </f:facet>
   <f:facet name="errorMarker">
    <h:graphicImage value="/images/error.gif" />
   </f:facet>
  </rich:messages>
 </c:if>

分享到:
评论

相关推荐

    带有图像的ToolTip显示功能

    "带有图像的ToolTip显示功能"是一个增强UI交互性的技术,它允许在鼠标悬停时显示不仅包含文本,还包含图像的提示信息。这样的功能在很多应用场景下都非常有用,比如在帮助用户理解复杂图标或按钮的含义时,或者在...

    MFC Tooltip 显示坐标

    在本案例中,“MFC Tooltip 显示坐标”是一个简单的应用程序,它在一个单文档界面(SDI)应用中实现了Tooltip功能,当鼠标在窗口上移动时,会显示鼠标的当前位置坐标。这个功能通常用于帮助用户理解屏幕上的各个元素...

    一个Vue2x的tooltip提示信息组件

    在Vue2.x版本中,开发者可以创建各种自定义组件来满足项目需求,其中包括用于显示提示信息的tooltip组件。"一个Vue2x的tooltip提示信息组件"就是这样一个专门用于在用户与界面交互时提供额外信息的组件。 该组件的...

    toolTip多行显示示例

    标题“toolTip多行显示示例”和描述指出,我们将探讨如何扩展`CToolTipCtrl`的功能,使其能够显示多行提示信息,而不是默认的一行。这在需要提供更详细信息或避免信息被截断时非常有用。 首先,`CToolTipCtrl`是MFC...

    flash 的几个tooltip显示

    - AS2(ActionScript 2.0):使用`createObject()`函数创建一个Tooltip对象,然后设置其`text`属性来显示内容。 - AS3(ActionScript 3.0):引入`flash.ui.ToolTip`类,创建一个Tooltip实例并用`new ToolTip()`...

    锁定界面和使用ToolTip创建提示

    "锁定界面和使用ToolTip创建提示"这一主题涉及到两个关键概念:界面锁定以及ToolTip的使用。在本文中,我们将深入探讨这两个方面,尤其是对于C#开发者来说,如何在项目中实现这些功能。 首先,让我们了解一下界面...

    C#中datagridview使用tooltip控件显示单元格内容的方法

    总结来说,C#中使用`DataGridView`和`Tooltip`控件显示单元格内容的方法涉及以下关键步骤: 1. 初始化`DataGridView`和`Tooltip`控件。 2. 绑定数据源到`DataGridView`。 3. 监听`CellMouseEnter`和`CellMouseLeave`...

    MFC示例:ToolTip的使用.rar

    - 接下来,使用`CToolTipCtrl::AddTool`方法为每个需要显示ToolTip的控件添加一个工具条目。此方法需要提供控件句柄和要显示的提示文本。 4. **关联和激活ToolTip**: - 为了使ToolTip与你的MFC视图或对话框关联...

    表格单元格自定义ToolTip组件

    2. 配置显示内容:根据需求,可以将内容动态生成,也可以预先设定,如使用数据绑定将单元格数据与ToolTip内容关联。 3. 设计样式:通过CSS或MXML定制外观,包括颜色、字体、大小、边框、背景等。 4. 控制行为:调整...

    Jquery ToolTip插件

    jQuery ToolTip插件是一种在网页交互中常用的辅助功能,它能为页面元素提供额外的信息提示。...在实际开发中,jQuery ToolTip插件与其他jQuery插件结合使用,可以构建出更加丰富的交互式网页应用。

    c# ToolTip 几十种效果 集合了各种ToolTip 效果 很难得哦 源码

    【标题】中的“c# ToolTip 几十种效果”是指使用C#编程语言实现的ToolTip控件的各种显示效果集合。ToolTip控件是Windows Forms或WPF应用中常见的一种组件,它通常用于在鼠标悬停在某个控件上时显示额外的信息。这个...

    带有tooltip的ClistCtrl类

    当鼠标进入列表项范围时,发送WM_MOUSEHOVER消息,此时可以使用`CToolTipCtrl::Activate(TRUE)`显示tooltip;当鼠标离开时,发送WM_MOUSELEAVE消息,用`CToolTipCtrl::Activate(FALSE)`隐藏tooltip。 6. **定位...

    tooltip:绑定Tooltip和其触发节点事件,并根据屏幕空间计算显示位置

    2. **JavaScript实现**:使用JavaScript可以方便地创建动态和交互式的Tooltip,通过监听DOM事件和计算元素位置来控制Tooltip的显示。 3. **beforeShow回调**:这个Tooltip库的版本1.1新增了`beforeShow`回调,允许...

    jQuery plugin: Tooltip(转)

    1. **事件绑定**:使用jQuery的`.hover()`方法,我们可以监听鼠标进入(`mouseenter`)和离开(`mouseleave`)事件,分别用于显示和隐藏Tooltip。 2. **内容生成**:Tooltip的内容可以是从元素的`title`属性获取,...

    chart游标跟随并悬停显示ToolTip

    在数据分析和可视化领域,图表(Chart)是一种常用的...综上所述,"chart游标跟随并悬停显示ToolTip"是提高图表交互性和数据洞察力的重要手段,通过合理的实现和优化,可以极大地提升用户的使用体验和数据分析效率。

    WPFTextBoxShow,TextBox内容缩略显示,Tooltip显示正常数据

    简单的TextBox显示加输入,如果输入的字符过长,则截取一部分显示,而Tooltip显示输入的全部数据,例如:在TextBox输入123456789,鼠标LostFocus则显示12345....且tooltip显示123456789,而GetFocus时TextBox还是...

    WXA-ToolTip-微信小程序-ToolTip信息提示组件.zip

    微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加: src="../ToolTip/toolTip.wxml"/&gt; &lt;!-- 引入toolTip模板 --&gt;  is=...

    很酷的tooltip信息显示控件源码

    4. **源码分析**:通过查看源码,我们可以学习到如何用特定编程语言实现自定义tooltip,包括事件监听、动态内容渲染、动画效果的添加等。 5. **响应式设计**:酷炫的tooltip可能还考虑了不同屏幕尺寸和设备的适配,...

    VC中动态显示提示信息(ToolTip的使用)

    本文将详细介绍如何在VC++中使用`CToolTipCtrl`类来创建和管理动态提示窗口,以及如何将其应用于显示鼠标坐标。 `CToolTipCtrl`是MFC(Microsoft Foundation Classes)库中提供的一个类,它实现了Windows的提示窗口...

    ets tooltip截图显示气温变化折线图代码

    【标题】"ets tooltip截图显示气温变化折线图代码"涉及的是一个利用ETS(Enhanced Tooltip)技术来呈现气温变化的动态折线图,并且具备截图功能。ETS工具提示是一种增强版的提示框,通常用于在鼠标悬停时提供更丰富的...

Global site tag (gtag.js) - Google Analytics