使用Qtip2来开发功能强大的删除和信息提示功能
- 在线演示1
- 本地下载
前面的文章中我们介绍了超棒的20款javascript工具提示条(tooltips)类库,在这篇文章中我们曾经提到过Qtip2这个强大的jQuery工具提示插件,这个jQuery插件能够帮助你快速创建强大的工具提示(tooltip)功能。如果大家使用微博的话,肯定会经常类似如下的用户信息界面,这个界面使用的就是一个工具提示功能。使用Qtip2你也可以快速开发出类似的提示功能。
在接下来的内容中,我们将创建一个博客文章阅读页面,并且提供两个“按钮”来控制“删除”和“喜欢”,界面如下:
删除tooltip
相关信息提示
以上两个tooltip分别使用点击和hover来触发。
主要相关代码
javascript
倒入相关类库:
- <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
- <script type="text/javascript" src="js/jquery.qtip.min.js"></script>
生成delete操作相关工具提示:
- $('<div />').qtip({
- content: {
- text: '<button id="confirm" style="font-size:12px;margin-left:0px">Yes</button> <button id="cancel" style="font-size:12px;margin-left:0px">No</button>',
- title: {
- text: 'Are you sure to delete ?',
- button: true
- }
- },
- events: {
- show: function(event, api) {
- deletelink = $(event.originalEvent.target);
- },
- render: function(event, api) {
- $('button', api.elements.content).click(api.hide);
- var tmpdelid = $('.ui-tooltip');
- tmpdelid.on("click", '#confirm', function(e){
- deletelink.closest('article').slideUp();
- });
- }
- },
- position: {
- target: 'event',
- my: 'center', // Use the corner...
- at: 'center' // ...and opposite corner
- },
- show: {
- event:'click',
- target: $('.delete'),
- effect: function(offset) {
- $(this).slideDown(150);
- }
- },
- hide: {
- event:'unfocus',
- target: $('.delete'),
- effect: function(offset) {
- $(this).slideUp(150);
- }
- },
- style: {
- classes: 'ui-tooltip-shadow ui-tooltip-jtools',
- width: 200
- }
- });
代码说明:
以上代码中使用content来定义标题,内容及其关闭按钮。使用events属性来定义 show 和 render方法,这两个方法的区别在于,render只在初始化的时候运行一次。show方法在每次展示工具提示的时候都调用。
hide,show,style属性用来定义相关的事件显示和隐藏的触发,及其相关样式设置。
这里我们使用一个小技巧,使用一个tooltip div来展示页面上所有的工具条提示。具体实现,这里使用show/hide中的target属性来定义。
另外两个工具条的实现也类似。完整代码如下:
完整代码及内容参见原文链接:http://www.gbtags.com/gb/share/5886.htm
转载于:https://www.cnblogs.com/gbtags/p/4679710.html
使用Qtip2来开发功能强大的删除和信息提示功能相关推荐
- Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述—— 隐鹤 / HelloWorld...
Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述---- 隐鹤 / HelloWorld 1. 引言 自本人第一篇博文"Excel阅读模式/单元格行列指示/聚光灯 ...
- element 问号提示_vue实现element表格里表头信息提示功能(推荐)
如图:在element表格操作一栏需要添加提示功能 实现效果 如图:鼠标浮上去弹出tips 解决方案 1.编写组件 在 promptMessage.vue 文件里面实现 {{item}} export ...
- 如何开发一款可以删除个人信息的社交软件?小扎做到了!
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 闹得沸沸扬扬的 Facebook "泄露门"事件最近终于有了偃旗息鼓的态 ...
- jquery mysql jsp搜索功能_实现搜索框自动提示功能(jquery+php)
客户端代码 #search{font-size:14px;} #search .k{padding:2px 1px; width:320px;} #search_auto{border:1px sol ...
- Android-如何开发一个功能强大的图片选择器
图片选择器是Android开发中会经常用到的一个功能,特别对于社交类的应用,比如头像设置,比如发图片.自然ImagePicker的轮子很多,今天介绍一个功能强大的轮子SImagePicker 介绍 首 ...
- eclipse linux 代码提示,Linux Eclipse代码提示功能设置(Java C/C++)
最近在Linux下开发,由于长期使用Visual Studio 2010,对代码提示功能情有独钟,现在在Linux下,使用Eclipse做开发,当然免不了怀念Visual Studio强悍的代码提示, ...
- eclipse 增加php 版本号,扩充eclipse php的代码提示功能
当前位置:我的异常网» PHP » 扩充eclipse php的代码提示功能 扩充eclipse php的代码提示功能 www.myexceptions.net 网友分享于:2014-05-12 ...
- 黑马博客——详细步骤(五)项目功能的实现之用户信息修改
2.4 用户信息修改 1. 将要修改的用户ID传递到服务器端(作用:区分添加用户功能还是修改用户功能) 2. 建立用户信息修改功能对应的路由 点击修改按钮 能看到用户信息 点击修改按钮 解决方式: 其 ...
- 被误认为是外国人开发的4款软件,功能强大到离谱,且用且珍惜
国外的月亮不一定比国内圆,随着国内互联网飞速发展,国内研发出许多实用又良心的软件,由于偏见,功能强大的它们却被误认为是外国佬研发的. 1.Foxit PDF用系统自带的Adobe实在难用,Foxit这 ...
- 让软件不在添加删除程序_功能强大却鲜为人知的四款软件,一但发现就无法自拔...
Uninstall Tool Uninstall Tool是一款专业且实用的卸载软件. 电脑上流氓软件很多,有时候你想卸载,却无法卸载,那么你可以试试它,它比Windows自带的"添加/删除 ...
最新文章
- 网络编程学习笔记(非阻塞读和写)
- Noip2016换教室
- 2019已过半,薪资相匹配除了实力,其实最重要的是……
- MySQL分组查询—按函数分组
- ubuntu16.04 安装docker-ce,解决libltdl7版本过低的问题
- .NET Core/.NET 5.0 析构函数依然有效?
- 常用Git命令和配置
- java B2B2C Springboot仿淘宝电子商城系统(六)springboot整合mybatis
- React中state与props介绍与比较
- c++ 中引用()的用法和应用实例
- 【POJ 3281】Dining【最大匹配、拆点】
- dede php 里加nofollow,浅谈在dede当前位置与下一页中如何利用nofollow
- vs2010c语言一闪而过,[转载]关于vs2010运行C程序时,运行结果窗口一闪而过的问题...
- 百度云直链获取优化版
- RESTful的特点分析
- 8 大主流自媒体平台优缺点分析以及运营建议
- 手把手带你实现QQ分享
- java eles什么意思_Springboot 那么大,不用什么场景都用它吧,要不尝试下 Mars- Java ?...
- 感觉这么多年喝的鸡汤都白补了,我想静静!
- linux 正点原子ov5640_【正点原子FPGA连载】第二十三章OV5640摄像头LCD显示-摘自【正点原子】领航者 ZYNQ 之嵌入式开发指南 (amobbs.com 阿莫电子论坛)...
热门文章
- 一场员工高管间的口水战,员工输了
- linux+shell+整数计算,Shell expr命令进行整数计算的实现
- php将中文编译成字符串,PHP将汉字字符串转换为数组
- 002649:springboot下mybatis运行原理
- 农银电商项目学习笔记(一)
- Java之StringBuffer使用方法
- 第二次作业——个人项目实战之随机数独生成
- 细谈会话管理-----Cookie和Session
- hibernate注解方式实现一对多映射
- HDU 4675 GCD of Sequence(莫比乌斯反演 + 打表注意事项)题解