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

BeautyTips异步获取tooltip内容

阅读更多

话说上个月客户提出需求,希望输入铃音编号时能够即时返回该编号对应的详细信息。顺带要求两条:一是页面无刷新、二是要显示在气球提示框里。接到case之后,本着能不改就不改、能少改就少改的原则,跟人家解释说:首先,这个tooltip(甲方:说中文。偶:就是您提到的气球提示框)一般来说是光标悬停在某个控件上才会显示的;其次,每次按键都会发送新的请求,会对服务器造成很大压力滴。。。

 

挂上电话,我在google中敲入关键字jquery tootip,耳边回荡着你的声音——“需求不变,周五之前完成”,按下回车:恩,jquery的插件果然怒多,试了几个,果然不出我之所料,只支持mousehover事件,而且可配置性不高。最后,我找到了BeautyTips(以下简称bt)。

 

根据BeautyTips项目主页 上的介绍:该插件高度可配置,并能被多种事件所触发。在线Demo 很有诚意,22个例子外加源码和讲解,基本涵盖了所有的功能。

 

回到本文的主题,对实际项目进行抽象后,我写了一个小demo,与官方demo 12 中的异步获取静态页面不同,我这里接收server生成的动态页面。

 

IDE我用的是netbeans 6.7,对jquery(应该说是所有的js类库)的支持相当好。将附件中的beautytips_demo.zip 解压后,netbeans打开该项目,按F6键运行,在“铃音编号”中随便输入点东西,弹出提示框,如图:


除了页面中引入的js文件外,项目中就两个jsp而已。一个index.jsp就是前台页面啦,再一个data.jsp生成并提供前台异步获取所需的动态内容。我们先来看index.jsp的核心部分:

$(document).ready(function () {
    jQuery.bt.defaults.ajaxCache = false;
    $("#ringindex").bt({
        ajaxPath: "${pageContext.request.contextPath}/data.jsp",
        trigger: ["keypress", "blur"],
        spikeLength: 40,
        spikeGirth: 40,
        cornerRadius: 40,
        fill: "rgba(0, 0, 0, .8)",
        strokeWidth: 3,
        strokeStyle: "#CC0",
        cssStyles: {color: "#FFF", fontWeight: "bold"}
    })
 });
  • 第2行的jQuery.bt.defaults.ajaxCache是一个预设的全局变量,默认值是true,在这里为了避免ajax请求同一个url时从缓存中取值,我们把它置为false。从这一点可以看出bt作者还是很体贴的,有了这个参数我们就不用在url后面挂上一堆随机数了。需要指出的是,像ajaxCache这样全局变量的详细列表,都可以在jquery.bt.js(不要去看无注释压缩版的jquery.bt.min.js阿)文件的结尾部分查到。
  • 第4行的ajaxPath所对应的data.jsp就是我们之前提到的数据源。
  • 第5行的trigger表示keypress事件使tooltip显示,blur事件使其隐藏。
  • 第6-12行定义tooltip的外观,从官方demo 6抄过来的。

下面我们来看看data.jsp的源码:

<%
            Object[][] data = new Object [][] {
                { "630565", "相识非偶然", "谭咏麟", 200 },
                { "630566", "上街", "蔡依林", 200 },
                { "630567", "芥末不辣", "江美琪", 200 },
                { "630568", "没道理", "刘若英", 200 },
                { "630569", "一生所爱", "徐小凤", 200 },
                { "630571", "风的季节", "黎瑞恩", 200 },
                { "630572", "风中有朵雨做的云", "孟庭苇", 200 },
                { "630573", "秋天以后的故事", "侯湘婷", 200 },
                { "630575", "带我去寻找", "王啸坤", 200 },
                { "630576", "齐齐唱首歌", "许冠杰", 200 },
                { "630578", "明天话今天", "叶丽仪", 200 },
                { "630579", "迫我绝情", "张学友", 200 },
                { "630580", "走不掉", "张学友", 200 },
                { "630581", "旧情绵绵", "张学友", 200 },
                { "630582", "珍重", "谭咏麟", 200 },
                { "630583", "天使之恋", "黄莺莺", 200 },
                { "630585", "瞬间移动", "方力申", 200 },
                { "630586", "抵抗夜寒", "张学友", 200 },
                { "630587", "不像个大人", "张惠妹", 200 },
                { "630588", "解药", "陈奕迅", 200 }
            };
            java.util.Random random = new java.util.Random();
            int index = random.nextInt(data.length);
            StringBuffer result = new StringBuffer("<div id=\"content\">");
            result.append("<h4>铃音编号:");
            result.append(data[index][0]);
            result.append("</h4><hr/><ul><li>铃音: ");
            result.append(data[index][1]);
            result.append("</li><li>歌手: ");
            result.append(data[index][2]);
            result.append("</li><li>价格: ");
            result.append(data[index][3]);
            result.append("</li></ul>");
            result.append("</div>");
            response.reset();
            response.setContentType("text/html;charset=UTF-8");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write(result.toString());
%>
 

赫赫,大家都看出来了,我这个数据源完全是糊弄事儿,根本就无视来自客户端的输入,先定义了一堆Object二维数组,然后随机取一个向量中的各个字段,拼出一个div来写响应,这个div就是tooltip中要显示的内容,既包含了数据、也有结构、还有样式。根据bt作者的说法,严格的讲,这里使用的技术不是AJAX,而是AHAH(Asynchronous HTML and HTTP )。也有用户给作者留言,要求提供AJAX方式以方便使用handler,但被婉拒。

 

 

 

  • 大小: 14.8 KB
分享到:
评论

相关推荐

    25个优雅的jQuery Tooltip插件推荐

    12. **jQuery Ajax Tooltip**:通过Ajax获取内容的Tooltip,可以在不刷新页面的情况下提供实时信息。 13. **Shiny Tooltips**:顾名思义,它的设计目的是使Tooltip看起来更加光鲜亮丽,增加了页面的吸引力。 14. *...

    20款非常优秀的 jQuery 工具提示插件 推荐

    1. Dynamic tooltip:此插件允许创建动态更新的工具提示,适应变化的内容或数据。 2. jGrowl:除了基本的工具提示功能,jGrowl还提供通知和警告的弹出框,具有可定制的样式和动画效果。 3. jQuery Horizontal ...

    Jquery特效--最好的设计

    BeautyTips - **简介**:另一种工具提示插件,注重美观性。 - **特点**: - 支持多种触发方式。 - 提供了丰富的主题样式。 #### 三、图片展示类 在网页设计中,图片展示是重要的视觉元素之一。通过使用jQuery,...

    信捷PLC应用实例解析:随机密码、动态验证码与分期付款锁机系统的实现

    内容概要:本文详细介绍了信捷PLC在多个应用场景中的具体实现,包括随机密码生成、动态验证码、动态分期付款功能及锁机例程。首先探讨了随机密码生成,通过PLC的随机数生成功能并结合数学运算,实现了4位随机密码。其次,讲解了动态验证码的实现,利用PLC的实时时钟和通信功能,使验证码随时间动态变化。再次,介绍了动态分期付款功能,通过监测支付信号和比较已支付金额与总金额,实现分期付款的控制。最后,讨论了锁机例程,通过状态继电器和时间窗控制,确保设备在特定条件下不被随意使用。每个部分都提供了详细的梯形图代码和注释,帮助读者理解和实现。 适合人群:对PLC编程有一定基础的技术人员,尤其是从事工业自动化领域的工程师。 使用场景及目标:适用于需要增强设备安全性、提高验证机制可靠性的工业控制系统。通过学习这些例程,工程师可以在实际项目中灵活运用PLC实现复杂的功能,如设备访问控制、支付管理等。 其他说明:文中不仅提供了具体的代码实现,还分享了一些实用技巧和注意事项,如密码比对策略、时间同步校验、多品牌PLC移植建议等。此外,还提到了一些防破解措施,增强了系统的安全性。

    213000-fbo-ggs-Linux-x64-Oracle-shiphome.zipogg21.3安装包,适用于经典架构

    213000-fbo-ggs-Linux-x64-Oracle-shiphome.zip ogg21.3安装包,适用于经典架构

    基于Stanley算法与预瞄距离自适应的CarSim与Simulink联合仿真模型及其应用

    内容概要:本文介绍了基于Stanley算法和预瞄距离自适应机制的CarSim与Simulink联合仿真模型。Stanley算法用于路径跟踪,通过计算横向和航向偏差调整车辆转向角;预瞄距离自适应机制根据车辆速度动态调整预瞄距离,确保在不同速度和路况下都能灵活应对。CarSim提供高精度车辆动力学模型,Simulink则负责算法实现和系统集成。文中还分享了多个实用技巧,如速度单位转换、PID控制器参数调整、数据同步问题解决等,并提供了完整的模型文件供下载。 适合人群:从事自动驾驶研究的技术人员、高校师生及相关领域的研究人员。 使用场景及目标:适用于自动驾驶路径跟踪的研究与开发,旨在提高车辆在不同速度和路况下的路径跟踪性能,减少横向误差,增强行驶稳定性。 其他说明:文中提到的模型文件包括Carsim参数配置文件cpar、Simulink模型文件及详细参考资料,有助于快速搭建并调试联合仿真环境。

    西门子S7-1200 PLC在污水处理项目中的Modbus通讯与PID控制应用详解

    内容概要:本文详细介绍了西门子S7-1200 PLC在污水处理项目中的应用,涵盖多个关键技术模块。首先讨论了模拟量转换,通过具体的代码示例展示了如何将模拟量信号转换为可用于控制的数值。接下来探讨了电动阀控制,解释了如何利用逻辑指令实现电动阀的开关控制。液位控制部分则通过比较指令实现了液位的精准调控。Modbus通讯部分讲解了如何通过Modbus协议控制变频器,包括通讯参数的配置和数据传输的具体实现。PID控制部分详细解析了PID控制器的参数设置及其在污水处理中的应用。最后,PUT与 GET指令的应用确保了主站与从站之间的数据同步。此外,文中还分享了一些实战经验和调试技巧,如模拟量处理的基本方法、Modbus通讯的注意事项以及PID控制的实际应用。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对PLC编程和污水处理控制系统感兴趣的读者。 使用场景及目标:①帮助工程师理解和掌握西门子S7-1200 PLC在污水处理项目中的具体应用;②提供详细的代码示例和实战经验,便于读者快速上手并应用于实际项目;③解决常见问题,提高系统的稳定性和可靠性。 其他说明:文中不仅涵盖了理论知识,还包括大量的实战经验和调试技巧,有助于读者更好地应对实际项目中的挑战。

    【A股温度计】www.agwdj.com 镜像版程序V1.0

    【A股温度计】www.agwdj.com 镜像版程序V1.0说明 •通过数据可视化技术,将复杂的A股市场数据转化为直观的图形界面,帮助投资者快速把握市场脉搏。 【核心功能】 •全景视角:突破信息碎片化局限,快速定位涨跌分布,一眼锁定今日热点板块 •板块排序:基于申万行业分类标准,对31个一级行业和131个二级行业实时动态排序 •硬件适配:智能适配不同分辨率屏幕,4K以上屏幕显示信息更多(视觉更佳) •智能缩放:A股全图让大A市场5000+个股同屏显示(支持鼠标滚轮及触摸设备5级缩放) 【三秒原则】 •三秒看懂:通过精心设计的视觉图形,让用户在三秒内看清市场整体状况 •三秒定位:智能算法让大成交额个股和热点板块自动靠前,快速定位机会 •三秒操作:极简的界面,让用户减少操作 【使用场景】 •盘前准备:快速了解隔夜市场变化,制定当日策略 •盘中监控:实时跟踪市场动向,及时把握当日机会 •盘后复盘:全面分析当日市场表现,总结经验教训 【适合人群】 •个人用户:快速了解市场整体趋势变化,辅助决策 •专业人员:获取每天市场的数据云图支持研究工作 •金融机构:作为投研系统的可视化补充组件 •财经媒体:制作专业市场分析图表和报道 【市场切换】 •默认加载"A股全图",可切换单独显示的类型如下: •上证A股/深证A股/北证A股/创业板/科创板/ST板块/可转债/ETF 【程序优势】 •运行环境:纯PHP运行(无需安装任何数据库) •数据更新:实时同步→A股温度计→www.agwdj.com •显示优化:自动适配8K/4K/2K/1080P等不同分辨率的屏幕 •设备兼容:对市面上主流的设备及浏览器做了适配(检测到手机/平板/电视等默认Chrome/Firefox/Edge内核过低的情况会自动提示) 【其他说明】 •A股温度计程序演示网址:https://www.agwdj.com

    汽车车载网络系统检修.ppt

    汽车车载网络系统检修.ppt

    【KUKA 机器人资料】:KUKA 机器人初级培训教材.pdf

    KUKA机器人相关文档

    基于Matlab的模拟退火算法在旅行商问题(TSP)优化中的应用及其实现

    内容概要:本文详细介绍了利用Matlab实现模拟退火算法来优化旅行商问题(TSP)。首先阐述了TSP的基本概念及其在路径规划、物流配送等领域的重要性和挑战。接着深入讲解了模拟退火算法的工作原理,包括高温状态下随机探索、逐步降温过程中选择较优解或以一定概率接受较差解的过程。随后展示了具体的Matlab代码实现步骤,涵盖城市坐标的定义、路径长度的计算方法、模拟退火主循环的设计等方面。并通过多个实例演示了不同参数配置下的优化效果,强调了参数调优的重要性。最后讨论了该算法的实际应用场景,如物流配送路线优化,并提供了实用技巧和注意事项。 适合人群:对路径规划、物流配送优化感兴趣的科研人员、工程师及高校学生。 使用场景及目标:适用于需要解决复杂路径规划问题的场合,特别是涉及多个节点间最优路径选择的情况。通过本算法可以有效地减少路径长度,提高配送效率,降低成本。 其他说明:文中不仅给出了完整的Matlab代码,还包括了一些优化建议和技术细节,帮助读者更好地理解和应用这一算法。此外,还提到了一些常见的陷阱和解决方案,有助于初学者避开常见错误。

    BYVIN电动四轮车控制器代码详解:STM32F4硬件与软件设计

    内容概要:本文详细介绍了BYVIN(比德文)电动四轮车控制器的技术细节,涵盖了硬件设计和软件实现两大部分。硬件方面,提供了PCB文件和PDF原理图,展示了电路板布局、元件位置及电路连接关系。软件方面,代码结构清晰,模块化设计良好,包括初始化、速度数据处理、PWM配置、故障保护机制等功能模块。文中还提到了一些独特的设计细节,如PWM死区补偿、故障分级处理、卡尔曼滤波估算电池电量等。此外,代码仓库中还包括了详细的注释和调试技巧,如CAN总线实时数据传输、硬件级关断+软件状态机联动等。 适合人群:具备一定嵌入式开发基础的研发人员,尤其是对STM32F4系列单片机和电动车辆控制系统感兴趣的工程师。 使用场景及目标:适用于希望深入了解电动四轮车控制器设计原理和技术实现的研究人员和开发者。目标是掌握电动四轮车控制器的硬件设计方法和软件编程技巧,提升实际项目开发能力。 其他说明:本文不仅提供了代码和技术细节,还分享了许多实战经验和设计思路,有助于读者更好地理解和应用这些技术。

    【剧本杀AI提示词指令】基于AI的剧本杀定制化创作系统(deepseek,豆包,kimi,chatGPT,扣子空间,manus,AI训练师)

    内容概要:本文介绍了一个专业的剧本杀创作作家AI。它能根据客户需求创作各种风格和难度的剧本杀剧本,并提供创作建议和修改意见。其目标是创造引人入胜、逻辑严密的剧本体验。它的工作流程包括接收理解剧本要求、创作剧本框架情节、设计角色背景线索任务剧情走向、提供修改完善建议、确保剧本可玩性和故事连贯性。它需保证剧本原创、符合道德法律标准并在规定时间内完成创作。它具备剧本创作技巧、角色构建理解、线索悬念编织、文学知识和创意思维、不同文化背景下剧本风格掌握以及剧本杀游戏机制和玩家心理熟悉等技能。; 适合人群:有剧本杀创作需求的人群,如剧本杀爱好者、创作者等。; 使用场景及目标:①为用户提供符合要求的剧本杀剧本创作服务;②帮助用户完善剧本杀剧本,提高剧本质量。; 阅读建议:此资源详细介绍了剧本杀创作作家AI的功能和服务流程,用户可以依据自身需求与该AI合作,明确表达自己的创作需求并配合其工作流程。

    空气耦合超声仿真的COMSOL模型解析与应用实例

    内容概要:本文详细介绍了五个用于空气耦合超声仿真的COMSOL模型,涵盖二维和三维场景,适用于铝板和钢板的多种缺陷检测。每个模型都包含了具体的参数设置、边界条件选择以及优化技巧。例如,Lamb波检测模型展示了如何利用A0模态检测铝板内的气泡,而三维模型则强调了内存管理和入射角参数化扫描的重要性。表面波检测模型提供了裂纹识别的相关性分析方法,变厚度模型则展示了如何通过几何参数化来模拟复杂的工件形态。文中还分享了许多实用的操作技巧,如内存优化、信号处理和自动化检测逻辑。 适用人群:从事无损检测研究的技术人员、COMSOL软件使用者、超声检测领域的研究人员。 使用场景及目标:①帮助用户理解和掌握空气耦合超声仿真的具体实现方法;②提供实际工程应用中的缺陷检测解决方案;③指导用户进行高效的仿真建模和结果分析。 其他说明:文中提供的模型不仅涵盖了常见的缺陷检测场景,还包括了一些高级技巧,如参数化扫描、自动化检测逻辑等,能够显著提高工作效率。同时,文中还给出了硬件配置建议和一些常见的注意事项,确保用户可以顺利运行这些模型。

    【精通各种销售文案的专家】AI提示词销售文案自动生成系统:文案创作与优化全流程解析

    内容概要:本文档介绍了名为“精通各种销售文案的专家”的虚拟角色,该角色由深度学习和自然语言处理技术构建,旨在为各行业提供专业的销售文案服务。文档详细列出了角色的背景、偏好、目标、限制条件以及技能。它强调了角色在文案创意撰写、精准市场定位、效果优化和培训指导方面的能力,并且提到它能够根据不同的产品特性创作多元化的文案风格,同时确保文案符合法律规范、品牌形象一致性和时效性。此外,还展示了具体的文案示例,如智能手表和空气净化器的广告语,最后概述了与用户合作的标准流程,包括初步沟通、文案构思、初稿撰写及反馈修订等步骤。; 适合人群:需要撰写或优化销售文案的企业营销人员、广告策划师以及想要提高文案写作水平的内容创作者。; 使用场景及目标:①为企业或个人提供定制化销售文案服务,以提升品牌影响力和销售业绩;②帮助文案撰写者掌握文案策划技巧,提高文案质量;③确保文案符合法律法规和品牌要求,维护品牌形象。; 阅读建议:阅读时应重点关注角色的核心能力和所提供的具体服务,同时注意文档中提及的文案创作原则和流程,以便更好地理解如何利用该角色来满足自身的文案需求。

    【KUKA 机器人资料】:kuka Robot 初级培训.pdf

    KUKA机器人相关文档

    多智能体系统中神经网络与自适应动态滑模控制的Simulink复现及优化

    内容概要:本文详细探讨了多智能体系统中神经网络与自适应动态滑模控制的应用及其在Simulink中的复现。首先介绍了多智能体系统的概念及其通信方式,然后讨论了神经网络在多智能体决策中的应用,展示了如何使用Keras构建前馈神经网络。接着阐述了自适应动态滑模控制的基本原理,包括滑模面设计和自适应控制参数调整。最后,重点讲解了如何在Simulink中集成这些技术,提供了具体的实现步骤和优化建议,如使用Matlab Function模块嵌入神经网络和自适应滑模控制算法,以及解决抖振问题的方法。 适合人群:从事智能控制系统研究和开发的技术人员,尤其是对多智能体系统、神经网络和自适应动态滑模控制感兴趣的科研人员和工程师。 使用场景及目标:适用于需要提高多智能体系统在复杂环境下稳定性和效率的研究项目。具体目标包括减少控制系统的抖振现象,提升响应速度和精度,降低计算资源消耗。 其他说明:文中提供的代码片段和实现细节有助于读者快速理解和应用这些先进技术。同时,强调了在实际工程中需要注意的问题,如采样时间和代数环检测等。

    永磁同步电机无传感器控制:基于改进卡尔曼滤波速度观测器的Simulink建模与应用

    内容概要:本文详细探讨了永磁同步电机(PMSM)无传感器控制领域的改进卡尔曼滤波速度观测器的应用。首先介绍了卡尔曼滤波的基本原理及其在PMSM速度观测中的应用,指出了传统卡尔曼滤波在复杂非线性系统中的局限性。接着阐述了改进卡尔曼滤波的具体方法,包括自适应调整过程噪声协方差矩阵Q和观测噪声协方差矩阵R,以应对PMSM运行时参数变化的情况。文中还展示了如何在Simulink中构建PMSM的数学模型并实现普通和改进卡尔曼滤波的子模块,通过仿真对比验证了改进算法的有效性和优越性。此外,讨论了改进版在不同工况下的表现,尤其是在高速区和负载突变情况下的精度提升。 适合人群:从事电机控制系统研究与开发的技术人员,尤其是对卡尔曼滤波有一定了解并希望深入了解其在PMSM无传感器控制中应用的人群。 使用场景及目标:适用于需要提高PMSM无传感器控制精度的研发项目,目标是通过改进卡尔曼滤波算法,实现更精准的速度和位置估计,降低系统成本并提高可靠性。 其他说明:文章强调了改进卡尔曼滤波在实际应用中的细节处理,如自适应调整噪声协方差矩阵、优化矩阵运算等,为后续研究提供了宝贵的实践经验和技术指导。

    游戏型多媒体教育软件.ppt

    游戏型多媒体教育软件.ppt

    【KUKA 机器人资料】:KUKA Unternehmenspr_sentation.pdf

    KUKA机器人相关文档

Global site tag (gtag.js) - Google Analytics