jquery 提示插件 cluetip

jquery的 插件cluetip,

地址下载是:plugins.learningjquery.com/cluetip/demo/

下面简单讲解下用法:

1 首先当然要放JQUERY的基本JS,和这个插件的JS了,如:

<a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter.....

$(‘a.title‘).cluetip({splitTitle: ‘|‘});

这样就会在该连接被点时,弹出一个框,标题是this is the title,内容是|号后面的内容了

2 也可以弹出的内容是个连接,比如
   <a class="basic" href="ajax.htm" rel="ajax.htm">

$(‘a.basic‘).cluetip();

3 定义弹出框的高度大小等:

<a class="custom-width" href="ajax3.htm" rel="ajax3.htm">

$(‘a.custom-width‘).cluetip({width: ‘200px‘, showTitle: false});

4 当鼠标移动到某连接时弹出:

<h4 title="Fancy Title!" id="ajax3.htm">Hover over me</h4>

$(‘h4‘).cluetip({attribute: ‘id‘, hoverClass: ‘highlight‘});

5 当用户主动点这个连接时,才弹出提示
   <a href="ajaxclick.htm" rel="ajax5.htm" title="active ingredients">

$(‘#clickme‘).cluetip({activation: ‘click‘, width: 650});

6 圆角的
  <a href="ajax4.htm" title="|first line body|second line body">

$(‘ol.rounded a:eq(0)‘).cluetip({splitTitle: ‘|‘, dropShadow: false, cluetipClass: ‘rounded‘, showTitle: false});

jquery 提示插件 cluetip

时间: 2024-08-28 01:36:20

jquery 提示插件 cluetip的相关文章

Jquery 提示插件

jQuery信息提示工具 官方地址:http://www.sharejs.com/code/jquery/plugin/poshytip-1.0/demo/index.html Demo中提供了三种使用的例子,页面代码如下:  <p>1.<a id="tip1" title="嗨..这里有个工具提示条!" href="#">鼠标滑上这里看看</a></p> <br/> <p>

jQuery提示插件alertify使用指南!

jQuery提示插件alertify使用指南 alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两

自己写的一个简单的jQuery提示插件

代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; "; $

jQuery提示插件alertify使用指南

alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括“确定“和”取消“按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两个css(alertify.core.css,alertify.defaul

jquery提示插件qtip2使用(全面)

详情参考:http://qtip2.com 我下载的 库文件以及自己总结的资料:链接:http://pan.baidu.com/s/1pJI43Cv密码:751y 基本用法: (1)只有简单提示 $('#username').qtip({ // Grab some elements to apply the tooltipto content: { text: '用户名只能输入英文字母或者数字' } }); (2)带标题的 $('#password').qtip({ // Grabsome el

漂亮灵活设置的jquery通知提示插件toastr

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用.jQ酷的另外一款jquery提示插件也不错:jQuery自定义工具提示插件DarkTooltip. 使用方法: 引入核心文件 1 2 3 <link href="toastr.css" rel="stylesheet" type="

我的第三个jquery插件——promptForK13内容提示插件

jQuery提示插件,默认css样式使用了css3属性,所以最好在火狐或谷歌等标准浏览器下浏览.可自定义提示框结构及样式. 下载 可设参数: "addID": "", //追加ID,方便自定义控制    "addClass": "", //追加class,方便自定义控制    "dom": "", //自定义dom结构                //最外面的元素必须以.prompt_

jQuery打造智能提示插件二(可编辑下拉框)

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { $.fn.combox = function(options) { var KEY = { UP: 38, DOW

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

原文:从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零