jquery.qtip提示信息插件用法简单实例
本文实例讲述了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常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
利用QT写一个极简单的图形化Python闹钟程序
今天我们讲一下用Python写的GUI小程序.一个小闹钟(只是屏幕提示,没有声音哦) 让我们先介绍这个闹钟如何奇葩. 需要通过命令行启动. 没有标题栏. 没菜单. 甚至没有关闭按钮. 没有运行界面. 看到这里想必大家要问了,何必去做一个这样弱爆了的程序呢.显然,教育意义大于其实际用处. 像其他的模块一样,QT界面包是需要加载的. 我们用到了命令行输入,所以,sys模块也是必须的. 用到了时间,但是我们不需要使用time模块,我们用QT提供的QTime模块. 让我们先写import 语句部分. i
-
Qt如何设置窗口屏幕居中显示以及设置大小
Qt如何设置窗口屏幕居中显示以及设置大小 设置窗口居中显示 方法一:在窗口(QWidget类及派生类)的构造函数中添加如下代码: #include <QDesktopWidget> //....... QDesktopWidget* desktop = QApplication::desktop(); // =qApp->desktop();也可以 move((desktop->width() - this->width())/2, (desktop->height()
-
Qt定时器和随机数详解
环境是:Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1 一.定时器 Qt中有两种方法来使用定时器,一种是定时器事件,另一种是使用信号和槽.一般使用了多个定时器时最好使用定时器事件来处理. 1.新建Qt Gui应用,项目名称为myTimer,基类选择QWidget,类名为Widget. 2.到widget.h文件中添加函数声明: protected: void timerEvent(QTimerEvent *); 然后添加私有变量定义: int id1, id
-
用PyQt进行Python图形界面的程序的开发的入门指引
一般来说,选择用于应用程序的 GUI 工具箱会是一件棘手的事.使用 Python(许多语言也一样)的程序员可以选择的 GUI 工具箱种类繁多,而每个工具箱都有各自的优缺点.有些速度比其它工具箱快,有些比较小:有些易于安装,有些更适合于跨平台使用(对于这一点,还要指出,有些支持您需要满足的特定特性).当然,各种库都相应具有各种许可证. 对于 Python 程序员而言,缺省的 GUI 选择是 Tk(通过 Tkinter 绑定)- 其原因显而易见.Tkinter 和闲置的 IDE 是由 Python
-
jQuery表单美化插件jqTransform使用详解
jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te
-
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
本文为大家分享了Windows下配置Python PyQt4开发环境的详细步骤,供大家参考,具体内容如下 1. 下载相关软件 Eclipse下载地址:http://www.eclipse.org/downloads/ JRE下载地址:http://www.java.com/zh_CN/download/manual.jsp PyDev下载地址: http://sourceforge.net/projects/pydev/ Python下载地址:http://www.python.org/geti
-
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形.在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件--jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果--不知
-
Bootstrap树形组件jqTree的简单封装
一.组件效果预览 其实效果和之前的那个差不多,博主只是在之前的基础上加了一个选中的背景色. 全部收起 展开 全部展开 二.代码示例 其实效果很简单,重点来看看代码是如何实现封装的.还是老规矩,将已经实现的代码贴出来,然后再来一步一步讲解. (function ($) { //使用js的严格模式 'use strict'; $.fn.jqtree = function (options) { //合并默认参数和用户传过来的参数 options = $.extend({}, $.fn.jqtree.
-
jquery.qtip提示信息插件用法简单实例
本文实例讲述了jquery.qtip提示信息插件用法.分享给大家供大家参考,具体如下: 公司要求写一个关于提示信息的效果,在网上查询到了这个插件,感觉很不错,下面是自己学习的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
-
jQuery滚动条美化插件nicescroll简单用法示例
本文实例讲述了jQuery滚动条美化插件nicescroll简单用法.分享给大家供大家参考,具体如下: 你是否遇到过这种情况:想要在网页中嵌入div块并且局部滚动,但滚动条太难看啦!!! 使用jquery.nicescroll来美化滚动条吧(so easy!!): 首先:下载jquery.nicescroll.js.百度一下哦!!!(或者像本例所示直接使用CDN地址) 然后引入jquery.nicescroll.js,并且使用: <!DOCTYPE html> <html> <
-
jQuery.datatables.js插件用法及api实例详解
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "
-
jQuery中cookie插件用法实例分析
本文实例讲述了jQuery中cookie插件用法.分享给大家供大家参考,具体如下: Jquery里面提供了很多插件,方便,安全,快速实用.这节一起熟悉下JQUERY中操作Cookie的插件,插件名称为jquery.cookie.js,可以去官方网站下载. 下载地址: http://plugins.jquery.com/project/cookie. 插件主要报告如下几个用法 1.创建Cookie 创建一个名称为username,值为 admin的cookie ,如下 复制代码 代码如下: $.c
-
jquery树形菜单效果的简单实例
<!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-
-
jQuery extend()详解及简单实例
jQuery extend()详解及简单实例 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们说的工具方法是指无需实例化就可以调用的函数,如第一段代码:实例
-
jquery.serialize() 函数语法及简单实例
jQuery - serialize() 方法 W3School给出的定义与用法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语法 $(selector).serialize()详细说明 .serialize() 方法创建以标准 URL 编码表示的文本字符串.它的操作对象是代表表单元素集合的 jQuer
-
Delphi 用DLL实现插件的简单实例
Delphi 用DLL实现插件的简单实例 这是DLL的代码 实现代码: library MyDll; uses SysUtils, Dialogs, Classes; procedure ShowInfo(info:PChar);stdcall; begin ShowMessage('您选择了['+info+']'); end; function GetCaption:Pchar; begin Result := '中国'; end; exports ShowInfo, GetCaption;
-
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!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>
-
DOM操作和jQuery实现选项移动操作的简单实例
DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM选项移动操作</title> <style> select { width: 100px; height: 85px; } div { display: inline-block; width: 50px } </style