使用Qtip2来开发功能强大的删除和信息提示功能

前面的文章中我们介绍了超棒的20款javascript工具提示条(tooltips)类库,在这篇文章中我们曾经提到过Qtip2这个强大的jQuery工具提示插件,这个jQuery插件能够帮助你快速创建强大的工具提示(tooltip)功能。如果大家使用微博的话,肯定会经常类似如下的用户信息界面,这个界面使用的就是一个工具提示功能。使用Qtip2你也可以快速开发出类似的提示功能。

在接下来的内容中,我们将创建一个博客文章阅读页面,并且提供两个“按钮”来控制“删除”和“喜欢”,界面如下:

删除tooltip

相关信息提示

以上两个tooltip分别使用点击和hover来触发。

主要相关代码

javascript

倒入相关类库:

  1. <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.qtip.min.js"></script>

生成delete操作相关工具提示:

  1. $(‘<div />‘).qtip({
  2. content: {
  3. text: ‘<button id="confirm" style="font-size:12px;margin-left:0px">Yes</button>&nbsp;<button id="cancel" style="font-size:12px;margin-left:0px">No</button>‘,
  4. title: {
  5. text: ‘Are you sure to delete ?‘,
  6. button: true
  7. }
  8. },
  9. events: {
  10. show: function(event, api) {
  11. deletelink = $(event.originalEvent.target);
  12. },
  13. render: function(event, api) {
  14. $(‘button‘, api.elements.content).click(api.hide);
  15. var tmpdelid = $(‘.ui-tooltip‘);
  16. tmpdelid.on("click", ‘#confirm‘, function(e){
  17. deletelink.closest(‘article‘).slideUp();
  18. });
  19. }
  20. },
  21. position: {
  22. target: ‘event‘,
  23. my: ‘center‘, // Use the corner...
  24. at: ‘center‘ // ...and opposite corner
  25. },
  26. show: {
  27. event:‘click‘,
  28. target: $(‘.delete‘),
  29. effect: function(offset) {
  30. $(this).slideDown(150);
  31. }
  32. },
  33. hide: {
  34. event:‘unfocus‘,
  35. target: $(‘.delete‘),
  36. effect: function(offset) {
  37. $(this).slideUp(150);
  38. }
  39. },
  40. style: {
  41. classes: ‘ui-tooltip-shadow ui-tooltip-jtools‘,
  42. width: 200
  43. }
  44. });

代码说明:

以上代码中使用content来定义标题,内容及其关闭按钮。使用events属性来定义 show 和 render方法,这两个方法的区别在于,render只在初始化的时候运行一次。show方法在每次展示工具提示的时候都调用。

hide,show,style属性用来定义相关的事件显示和隐藏的触发,及其相关样式设置。

这里我们使用一个小技巧,使用一个tooltip div来展示页面上所有的工具条提示。具体实现,这里使用show/hide中的target属性来定义。

另外两个工具条的实现也类似。完整代码如下:

完整代码及内容参见原文链接:http://www.gbtags.com/gb/share/5886.htm

时间: 2024-10-06 18:19:54

使用Qtip2来开发功能强大的删除和信息提示功能的相关文章

ASP.NET输入文本框自动提示功能

在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需要做个类似的效果,该如何做到呢? 很简单,我们只要借助于一个JQuery强大的插件JQuery AutoComplete来完成这个效果就可以了.这个插件的官方地址为:JQuery AutoComplete,里面也有示例代码. 下面我们将以一个身份证号自动查询为例,来看看JQuery AutoComp

eclipse的自动提示功能

一般情况下按ALT+/即可提示,若想按任意字母都有提示,则可以打开eclipse的自动提示功能,打开或关闭该提示功能的步骤如下: 打开eclipse后一次点Window->Perferences->Java -> Editor -> Content Assist 在打开的页面的的右侧找到auto-Activation 下面有三个选项,找到第二个“Auto activation triggers for Java:”选项,在其后的文本框中会看到一个“.”存在.这表示:只有输入“.”之

免费的在线Web文件管理器:Net2FTP,Pydio,eXtplorer,KodExplorer–功能强大

https://www.freehao123.com/web-ftp/ 经常有朋友在使用一些没有带文件管理器的空间时,苦于没有办法来解压上传的文件压缩包,而如果不先上传压缩包,直接上传文件夹的话耗费的时间太多.还有一些朋友希望将空间变成一个文件存储站,这时就需要一个功能足够多也足够强大的在线文件管理器了. 在线的Web文件管理器非常地多,尤其是以PHP在线文件管理器最多,但是真正能够满足我们的文件管理需求同时也容易安装和使用的Web文件管理器不是很多.本篇文章部落就精选四个界面友好.功能丰富和安

Unity3D手机斗地主游戏开发实战(02)_叫地主功能实现(不定期更新中~~~)

系列目录 Unity3D手机斗地主游戏开发实战(01)_发牌功能实现 Unity3D手机斗地主游戏开发实战(02)_叫地主功能实现 一.大体思路 前面我们实现了点击开始游戏按钮,系统依次给玩家发牌的逻辑和动画,并展示当前的手牌.这期我们继续实现接下来的功能--叫地主. 1.首先这两天,学习了DOTween,这是一个强大的Unity动画插件,大家可以参考:官方文档,个人感觉DOTween还是比较好用的. 好的,我们先来重构一下动画部分的代码(没有绝对牛逼的架构和设计,项目过程中不要不断的持续改进嘛

功能强大的商业图表控件Essential Chart for ASP.NET MVC

Essential Chart for ASP.NET MVC是一款功能强大的商业图表控件,提供了创新的数据对象模型可以很容易地与多种数据源进行绑定,提供了35种图表类型,支持2D和3D显示,多轴显示.实时数据显示.导出为图片以及打印和打印预览,软件开发人员可以使用该控件开发出专业的商业应用程序. 具体功能: 支持无限制数据序列和无限制数据点 支持多种坐标轴样式 支持自定义轴标签和显示方向 支持轴反转和颠倒轴 支持自定义数据点 支持图表放大和滚动以及panning 控件提供了交互式地十字光标,可

设计师眼中功能强大的Xcode

作为设计师,不仅要能创造出移动为先的新产品,更要了解能创造出优秀移动作品的工具.这个实现过程可以让我们的设计更加优秀. 过去两个月,我每天在 Xcode 上花费的时间大约有 10 个小时,我学到了很多完全改变我的工作流程的技术.Xcode 是一款成熟的工具包含了很多强有力的但没被经常使用的功能.如果你不确定 Storeboard 是 CSS 的未来,或者没有直接使用 Xcode 工作,这篇文章至少会告诉你 Xcode 如何为你的设计做准备和它有什么可能的限制. 预览你的设计 如同你跨多分辨率设备

微信公众号最新改版功能:可删除单篇文章

随着微信公众平台使用群体的增加,微信公众平台功能开发成了互联网行业人士最关注的事情.近日,微信公众平台不断采取新措施以及推出新功能,来保护消费者的权益.日前微信发布公告称将严打非法分销公众号,一经发现并将永久封号并发布<微信公众平台关于整顿发送低俗类文章行为的公告>,宣布将坚决打击涉嫌淫秽.色情及低俗等信息,并对发送低俗文章的行为进行整顿,包括封号.清空内容.注销账号等.随后,微信又推出新功能,支持单篇文章的删除. 在微信公众平台已推送的多图文中突然发现某篇文章有误怎么办?全部删除?现在不用纠

SAX,功能强大的 API

https://www.ibm.com/developerworks/cn/xml/x-saxapi/ SAX,功能强大的 API 在摘自 XML by Example 的本篇预览中比较了 DOM 和 SAX,然后开始使用 SAX 这篇对 Benoit Marchal 所著的 XML by Example第二版的预览给出了对 SAX 的翔实介绍,SAX 是用于处理 XML 的基于事件的 API,它已经成为事实上的标准.本篇预览讲述了何时使用 SAX 替换 DOM,概述了常用的 SAX 接口,并在

功能强大的PCBCadence.Specctra.Router.v10.2 1CD

Mechanical.Simulation.TruckSim.2016.1 1DVD Megatech.MegaCAD.3D.v2016.Win32_64 2CD QuarkXPress.2016.v12.0.0.Multilingual.MacOSX 1CD American Concrete Pavement Association StreetPave 12 Version 1 Patch 8 1CD Cimco Edit v7.5 1CD Oasys Flow v8.0.9.0 Win6