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 相关文章推荐
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js中的this关键字详解
2013/09/25 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
javascript常用的方法分享
2015/07/01 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python 常用string函数详解
2016/05/30 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
使用TensorFlow实现SVM
2018/09/06 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
python语言中有算法吗
2020/06/16 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
毕业自我鉴定范文
2013/11/06 职场文书
《争吵》教学反思
2014/02/15 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
centos8安装MongoDB的详细过程
2021/10/24 MongoDB