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入门教程 Cookies
Jan 31 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
分析JS中this引发的bug
Dec 12 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP自定义函数收代码
2010/08/01 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
express的中间件cookieParser详解
2014/12/04 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python中super()函数简介及用法分享
2016/07/11 Python
python WindowsError的错误代码详解
2017/07/23 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
大学生四年生活自我鉴定
2013/11/21 职场文书
中学生操行评语大全
2014/04/24 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
品质口号大全
2014/06/17 职场文书
领导干部对照检查材料
2014/08/24 职场文书
前台接待员岗位职责
2015/04/15 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python