jquery.qtip提示信息插件用法简单实例


Posted in Javascript onJune 17, 2016

本文实例讲述了jquery.qtip提示信息插件用法。分享给大家供大家参考,具体如下:

公司要求写一个关于提示信息的效果,在网上查询到了这个插件,感觉很不错,下面是自己学习的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(
  function(){
    //下面使用的是插件默认的样式显示,content是指要显示的内容(包括文字和图片)
    $("#huangbiao").qtip({
      content: 'Stems are great for indicating the context of the tooltip.',
      style: {
        tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners
      }
    });
    //style json是对提示样式的设置即外面的div样式设置,但是没有设置具体的位置
    $("#huangbiao1").qtip({
      content: '设置显示文字样式',
      style: {
        width: 200,
        padding: 5,
        background: '#A2D959',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 7,
          radius: 5,
          color: '#A2D959'
        },
        tip: 'bottomLeft',
        name: 'dark' // Inherit the rest of the attributes from the preset dark style
      }
    });
    //name:'green' 是继承了默认的提示样式,还有其他的name可以参考帮助文档
    $("#huangbiao2").qtip({
      content: '使用插件自定义的样式',
      style: {
        name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners
      }
    });
    //target:表示提示信息显示在控件的什么位置
    //tooltip:
    $("#huangbiao3").qtip({
      content: 'Stems are great for indicating the context of the tooltip.',
      position: {
        corner: {
          target: 'topLeft',
          tooltip: 'bottomLeft'
        }
      }
    });
    $("#huangbiao4").qtip({
      content: '<img src="img/2.jpg">',
    });
    //show 是指显示的情况,when是指什么事件触发让它显示出来,hide与show对应
    //solo:
    $("#huangbiao5").qtip({
      content: '<img src="img/2.jpg">',
      show:{
        when:'click',
        solo:false
      },
      hide:{
        when:'click',
        solo:false
      }
    });
    //显示类似于“窗口”模式的样式,含有title和内容的提示信息
    $("#huangbiao6").qtip({
      content: {
        title: {
          text: 'content-title-text',
          button: 'button'
        },
        text: 'content-text'
      },
      fixed:true
    });
    //api:是回调函数,beforeShow是在显示提示之前的提示信息,beforeHide则恰好相反;onRender是指内容呈现后调用
    $("#huangbiao7").qtip({
      content: 'use callback function',
      api:{
        beforeShow:function(){
          alert("beforeShow api function");
        },
        beforeHide:function(){
          alert("beforeHide api function");
        }
      }
    });
    $("#huangbiao9").qtip({
      content: '',
      style:{
        width:"1024px",
        height:"1024px",
        background:"black"
      }
    });
  }
);
</script>
<title>无标题文档</title>
</head>
  <div style="text-align:center;"><span id="huangbiao">显示普通文字</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao1">设置显示文字样式</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao2">使用插件自定义的样式</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao3">设置提示的显示位置</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao4">显示图片</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao5">点击事件显示以及隐藏提示</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao6">含有标题的提示信息</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao7">使用回调函数</span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao9">遮盖全屏</span></div>
<body>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
jQuery实现区域打印功能代码详解
Jun 17 #Javascript
javascript日期比较方法实例分析
Jun 17 #Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 #Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 #Javascript
JS中递归函数
Jun 17 #Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 #Javascript
You might like
PHP中使用BigMap实例
2015/03/30 PHP
Javascript注入技巧
2007/06/22 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
python中__call__内置函数用法实例
2015/06/04 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Django 限制访问频率的思路详解
2019/12/24 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
物业总经理岗位职责
2014/02/28 职场文书
实践单位评语
2014/04/26 职场文书
社区义诊活动总结
2014/04/30 职场文书
端午节活动总结
2014/08/26 职场文书
2015年安全月活动总结
2015/03/26 职场文书
英语投诉信范文
2015/07/03 职场文书
厉行节约工作总结
2015/08/12 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL