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 jQuery插件练习
Dec 24 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 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实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
Python 初始化多维数组代码
2008/09/06 Python
Atom的python插件和常用插件说明
2018/07/08 Python
django框架自定义用户表操作示例
2018/08/07 Python
pymongo中group by的操作方法教程
2019/03/22 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
pycharm永久激活超详细教程
2020/10/29 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
经济信息管理专业大学生求职信
2013/09/27 职场文书
中青班党性分析材料
2014/02/16 职场文书
读书活动总结范文
2014/04/26 职场文书
介绍信范文
2015/01/31 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
python实现监听键盘
2021/04/26 Python
MySql开发之自动同步表结构
2021/05/28 MySQL
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android