话说上个月客户提出需求,希望输入铃音编号时能够即时返回该编号对应的详细信息。顺带要求两条:一是页面无刷新、二是要显示在气球提示框里。接到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
分享到:
- 2009-08-11 16:49
- 浏览 1868
- 评论(0)
- 论坛回复 / 浏览 (0 / 2991)
- 查看更多
相关推荐
12. **jQuery Ajax Tooltip**:通过Ajax获取内容的Tooltip,可以在不刷新页面的情况下提供实时信息。 13. **Shiny Tooltips**:顾名思义,它的设计目的是使Tooltip看起来更加光鲜亮丽,增加了页面的吸引力。 14. *...
1. Dynamic tooltip:此插件允许创建动态更新的工具提示,适应变化的内容或数据。 2. jGrowl:除了基本的工具提示功能,jGrowl还提供通知和警告的弹出框,具有可定制的样式和动画效果。 3. jQuery Horizontal ...
BeautyTips - **简介**:另一种工具提示插件,注重美观性。 - **特点**: - 支持多种触发方式。 - 提供了丰富的主题样式。 #### 三、图片展示类 在网页设计中,图片展示是重要的视觉元素之一。通过使用jQuery,...
# 基于C语言的SmartPlugModbus固件项目 ## 项目简介 该项目是一个基于C语言的固件项目,旨在实现一个支持Modbus RTU通信协议的智能设备固件。该固件被设计为与SmartPlugModbus设备配合使用,用于控制和管理多个电源插座,提供过流、欠流、过压、欠压和过热保护,同时监控插座状态和电压、电流等参数。 ## 项目的主要特性和功能 1. Modbus RTU通信协议支持固件实现了Modbus RTU通信协议,允许通过Modbus协议与设备进行通信,包括读取和写入设备参数、状态和控制命令。 2. 多插座控制固件支持控制多个电源插座,包括开启、关闭、查询状态等。 3. 保护功能设备提供过流、欠流、过压、欠压和过热保护,防止设备损坏和安全事故。 4. 参数配置通过Modbus协议,用户可以配置设备的保护参数,如电流、电压限制等。
【项目资源】: 单片机项目适用于从基础到高级的各种项目,特别是在性能要求较高的场景中,比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者,可以从简单的控制台程序开始练习;如果是进阶开发者,可以尝试涉及硬件或网络的项目。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。
【项目资源】: 物联网项目适用于从基础到高级的各种项目,特别是在性能要求较高的场景中,比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者,可以从简单的控制台程序开始练习;如果是进阶开发者,可以尝试涉及硬件或网络的项目。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。
# 基于嵌入式系统的StackAttack游戏项目 ## 项目简介 StackAttack是一个基于嵌入式系统的游戏项目,设计用于SPI TFT彩色液晶显示面板上运行。游戏的核心玩法是操控一个名为“Claw”(爪子)的游戏角色,在由格子组成的地图上移动并抓取箱子。玩家通过操纵杆控制游戏角色,成功抓取并移动箱子到目标位置后得分。游戏地图由二维数组表示,每个格子代表一个位置。当玩家成功将所有箱子移动到目标行时,游戏结束。 ## 项目的主要特性和功能 1. 游戏角色控制玩家通过操纵杆控制Claw(爪子)角色移动。 2. 地图和箱子管理游戏地图由二维数组表示,每个格子代表一个位置。箱子在游戏地图上的位置由数组中的值表示。 3. 游戏逻辑包括角色的移动、箱子的抓取和移动、得分计算等。 4. 图形显示使用SPITFTILI9341图形库控制SPI TFT显示屏,实现游戏的图形输出。 5. 暂停功能游戏支持暂停功能,方便玩家随时暂停游戏。
内容概要:本文档提供了基于STM32、OpenCV和卷积神经网络的车牌识别系统的完整代码示例。系统通过摄像头捕捉视频流,利用OpenCV进行图像处理(如灰度化、二值化、轮廓检测等)以定位车牌区域,并使用预训练的ONNX模型对车牌字符进行识别。之后,系统将识别到的车牌号与预先存储在CSV文件中的居民车牌数据库进行匹配,以判断车辆是否为小区居民所有,从而实现对外来车辆的收费管理。; 适合人群:对嵌入式系统开发、计算机视觉和深度学习感兴趣的开发者,尤其是有一定C++编程基础和技术背景的研究人员或工程师。; 使用场景及目标:①适用于社区、停车场等场所的车辆管理;②帮助开发者理解车牌识别的基本流程,包括图像预处理、车牌定位、字符识别以及与数据库的交互;③提供一个可扩展的基础框架,便于后续优化和功能增加。; 阅读建议:读者应确保具备基本的OpenCV库使用经验和C++编程能力。在学习过程中,建议同时参考相关文献资料,深入理解每个步骤背后的原理,并尝试调整参数或替换模型以提高识别精度。此外,还需准备相应的硬件设备(如摄像头)和软件环境(如安装OpenCV库),以便实际运行代码并观察效果。
efwfw
内容概要:本文详细介绍了利用西门子S7-200 PLC和MCGS组态软件构建智能交通灯控制系统的方法。首先阐述了系统的硬件配置,包括PLC的选择、IO分配、光电开关的应用等。接着深入探讨了梯形图编程的核心逻辑,如定时器嵌套、车流判断、紧急模式处理等。同时,还讲解了MCGS组态界面的设计要点,如动态指示灯、车流统计曲线、急停按钮等功能的实现。此外,文中分享了一些调试经验和优化技巧,如信号隔离、通信参数设置、夜间模式优化等。 适合人群:对PLC编程和工业自动化感兴趣的工程技术人员、高校相关专业学生。 使用场景及目标:适用于城市交通管理部门进行智能交通灯系统的规划与实施,旨在提高交通效率,减少拥堵。通过学习本文,读者能够掌握PLC编程的基本方法和MCGS组态软件的使用技巧。 其他说明:文中提供了详细的接线图、梯形图代码片段和组态界面截图,便于读者理解和实践。同时,作者还分享了许多实际操作中的注意事项和经验教训,有助于初学者少走弯路。
【项目资源】: 物联网项目适用于从基础到高级的各种项目,特别是在性能要求较高的场景中,比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者,可以从简单的控制台程序开始练习;如果是进阶开发者,可以尝试涉及硬件或网络的项目。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。
摘 要 面对信息时代的机遇与挑战,利用高科技手段来提高企业的管理水平无疑是一条行之有效的途径。利用计算机管理可以最大限度的发挥准确、快捷、高效等作用, 在越来越激烈的珠宝行业中,计算机管理技术对珠宝首饰公司的服务管理提供强有力的支持。因此,利用全新的计算机网络和珠宝首饰管理系统,已成为提高珠宝首饰公司的管理效率,改进服务水准的重要手段之一。本系统应用Visual Basic 6.0 中文版开发前台,用Microsoft Access 作后台服务器,采用客户机/服务器(C/S)管理思想来对珠宝首饰进销存管理。 关键词:管理水平, 管理效率,服务水准,珠宝首饰管理系统,客户机/服务器,管理思想
稀疏分解方法在信号去噪中的应用研究_内含源码数据论文.zip
本书由吉姆·诺埃尔和大卫·多蒂奇编辑,旨在探讨领导力发展领域的最新趋势和实践。书中不仅提供了领导力发展领域的历史回顾,还挑战了组织对领导力发展的战略视角,详细介绍了如何培养全球领导者,并提供了关于领导力发展方法、策略和系统、高潜力人才发展、高层管理参与、有效学习方法以及领导力指标等方面的深入案例研究和理论分析。此外,书中还探讨了创新的领导力发展方法,并对未来的发展趋势进行了展望。
一种基于 QR 二维码的彩色二维码编码译码设计及其软件实现.zip
【项目资源】: 单片机项目适用于从基础到高级的各种项目,特别是在性能要求较高的场景中,比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者,可以从简单的控制台程序开始练习;如果是进阶开发者,可以尝试涉及硬件或网络的项目。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。
【项目资源】: 物联网项目适用于从基础到高级的各种项目,特别是在性能要求较高的场景中,比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者,可以从简单的控制台程序开始练习;如果是进阶开发者,可以尝试涉及硬件或网络的项目。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。
内容概要:本文详细介绍了使用COMSOL Multiphysics的弱形式接口对三维光子晶体进行数值模拟的方法和技巧。文章通过具体的代码示例,解释了如何构建光子晶体的介电常数分布、设置弱形式PDE、处理电磁场切向连续性、应用Floquet周期边界条件以及特征值求解等关键步骤。特别强调了弱形式接口相比传统物理场接口的优势,如灵活性和对复杂边界的处理能力。文中还分享了一些实用的经验和注意事项,如布洛赫边界条件的实现、特征值求解器参数的优化配置以及网格划分的技巧。 适合人群:具备一定电磁学和数值模拟基础的研究人员或工程师,尤其是对光子晶体仿真感兴趣的读者。 使用场景及目标:①理解并掌握COMSOL弱形式接口在光子晶体仿真中的应用;②学习如何通过弱形式设置处理复杂的电磁场问题;③提高对光子晶体能带结构和带隙特性的认识;④掌握特征值求解和网格划分的最佳实践。 阅读建议:由于本文涉及较多的具体代码和物理概念,建议读者在阅读过程中结合COMSOL软件进行实际操作,同时查阅相关电磁理论书籍以加深理解。此外,对于文中提到的一些具体参数设置和技巧,可以通过尝试不同的配置来巩固所学知识。
内容概要:PT5000汽轮机滑动轴承系统模拟试验台是一个类似于电厂汽轮机发电机的缩小模型,旨在帮助用户获取汽轮机转子动态行为和滑动轴承油膜现象的实际经验,并研究振动控制方法。该试验台模拟两级涡轮机(低压和中压),每级转子两侧各有8个叶片,共计16个叶片。通过电机驱动而非涡轮发电机,可以进行启停机测试,识别共振现象。试验台还支持多种实验,如不平衡/现场动平衡、轴不对中实验、摩擦实验、油膜故障试验、轴颈轴承实验以及根据油压和温度进行的转子动力学试验。试验台配备了多种传感器和控制系统,包括电涡流传感器、温度传感器、压力传感器等,用于监测和记录实验数据。 适合人群:从事汽轮机设计、制造、维护的技术人员,以及相关专业的高校师生和研究人员。 使用场景及目标:①研究汽轮机转子的动态行为和滑动轴承的油膜现象;②进行振动控制方法的研究;③模拟再现油膜涡动转和油膜震荡,研究其控制条件;④进行不平衡、不对中、摩擦等常见故障的模拟和分析;⑤通过调整油压、温度和预加载力,研究轴的行为变化。 其他说明:该试验台不仅适用于教学和科研,还可用于工业领域的培训和技术验证。试验台具有丰富的配置和可选配件,可以根据具体需求进行定制。试验台的机械和电气参数详细列出,确保用户能够全面了解设备性能。
电影类型知识图谱构建,包含相关数据集