当前位置: 首页 > web >正文

Easyui悬停组件

文章目录

      • 一、EasyUI 官方悬停解决方案:Tooltip 组件
        • 1. 基础用法
        • 2. 高级配置项
      • 二、进阶场景:Datagrid 表格悬停扩展
        • 1. 监听行事件
        • 2. 第三方扩展包(流云大神版)
      • 三、自定义悬停样式
      • 四、常见问题解决

在EasyUI中,没有直接命名为“悬停组件”的独立控件,但可通过其核心组件(如tooltip)或扩展功能实现悬停效果。以下是具体实现方式及示例:

一、EasyUI 官方悬停解决方案:Tooltip 组件

核心功能:在鼠标悬停时显示自定义提示信息,支持纯文本、HTML内容及样式定制。

1. 基础用法
  • HTML标记创建
    <a href="#" title="基础提示信息" class="easyui-tooltip">悬停查看提示</a>
    
  • JavaScript初始化(灵活配置):
    $('#element').tooltip({position: 'right', // 提示框位置:left/right/top/bottomcontent: '<strong>HTML内容</strong>', // 支持HTMLtrackMouse: true,  // 提示框跟随鼠标移动showDelay: 500,    // 显示延迟(毫秒)onShow: function(){ $(this).tooltip('tip').css('background', '#ffeb3b'); // 自定义样式}
    });
    
2. 高级配置项
属性/事件说明
deltaX/deltaY微调提示框位置(像素)
onUpdate内容更新时触发,可用于动态加载数据
onPosition位置变化时触发,返回当前坐标
showEvent触发显示的事件(默认mouseenter,可改为click

二、进阶场景:Datagrid 表格悬停扩展

在表格中实现行级悬停提示(如显示详细信息或图片预览),需结合Datagrid事件与Tooltip。

1. 监听行事件
$('#datagrid').datagrid({onLoadSuccess: function() {$('.datagrid-row').mouseover(function() {const rowData = $('#datagrid').datagrid('getSelected');// 动态生成提示内容(如从行数据中提取)const tooltipContent = `姓名:${rowData.name}<br>部门:${rowData.dept}`;$(this).tooltip({content: tooltipContent,position: 'right'}).tooltip('show');}).mouseout(function() {$(this).tooltip('hide');});}
});
2. 第三方扩展包(流云大神版)

引入扩展JS文件后,可直接通过rowTooltip属性配置:

$('#datagrid').datagrid({rowTooltip: function(index, row) {if (row.status === 'error') {return $('<div>').css('color', 'red').text('数据异常!');}}
});

三、自定义悬停样式

通过CSS覆盖默认样式,实现个性化提示框:

/* 修改提示框背景色与圆角 */
.tooltip-content {background: #2196F3 !important;border-radius: 4px !important;padding: 8px !important;
}

四、常见问题解决

  1. 提示框不显示

    • 检查是否遗漏easyui-tooltip类或JavaScript初始化代码。
    • 确认元素可访问(如未被display:none隐藏)。
  2. 动态内容更新

    • 使用update方法或触发onUpdate事件:
      $('#element').tooltip('update', '新内容');
      
  3. 性能优化

    • 对大量数据表格,避免在onLoadSuccess中频繁绑定事件,改用事件委托。
http://www.xdnf.cn/news/10853.html

相关文章:

  • nav2笔记-250603
  • 国产高性能pSRAM选型指南:CSS6404LS-LI 64Mb QSPI伪静态存储器
  • 【网络安全 | 信息收集】灯塔(资产收集工具)安装教程
  • 【QT】`QTextCursor::insertText()`中插入彩色文本
  • Windows清理之后,资源管理器卡顿-解决方法
  • 【开源工具】Python+PyQt5打造智能桌面单词记忆工具:悬浮窗+热键切换+自定义词库
  • 【论文解读】FeINFN|Fourier-enhanced Implicit Neural Fusion Network for Multispectral
  • 黑马Java面试笔记之 消息中间件篇(Kafka)
  • Linux 软件安装方式全解(适用于 CentOS/RHEL 系统)
  • 【25.06】FISCOBCOS使用caliper自定义测试 通过webase 单机四节点 helloworld等进行测试
  • 多线程环境中,如果多个线程同时尝试向同一个TCP客户端发送数据,添加同步机制
  • 新版 Xcode 中 CoreData 模型编辑器显示拓扑图功能取消的替代方案
  • IBM DB2分布式数据库架构
  • 决策树指南:如何为您的数据选择合适的特征工程策略
  • 【卡点变速】节拍同步 讨论
  • Array.prototype.find()
  • 前端​​HTML contenteditable 属性使用指南
  • EagleTrader采访|在市场中修行的交易之道与实战反思
  • 【计算机系统结构】知识点总结
  • 产品更新丨谷云科技ETLCloud 3.9.3 版本发布
  • 【AI News | 20250603】每日AI进展
  • ElasticStack对接kafka集群
  • 【相等性比较的通解——理解 JavaScript 中的 Object.is()】
  • 高考数学易错考点02 | 临阵磨枪
  • 深入解析Playwright for Python:浏览器功能与代码实例详解
  • 【Visual Studio 2022】卸载安装,ASP.NET
  • Go Gin框架深度解析:高性能Web开发实践
  • LabVIEW磁悬浮轴承传感器故障识别
  • Windows版PostgreSQL 安装 vector 扩展
  • 服务器被攻击了怎么办