编程 Javascript

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程序设计有所帮助。

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

- Author -

hbiao68

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 中关于CSS操作部分使用说明

Jun 10 Javascript

基于jQuery的简单的列表导航菜单

Mar 02 Javascript

JS+css 图片自动缩放自适应大小

Aug 08 Javascript

JavaScript中判断整字类型最简洁的实现方法

Nov 08 Javascript

使用jQuery在移动页面上添加按钮和给按钮添加图标

Dec 04 Javascript

利用VUE框架，实现列表分页功能示例代码

Jan 12 Javascript

JS与jQuery实现子窗口获取父窗口元素值的方法

Apr 17 jQuery

在Vue组件中使用 TypeScript的方法

Feb 28 Javascript

package.json各个属性说明详解

Mar 11 Javascript

详解关于Vue单元测试的几个坑

Apr 26 Javascript

原生js实现购物车功能

Sep 23 Javascript

详细谈谈JavaScript中循环之间的差异

Aug 23 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